@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
48 lines (47 loc) • 2.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.collectClassString = void 0;
// This should really be a preprocessor mapping the `class` attribute binding based on what other values have
// to make this more pluggable
const collectClassString = (json, options) => {
var _a, _b, _c;
const staticClasses = [];
if (json.properties.class) {
staticClasses.push(json.properties.class);
delete json.properties.class;
}
if (json.properties.className) {
staticClasses.push(json.properties.className);
delete json.properties.className;
}
const dynamicClasses = [];
if (typeof ((_a = json.bindings.class) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
dynamicClasses.push(json.bindings.class.code);
delete json.bindings.class;
}
if (typeof ((_b = json.bindings.className) === null || _b === void 0 ? void 0 : _b.code) === 'string') {
dynamicClasses.push(json.bindings.className.code);
delete json.bindings.className;
}
if (typeof ((_c = json.bindings.css) === null || _c === void 0 ? void 0 : _c.code) === 'string' &&
json.bindings.css.code.trim().length > 4 &&
options.stylesType === 'styled-components') {
dynamicClasses.push(`css(${json.bindings.css.code})`);
}
delete json.bindings.css;
const staticClassesString = staticClasses.join(' ');
const dynamicClassesString = dynamicClasses.join(" + ' ' + ");
const hasStaticClasses = Boolean(staticClasses.length);
const hasDynamicClasses = Boolean(dynamicClasses.length);
if (hasStaticClasses && !hasDynamicClasses) {
return `"${staticClassesString}"`;
}
if (hasDynamicClasses && !hasStaticClasses) {
return `{${dynamicClassesString}}`;
}
if (hasDynamicClasses && hasStaticClasses) {
return `{"${staticClassesString} " + ${dynamicClassesString}}`;
}
return null;
};
exports.collectClassString = collectClassString;