@wordpress/style-engine
Version:
A suite of parsers and compilers for WordPress styles.
136 lines (134 loc) • 4.17 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/style-engine/src/styles/utils.ts
var utils_exports = {};
__export(utils_exports, {
camelCaseJoin: () => camelCaseJoin,
generateBoxRules: () => generateBoxRules,
generateRule: () => generateRule,
getCSSValueFromRawStyle: () => getCSSValueFromRawStyle,
getStyleValueByPath: () => getStyleValueByPath,
safeDecodeURI: () => safeDecodeURI,
upperFirst: () => upperFirst
});
module.exports = __toCommonJS(utils_exports);
var import_change_case = require("change-case");
var import_constants = require("./constants");
var getStyleValueByPath = (object, path) => {
let value = object;
path.forEach((fieldName) => {
value = value?.[fieldName];
});
return value;
};
function generateRule(style, options, path, ruleKey) {
const styleValue = getStyleValueByPath(style, path);
return styleValue ? [
{
selector: options?.selector,
key: ruleKey,
value: getCSSValueFromRawStyle(styleValue)
}
] : [];
}
function generateBoxRules(style, options, path, ruleKeys, individualProperties = ["top", "right", "bottom", "left"]) {
const boxStyle = getStyleValueByPath(
style,
path
);
if (!boxStyle) {
return [];
}
const rules = [];
if (typeof boxStyle === "string") {
rules.push({
selector: options?.selector,
key: ruleKeys.default,
value: getCSSValueFromRawStyle(boxStyle)
});
} else {
const sideRules = individualProperties.reduce(
(acc, side) => {
const value = getCSSValueFromRawStyle(
getStyleValueByPath(boxStyle, [side])
);
if (value) {
acc.push({
selector: options?.selector,
key: ruleKeys?.individual.replace(
"%s",
upperFirst(side)
),
value
});
}
return acc;
},
[]
);
rules.push(...sideRules);
}
return rules;
}
function getCSSValueFromRawStyle(styleValue) {
if (typeof styleValue === "string" && styleValue.startsWith(import_constants.VARIABLE_REFERENCE_PREFIX)) {
const variable = styleValue.slice(import_constants.VARIABLE_REFERENCE_PREFIX.length).split(import_constants.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(
(presetVariable) => (0, import_change_case.paramCase)(presetVariable, {
splitRegexp: [
/([a-z0-9])([A-Z])/g,
// fooBar => foo-bar, 3Bar => 3-bar
/([0-9])([a-z])/g,
// 3bar => 3-bar
/([A-Za-z])([0-9])/g,
// Foo3 => foo-3, foo3 => foo-3
/([A-Z])([A-Z][a-z])/g
// FOOBar => foo-bar
]
})
).join(import_constants.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
return `var(--wp--${variable})`;
}
return styleValue;
}
function upperFirst(string) {
const [firstLetter, ...rest] = string;
return firstLetter.toUpperCase() + rest.join("");
}
function camelCaseJoin(strings) {
const [firstItem, ...rest] = strings;
return firstItem.toLowerCase() + rest.map(upperFirst).join("");
}
function safeDecodeURI(uri) {
try {
return decodeURI(uri);
} catch (uriError) {
return uri;
}
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
camelCaseJoin,
generateBoxRules,
generateRule,
getCSSValueFromRawStyle,
getStyleValueByPath,
safeDecodeURI,
upperFirst
});
//# sourceMappingURL=utils.js.map