UNPKG

@builder.io/mitosis

Version:

Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io

91 lines (90 loc) 3.3 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.styleMapToCss = exports.parseCssObject = exports.getStylesOnly = exports.getNestedSelectors = exports.hasStyle = exports.hasCss = exports.nodeHasStyle = exports.nodeHasCss = void 0; const json5_1 = __importDefault(require("json5")); const lodash_1 = require("lodash"); const legacy_1 = __importDefault(require("neotraverse/legacy")); const dash_case_1 = require("../dash-case"); const is_mitosis_node_1 = require("../is-mitosis-node"); const is_upper_case_1 = require("../is-upper-case"); const nodeHasCss = (node) => { var _a; return Boolean(typeof ((_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code) === 'string' && node.bindings.css.code.trim().length > 6); }; exports.nodeHasCss = nodeHasCss; const nodeHasStyle = (node) => { var _a; return (Boolean(typeof ((_a = node.bindings.style) === null || _a === void 0 ? void 0 : _a.code) === 'string') || Boolean(typeof node.properties.style === 'string')); }; exports.nodeHasStyle = nodeHasStyle; const hasCss = (component) => { var _a; let hasStyles = !!((_a = component.style) === null || _a === void 0 ? void 0 : _a.length); if (hasStyles) { return true; } (0, legacy_1.default)(component).forEach(function (item) { if ((0, is_mitosis_node_1.isMitosisNode)(item)) { if ((0, exports.nodeHasCss)(item)) { hasStyles = true; this.stop(); } } }); return hasStyles; }; exports.hasCss = hasCss; const hasStyle = (component) => { let hasStyles = false; (0, legacy_1.default)(component).forEach(function (item) { if ((0, is_mitosis_node_1.isMitosisNode)(item)) { if ((0, exports.nodeHasStyle)(item)) { hasStyles = true; this.stop(); } } }); return hasStyles; }; exports.hasStyle = hasStyle; const getNestedSelectors = (map) => { return (0, lodash_1.pickBy)(map, (value) => typeof value === 'object'); }; exports.getNestedSelectors = getNestedSelectors; const getStylesOnly = (map) => { return (0, lodash_1.pickBy)(map, (value) => typeof value === 'string'); }; exports.getStylesOnly = getStylesOnly; const parseCssObject = (css) => { try { return json5_1.default.parse(css); } catch (e) { console.warn('Could not parse CSS object', css); throw e; } }; exports.parseCssObject = parseCssObject; const getCssPropertyName = (cssObjectKey) => { // Allow custom CSS properties if (cssObjectKey.startsWith('--')) { return cssObjectKey; } let str = (0, dash_case_1.dashCase)(cssObjectKey); // Convert vendor prefixes like 'WebkitFoo' to '-webkit-foo' if ((0, is_upper_case_1.isUpperCase)(cssObjectKey[0])) { str = `-${str}`; } return str; }; const styleMapToCss = (map) => { return Object.entries(map) .filter(([key, value]) => typeof value === 'string') .map(([key, value]) => ` ${getCssPropertyName(key)}: ${value};`) .join('\n'); }; exports.styleMapToCss = styleMapToCss;