@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
65 lines (64 loc) • 3.26 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.collectStyledComponents = void 0;
const lodash_1 = require("lodash");
const legacy_1 = __importDefault(require("neotraverse/legacy"));
const object_hash_1 = __importDefault(require("object-hash"));
const capitalize_1 = require("../capitalize");
const is_mitosis_node_1 = require("../is-mitosis-node");
const is_upper_case_1 = require("../is-upper-case");
const collect_css_1 = require("./collect-css");
const helpers_1 = require("./helpers");
const collectStyledComponents = (json) => {
let styledComponentsCode = '';
const componentIndexes = {};
const componentHashes = {};
(0, legacy_1.default)(json).forEach(function (item) {
var _a;
if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
if ((0, helpers_1.nodeHasCss)(item)) {
const value = (0, helpers_1.parseCssObject)((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code);
delete item.bindings.css;
const normalizedNameProperty = item.properties.$name
? (0, capitalize_1.capitalize)((0, lodash_1.camelCase)((0, collect_css_1.normalizeName)(item.properties.$name)))
: null;
const componentName = normalizedNameProperty
? normalizedNameProperty
: /^h\d$/.test(item.name || '')
? item.name
: (0, capitalize_1.capitalize)((0, lodash_1.camelCase)((0, collect_css_1.normalizeName)(item.name) || 'div'));
const index = (componentIndexes[componentName] =
(componentIndexes[componentName] || 0) + 1);
const className = `${componentName}${componentName !== item.name && index === 1 ? '' : index}`;
let str = '';
const styles = (0, helpers_1.getStylesOnly)(value);
const stylesHash = (0, object_hash_1.default)(styles);
if (stylesHash === componentHashes[componentName]) {
return;
}
if (!componentHashes[componentName]) {
componentHashes[componentName] = stylesHash;
}
str += `${(0, helpers_1.styleMapToCss)(styles)}\n`;
const nestedSelectors = (0, helpers_1.getNestedSelectors)(value);
for (const nestedSelector in nestedSelectors) {
const value = nestedSelectors[nestedSelector];
str += `${nestedSelector} { ${(0, helpers_1.styleMapToCss)(value)} }`;
}
const prefix = (0, is_upper_case_1.isUpperCase)(item.name[0])
? `styled(${item.name})\``
: `styled.${item.name}\``;
item.name = className;
styledComponentsCode += `
const ${className} = ${prefix}${str}\`;
`;
}
delete item.bindings.css;
}
});
return styledComponentsCode;
};
exports.collectStyledComponents = collectStyledComponents;