UNPKG

@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
"use strict"; 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;