@wordpress/style-engine 1.17.0 → 1.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/index.js +3 -5
- package/build/index.js.map +1 -1
- package/build/styles/outline/index.js +4 -12
- package/build/styles/outline/index.js.map +1 -1
- package/build/styles/utils.js +5 -6
- package/build/styles/utils.js.map +1 -1
- package/build-module/index.js +3 -5
- package/build-module/index.js.map +1 -1
- package/build-module/styles/outline/index.js +4 -12
- package/build-module/styles/outline/index.js.map +1 -1
- package/build-module/styles/utils.js +5 -6
- package/build-module/styles/utils.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/build/index.js
CHANGED
|
@@ -24,11 +24,10 @@ var _styles = require("./styles");
|
|
|
24
24
|
*
|
|
25
25
|
* @return A generated stylesheet or inline style declarations.
|
|
26
26
|
*/
|
|
27
|
-
function compileCSS(style) {
|
|
28
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
27
|
+
function compileCSS(style, options = {}) {
|
|
29
28
|
const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
|
|
30
29
|
|
|
31
|
-
if (!
|
|
30
|
+
if (!options?.selector) {
|
|
32
31
|
const inlineRules = [];
|
|
33
32
|
rules.forEach(rule => {
|
|
34
33
|
inlineRules.push(`${(0, _lodash.kebabCase)(rule.key)}: ${rule.value};`);
|
|
@@ -70,8 +69,7 @@ function compileCSS(style) {
|
|
|
70
69
|
*/
|
|
71
70
|
|
|
72
71
|
|
|
73
|
-
function getCSSRules(style) {
|
|
74
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
72
|
+
function getCSSRules(style, options = {}) {
|
|
75
73
|
const rules = [];
|
|
76
74
|
|
|
77
75
|
_styles.styleDefinitions.forEach(definition => {
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","reduce","acc","selectorRules","Object","keys","subSelector","map","styleDefinitions","definition","generate"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,UAAT,CAAqBC,KAArB,
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","reduce","acc","selectorRules","Object","keys","subSelector","map","styleDefinitions","definition","generate"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,UAAT,CAAqBC,KAArB,EAAmCC,OAAqB,GAAG,EAA3D,EAAwE;AAC9E,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CAD8E,CAG9E;;AACA,MAAK,CAAEA,OAAO,EAAEG,QAAhB,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAG,uBAAWD,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAGV,KAAK,CAACW,MAAN,CACpB,CAAEC,GAAF,EAA6CP,IAA7C,KAAuD;AACtD,UAAM;AAAEH,MAAAA;AAAF,QAAeG,IAArB;;AACA,QAAK,CAAEH,QAAP,EAAkB;AACjB,aAAOU,GAAP;AACA;;AACD,QAAK,CAAEA,GAAG,CAAEV,QAAF,CAAV,EAAyB;AACxBU,MAAAA,GAAG,CAAEV,QAAF,CAAH,GAAkB,EAAlB;AACA;;AACDU,IAAAA,GAAG,CAAEV,QAAF,CAAH,CAAgBI,IAAhB,CAAsBD,IAAtB;AACA,WAAOO,GAAP;AACA,GAXmB,EAYpB,EAZoB,CAArB;AAcA,QAAMC,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaL,YAAb,EAA4BC,MAA5B,CACrB,CAAEC,GAAF,EAAiBI,WAAjB,KAA0C;AACzCJ,IAAAA,GAAG,CAACN,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOG,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOC,aAAa,CAACJ,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASR,WAAT,CACNH,KADM,EAENC,OAAqB,GAAG,EAFlB,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAkB,2BAAiBd,OAAjB,CAA4Be,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACC,QAAlB,KAA+B,UAApC,EAAiD;AAChDpB,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGa,UAAU,CAACC,QAAX,CAAqBtB,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = rules.reduce(\n\t\t( acc: Record< string, GeneratedCSSRule[] >, rule ) => {\n\t\t\tconst { selector } = rule;\n\t\t\tif ( ! selector ) {\n\t\t\t\treturn acc;\n\t\t\t}\n\t\t\tif ( ! acc[ selector ] ) {\n\t\t\t\tacc[ selector ] = [];\n\t\t\t}\n\t\t\tacc[ selector ].push( rule );\n\t\t\treturn acc;\n\t\t},\n\t\t{}\n\t);\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}
|
|
@@ -12,33 +12,25 @@ var _utils = require("../utils");
|
|
|
12
12
|
*/
|
|
13
13
|
const color = {
|
|
14
14
|
name: 'color',
|
|
15
|
-
generate:
|
|
16
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'color'];
|
|
17
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
|
|
15
|
+
generate: (style, options, path = ['outline', 'color'], ruleKey = 'outlineColor') => {
|
|
18
16
|
return (0, _utils.generateRule)(style, options, path, ruleKey);
|
|
19
17
|
}
|
|
20
18
|
};
|
|
21
19
|
const offset = {
|
|
22
20
|
name: 'offset',
|
|
23
|
-
generate:
|
|
24
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
|
|
25
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
|
|
21
|
+
generate: (style, options, path = ['outline', 'offset'], ruleKey = 'outlineOffset') => {
|
|
26
22
|
return (0, _utils.generateRule)(style, options, path, ruleKey);
|
|
27
23
|
}
|
|
28
24
|
};
|
|
29
25
|
const outlineStyle = {
|
|
30
26
|
name: 'style',
|
|
31
|
-
generate:
|
|
32
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
|
|
33
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
|
|
27
|
+
generate: (style, options, path = ['outline', 'style'], ruleKey = 'outlineStyle') => {
|
|
34
28
|
return (0, _utils.generateRule)(style, options, path, ruleKey);
|
|
35
29
|
}
|
|
36
30
|
};
|
|
37
31
|
const width = {
|
|
38
32
|
name: 'width',
|
|
39
|
-
generate:
|
|
40
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'width'];
|
|
41
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
|
|
33
|
+
generate: (style, options, path = ['outline', 'width'], ruleKey = 'outlineWidth') => {
|
|
42
34
|
return (0, _utils.generateRule)(style, options, path, ruleKey);
|
|
43
35
|
}
|
|
44
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,OAAb,CAHR,EAITC,OAAe,GAAG,cAJT,KAKe;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,QAAb,CAHR,EAITC,OAAe,GAAG,eAJT,KAKe;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,OAAb,CAHR,EAITC,OAAe,GAAG,cAJT,KAKe;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,OAAb,CAHR,EAITC,OAAe,GAAG,cAJT,KAKe;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;eAYe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineOffset'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}
|
package/build/styles/utils.js
CHANGED
|
@@ -30,7 +30,7 @@ var _constants = require("./constants");
|
|
|
30
30
|
function generateRule(style, options, path, ruleKey) {
|
|
31
31
|
const styleValue = (0, _lodash.get)(style, path);
|
|
32
32
|
return styleValue ? [{
|
|
33
|
-
selector: options
|
|
33
|
+
selector: options?.selector,
|
|
34
34
|
key: ruleKey,
|
|
35
35
|
value: getCSSVarFromStyleValue(styleValue)
|
|
36
36
|
}] : [];
|
|
@@ -48,8 +48,7 @@ function generateRule(style, options, path, ruleKey) {
|
|
|
48
48
|
*/
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
function generateBoxRules(style, options, path, ruleKeys) {
|
|
52
|
-
let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
|
|
51
|
+
function generateBoxRules(style, options, path, ruleKeys, individualProperties = ['top', 'right', 'bottom', 'left']) {
|
|
53
52
|
const boxStyle = (0, _lodash.get)(style, path);
|
|
54
53
|
|
|
55
54
|
if (!boxStyle) {
|
|
@@ -60,7 +59,7 @@ function generateBoxRules(style, options, path, ruleKeys) {
|
|
|
60
59
|
|
|
61
60
|
if (typeof boxStyle === 'string') {
|
|
62
61
|
rules.push({
|
|
63
|
-
selector: options
|
|
62
|
+
selector: options?.selector,
|
|
64
63
|
key: ruleKeys.default,
|
|
65
64
|
value: boxStyle
|
|
66
65
|
});
|
|
@@ -70,8 +69,8 @@ function generateBoxRules(style, options, path, ruleKeys) {
|
|
|
70
69
|
|
|
71
70
|
if (value) {
|
|
72
71
|
acc.push({
|
|
73
|
-
selector: options
|
|
74
|
-
key: ruleKeys
|
|
72
|
+
selector: options?.selector,
|
|
73
|
+
key: ruleKeys?.individual.replace('%s', upperFirst(side)),
|
|
75
74
|
value
|
|
76
75
|
});
|
|
77
76
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","map","presetVariable","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":";;;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","map","presetVariable","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":";;;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,OAAO,EAAEI,QADpB;AAECC,IAAAA,GAAG,EAAEH,OAFN;AAGCI,IAAAA,KAAK,EAAEC,uBAAuB,CAAEJ,UAAF;AAH/B,GADA,CADc,GAQd,EARH;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINQ,QAJM,EAKNC,oBAA8B,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CAL3B,EAMe;AACrB,QAAMC,QAAkC,GAAG,iBAAKZ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEU,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXT,MAAAA,QAAQ,EAAEJ,OAAO,EAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEI,QAAQ,CAACK,OAFH;AAGXR,MAAAA,KAAK,EAAEK;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMI,SAAS,GAAGL,oBAAoB,CAACM,MAArB,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMZ,KAAyB,GAAGC,uBAAuB,CACxD,iBAAKI,QAAL,EAAe,CAAEO,IAAF,CAAf,CADwD,CAAzD;;AAGA,UAAKZ,KAAL,EAAa;AACZW,QAAAA,GAAG,CAACJ,IAAJ,CAAU;AACTT,UAAAA,QAAQ,EAAEJ,OAAO,EAAEI,QADV;AAETC,UAAAA,GAAG,EAAEI,QAAQ,EAAEU,UAAV,CAAqBC,OAArB,CACJ,IADI,EAEJC,UAAU,CAAEH,IAAF,CAFN,CAFI;AAMTZ,UAAAA;AANS,SAAV;AAQA;;AACD,aAAOW,GAAP;AACA,KAhBgB,EAiBjB,EAjBiB,CAAlB;AAmBAL,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGE,SAAf;AACA;;AAED,SAAOH,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGrB,UAAU,CACzBsB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,GAHe,CAGRC,cAAF,IAAsB,uBAAWA,cAAX,CAHZ,EAIfC,IAJe,CAITC,8CAJS,CAAjB;AAKA,WAAQ,aAAaR,QAAU,GAA/B;AACA;;AACD,SAAOrB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkB,UAAT,CAAqBY,MAArB,EAA8C;AACpD,QAAM,CAAEC,WAAF,EAAe,GAAGC,IAAlB,IAA2BF,MAAjC;AACA,SAAOC,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACJ,IAAL,CAAW,EAAX,CAAnC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,aAAT,CAAwBC,OAAxB,EAAoD;AAC1D,QAAM,CAAEC,SAAF,EAAa,GAAGJ,IAAhB,IAAyBG,OAA/B;AACA,SAAOC,SAAS,CAACC,WAAV,KAA0BL,IAAI,CAACN,GAAL,CAAUR,UAAV,EAAuBU,IAAvB,CAA6B,EAA7B,CAAjC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKeys An array of CSS property keys and patterns.\n * @param individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.map( ( presetVariable ) => kebabCase( presetVariable ) )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n"]}
|
package/build-module/index.js
CHANGED
|
@@ -18,11 +18,10 @@ import { styleDefinitions } from './styles';
|
|
|
18
18
|
* @return A generated stylesheet or inline style declarations.
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
|
-
export function compileCSS(style) {
|
|
22
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
21
|
+
export function compileCSS(style, options = {}) {
|
|
23
22
|
const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
|
|
24
23
|
|
|
25
|
-
if (!
|
|
24
|
+
if (!options?.selector) {
|
|
26
25
|
const inlineRules = [];
|
|
27
26
|
rules.forEach(rule => {
|
|
28
27
|
inlineRules.push(`${kebabCase(rule.key)}: ${rule.value};`);
|
|
@@ -63,8 +62,7 @@ export function compileCSS(style) {
|
|
|
63
62
|
* @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
|
|
64
63
|
*/
|
|
65
64
|
|
|
66
|
-
export function getCSSRules(style) {
|
|
67
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
65
|
+
export function getCSSRules(style, options = {}) {
|
|
68
66
|
const rules = [];
|
|
69
67
|
styleDefinitions.forEach(definition => {
|
|
70
68
|
if (typeof definition.generate === 'function') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["kebabCase","styleDefinitions","compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","reduce","acc","selectorRules","Object","keys","subSelector","map","definition","generate"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;;AAOA,SAASC,gBAAT,QAAiC,UAAjC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,UAAT,CAAqBC,KAArB,
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["kebabCase","styleDefinitions","compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","reduce","acc","selectorRules","Object","keys","subSelector","map","definition","generate"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;;AAOA,SAASC,gBAAT,QAAiC,UAAjC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,UAAT,CAAqBC,KAArB,EAAmCC,OAAqB,GAAG,EAA3D,EAAwE;AAC9E,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CAD8E,CAG9E;;AACA,MAAK,CAAEA,OAAO,EAAEG,QAAhB,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAGX,SAAS,CAAEU,IAAI,CAACE,GAAP,CAAc,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAGV,KAAK,CAACW,MAAN,CACpB,CAAEC,GAAF,EAA6CP,IAA7C,KAAuD;AACtD,UAAM;AAAEH,MAAAA;AAAF,QAAeG,IAArB;;AACA,QAAK,CAAEH,QAAP,EAAkB;AACjB,aAAOU,GAAP;AACA;;AACD,QAAK,CAAEA,GAAG,CAAEV,QAAF,CAAV,EAAyB;AACxBU,MAAAA,GAAG,CAAEV,QAAF,CAAH,GAAkB,EAAlB;AACA;;AACDU,IAAAA,GAAG,CAAEV,QAAF,CAAH,CAAgBI,IAAhB,CAAsBD,IAAtB;AACA,WAAOO,GAAP;AACA,GAXmB,EAYpB,EAZoB,CAArB;AAcA,QAAMC,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaL,YAAb,EAA4BC,MAA5B,CACrB,CAAEC,GAAF,EAAiBI,WAAjB,KAA0C;AACzCJ,IAAAA,GAAG,CAACN,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAGV,SAAS,CAAEU,IAAI,CAACE,GAAP,CAAc,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOG,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOC,aAAa,CAACJ,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASR,WAAT,CACNH,KADM,EAENC,OAAqB,GAAG,EAFlB,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;AACAJ,EAAAA,gBAAgB,CAACQ,OAAjB,CAA4Bc,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACC,QAAlB,KAA+B,UAApC,EAAiD;AAChDnB,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGY,UAAU,CAACC,QAAX,CAAqBrB,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = rules.reduce(\n\t\t( acc: Record< string, GeneratedCSSRule[] >, rule ) => {\n\t\t\tconst { selector } = rule;\n\t\t\tif ( ! selector ) {\n\t\t\t\treturn acc;\n\t\t\t}\n\t\t\tif ( ! acc[ selector ] ) {\n\t\t\t\tacc[ selector ] = [];\n\t\t\t}\n\t\t\tacc[ selector ].push( rule );\n\t\t\treturn acc;\n\t\t},\n\t\t{}\n\t);\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}
|
|
@@ -4,33 +4,25 @@
|
|
|
4
4
|
import { generateRule } from '../utils';
|
|
5
5
|
const color = {
|
|
6
6
|
name: 'color',
|
|
7
|
-
generate:
|
|
8
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'color'];
|
|
9
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
|
|
7
|
+
generate: (style, options, path = ['outline', 'color'], ruleKey = 'outlineColor') => {
|
|
10
8
|
return generateRule(style, options, path, ruleKey);
|
|
11
9
|
}
|
|
12
10
|
};
|
|
13
11
|
const offset = {
|
|
14
12
|
name: 'offset',
|
|
15
|
-
generate:
|
|
16
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
|
|
17
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
|
|
13
|
+
generate: (style, options, path = ['outline', 'offset'], ruleKey = 'outlineOffset') => {
|
|
18
14
|
return generateRule(style, options, path, ruleKey);
|
|
19
15
|
}
|
|
20
16
|
};
|
|
21
17
|
const outlineStyle = {
|
|
22
18
|
name: 'style',
|
|
23
|
-
generate:
|
|
24
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
|
|
25
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
|
|
19
|
+
generate: (style, options, path = ['outline', 'style'], ruleKey = 'outlineStyle') => {
|
|
26
20
|
return generateRule(style, options, path, ruleKey);
|
|
27
21
|
}
|
|
28
22
|
};
|
|
29
23
|
const width = {
|
|
30
24
|
name: 'width',
|
|
31
|
-
generate:
|
|
32
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'width'];
|
|
33
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
|
|
25
|
+
generate: (style, options, path = ['outline', 'width'], ruleKey = 'outlineWidth') => {
|
|
34
26
|
return generateRule(style, options, path, ruleKey);
|
|
35
27
|
}
|
|
36
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["generateRule","color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["generateRule","color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,OAAb,CAHR,EAITC,OAAe,GAAG,cAJT,KAKe;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,QAAb,CAHR,EAITC,OAAe,GAAG,eAJT,KAKe;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,OAAb,CAHR,EAITC,OAAe,GAAG,cAJT,KAKe;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,CACTC,KADS,EAETC,OAFS,EAGTC,IAAc,GAAG,CAAE,SAAF,EAAa,OAAb,CAHR,EAITC,OAAe,GAAG,cAJT,KAKe;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,eAAe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineOffset'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}
|
|
@@ -21,7 +21,7 @@ import { VARIABLE_REFERENCE_PREFIX, VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE, VAR
|
|
|
21
21
|
export function generateRule(style, options, path, ruleKey) {
|
|
22
22
|
const styleValue = get(style, path);
|
|
23
23
|
return styleValue ? [{
|
|
24
|
-
selector: options
|
|
24
|
+
selector: options?.selector,
|
|
25
25
|
key: ruleKey,
|
|
26
26
|
value: getCSSVarFromStyleValue(styleValue)
|
|
27
27
|
}] : [];
|
|
@@ -38,8 +38,7 @@ export function generateRule(style, options, path, ruleKey) {
|
|
|
38
38
|
* @return GeneratedCSSRule[] CSS rules.
|
|
39
39
|
*/
|
|
40
40
|
|
|
41
|
-
export function generateBoxRules(style, options, path, ruleKeys) {
|
|
42
|
-
let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
|
|
41
|
+
export function generateBoxRules(style, options, path, ruleKeys, individualProperties = ['top', 'right', 'bottom', 'left']) {
|
|
43
42
|
const boxStyle = get(style, path);
|
|
44
43
|
|
|
45
44
|
if (!boxStyle) {
|
|
@@ -50,7 +49,7 @@ export function generateBoxRules(style, options, path, ruleKeys) {
|
|
|
50
49
|
|
|
51
50
|
if (typeof boxStyle === 'string') {
|
|
52
51
|
rules.push({
|
|
53
|
-
selector: options
|
|
52
|
+
selector: options?.selector,
|
|
54
53
|
key: ruleKeys.default,
|
|
55
54
|
value: boxStyle
|
|
56
55
|
});
|
|
@@ -60,8 +59,8 @@ export function generateBoxRules(style, options, path, ruleKeys) {
|
|
|
60
59
|
|
|
61
60
|
if (value) {
|
|
62
61
|
acc.push({
|
|
63
|
-
selector: options
|
|
64
|
-
key: ruleKeys
|
|
62
|
+
selector: options?.selector,
|
|
63
|
+
key: ruleKeys?.individual.replace('%s', upperFirst(side)),
|
|
65
64
|
value
|
|
66
65
|
});
|
|
67
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","kebabCase","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","map","presetVariable","join","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,EAAcC,SAAd,QAA+B,QAA/B;AAEA;AACA;AACA;;AAQA,SACCC,yBADD,EAECC,uCAFD,EAGCC,mCAHD,QAIO,aAJP;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMC,UAA8B,GAAGV,GAAG,CAAEM,KAAF,EAASE,IAAT,CAA1C;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","kebabCase","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","map","presetVariable","join","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKeys An array of CSS property keys and patterns.\n * @param individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.map( ( presetVariable ) => kebabCase( presetVariable ) )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/style-engine",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.18.1",
|
|
4
4
|
"description": "A suite of parsers and compilers for WordPress styles.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
|
|
39
39
|
}
|