rebase on oct-10-2023

This commit is contained in:
Rachit Bhargava
2023-10-10 17:23:21 -04:00
parent d37566ffb6
commit d096058d7d
4789 changed files with 254611 additions and 307223 deletions

View File

@@ -63,10 +63,10 @@ const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
/**
* Returns a JSON representation of the generated CSS rules.
*
* @param style Style object.
* @param options Options object with settings to adjust how the styles are generated.
* @param path An array of strings representing the path to the style value in the style object.
* @param ruleKey A CSS property key.
* @param style Style object.
* @param options Options object with settings to adjust how the styles are generated.
* @param path An array of strings representing the path to the style value in the style object.
* @param ruleKey A CSS property key.
*
* @return GeneratedCSSRule[] CSS rules.
*/
@@ -74,7 +74,7 @@ const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
function generateRule(style, options, path, ruleKey) {
const styleValue = (0,external_lodash_namespaceObject.get)(style, path);
return styleValue ? [{
selector: options === null || options === void 0 ? void 0 : options.selector,
selector: options?.selector,
key: ruleKey,
value: getCSSVarFromStyleValue(styleValue)
}] : [];
@@ -82,17 +82,16 @@ function generateRule(style, options, path, ruleKey) {
/**
* Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
*
* @param style Style object.
* @param options Options object with settings to adjust how the styles are generated.
* @param path An array of strings representing the path to the style value in the style object.
* @param ruleKeys An array of CSS property keys and patterns.
* @param individualProperties The "sides" or individual properties for which to generate rules.
* @param style Style object.
* @param options Options object with settings to adjust how the styles are generated.
* @param path An array of strings representing the path to the style value in the style object.
* @param ruleKeys An array of CSS property keys and patterns.
* @param individualProperties The "sides" or individual properties for which to generate rules.
*
* @return GeneratedCSSRule[] CSS rules.
*/
function generateBoxRules(style, options, path, ruleKeys) {
let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
function generateBoxRules(style, options, path, ruleKeys, individualProperties = ['top', 'right', 'bottom', 'left']) {
const boxStyle = (0,external_lodash_namespaceObject.get)(style, path);
if (!boxStyle) {
@@ -103,7 +102,7 @@ function generateBoxRules(style, options, path, ruleKeys) {
if (typeof boxStyle === 'string') {
rules.push({
selector: options === null || options === void 0 ? void 0 : options.selector,
selector: options?.selector,
key: ruleKeys.default,
value: boxStyle
});
@@ -113,8 +112,8 @@ function generateBoxRules(style, options, path, ruleKeys) {
if (value) {
acc.push({
selector: options === null || options === void 0 ? void 0 : options.selector,
key: ruleKeys === null || ruleKeys === void 0 ? void 0 : ruleKeys.individual.replace('%s', upperFirst(side)),
selector: options?.selector,
key: ruleKeys?.individual.replace('%s', upperFirst(side)),
value
});
}
@@ -129,7 +128,7 @@ function generateBoxRules(style, options, path, ruleKeys) {
/**
* Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
*
* @param styleValue A raw style value.
* @param styleValue A raw style value.
*
* @return string A CSS var value.
*/
@@ -145,7 +144,7 @@ function getCSSVarFromStyleValue(styleValue) {
/**
* Capitalizes the first letter in a string.
*
* @param string The string whose first letter the function will capitalize.
* @param string The string whose first letter the function will capitalize.
*
* @return String with the first letter capitalized.
*/
@@ -157,7 +156,7 @@ function upperFirst(string) {
/**
* Converts an array of strings into a camelCase string.
*
* @param strings The strings to join into a camelCase string.
* @param strings The strings to join into a camelCase string.
*
* @return camelCase string.
*/
@@ -175,7 +174,7 @@ function camelCaseJoin(strings) {
/**
* Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
*
* @param path An array of strings representing the path to the style value in the style object.
* @param path An array of strings representing the path to the style value in the style object.
*
* @return A function that generates CSS rules.
*/
@@ -186,7 +185,7 @@ function createBorderGenerateFunction(path) {
/**
* Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
*
* @param edge The edge to create CSS rules for.
* @param edge The edge to create CSS rules for.
*
* @return A function that generates CSS rules.
*/
@@ -321,33 +320,25 @@ const shadow = {
const outline_color = {
name: 'color',
generate: function (style, options) {
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'color'];
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
generate: (style, options, path = ['outline', 'color'], ruleKey = 'outlineColor') => {
return generateRule(style, options, path, ruleKey);
}
};
const offset = {
name: 'offset',
generate: function (style, options) {
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
generate: (style, options, path = ['outline', 'offset'], ruleKey = 'outlineOffset') => {
return generateRule(style, options, path, ruleKey);
}
};
const outlineStyle = {
name: 'style',
generate: function (style, options) {
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
generate: (style, options, path = ['outline', 'style'], ruleKey = 'outlineStyle') => {
return generateRule(style, options, path, ruleKey);
}
};
const outline_width = {
name: 'width',
generate: function (style, options) {
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'width'];
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
generate: (style, options, path = ['outline', 'width'], ruleKey = 'outlineWidth') => {
return generateRule(style, options, path, ruleKey);
}
};
@@ -429,7 +420,7 @@ const letterSpacing = {
}
};
const lineHeight = {
name: 'letterSpacing',
name: 'lineHeight',
generate: (style, options) => {
return generateRule(style, options, ['typography', 'lineHeight'], 'lineHeight');
}
@@ -482,17 +473,16 @@ const styleDefinitions = [...border, ...styles_color, ...dimensions, ...outline,
*
* @since 6.1.0 Introduced in WordPress core.
*
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
* @param options Options object with settings to adjust how the styles are generated.
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
* @param options Options object with settings to adjust how the styles are generated.
*
* @return A generated stylesheet or inline style declarations.
*/
function compileCSS(style) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
function compileCSS(style, options = {}) {
const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
if (!(options !== null && options !== void 0 && options.selector)) {
if (!options?.selector) {
const inlineRules = [];
rules.forEach(rule => {
inlineRules.push(`${(0,external_lodash_namespaceObject.kebabCase)(rule.key)}: ${rule.value};`);
@@ -500,7 +490,22 @@ function compileCSS(style) {
return inlineRules.join(' ');
}
const groupedRules = (0,external_lodash_namespaceObject.groupBy)(rules, 'selector');
const groupedRules = rules.reduce((acc, rule) => {
const {
selector
} = rule;
if (!selector) {
return acc;
}
if (!acc[selector]) {
acc[selector] = [];
}
acc[selector].push(rule);
return acc;
}, {});
const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${(0,external_lodash_namespaceObject.kebabCase)(rule.key)}: ${rule.value};`).join(' ')} }`);
return acc;
@@ -512,14 +517,13 @@ function compileCSS(style) {
*
* @since 6.1.0 Introduced in WordPress core.
*
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
* @param options Options object with settings to adjust how the styles are generated.
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
* @param options Options object with settings to adjust how the styles are generated.
*
* @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
*/
function getCSSRules(style) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
function getCSSRules(style, options = {}) {
const rules = [];
styleDefinitions.forEach(definition => {
if (typeof definition.generate === 'function') {