@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
JavaScript
;
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;