@wordpress/style-engine 1.1.1-next.4d3b314fd5.0 → 1.3.0
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 +10 -0
- package/build/styles/border/index.js +2 -2
- package/build/styles/border/index.js.map +1 -1
- package/build/styles/outline/index.js +1 -1
- package/build/styles/outline/index.js.map +1 -1
- package/build/styles/utils.js +2 -2
- package/build/styles/utils.js.map +1 -1
- package/build-module/styles/border/index.js +2 -2
- package/build-module/styles/border/index.js.map +1 -1
- package/build-module/styles/outline/index.js +1 -1
- package/build-module/styles/outline/index.js.map +1 -1
- package/build-module/styles/utils.js +2 -2
- package/build-module/styles/utils.js.map +1 -1
- package/build-types/styles/utils.d.ts +2 -2
- package/class-wp-style-engine-css-declarations.php +32 -0
- package/class-wp-style-engine.php +6 -5
- package/package.json +2 -2
- package/src/styles/border/index.ts +2 -2
- package/src/styles/outline/index.ts +1 -1
- package/src/styles/utils.ts +2 -2
- package/src/test/index.js +47 -9
- package/tsconfig.tsbuildinfo +1 -1
- package/phpunit/class-wp-style-engine-css-declarations-test.php +0 -281
- package/phpunit/class-wp-style-engine-css-rule-test.php +0 -156
- package/phpunit/class-wp-style-engine-css-rules-store-test.php +0 -188
- package/phpunit/class-wp-style-engine-processor-test.php +0 -314
- package/phpunit/style-engine-test.php +0 -688
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 1.3.0 (2022-10-19)
|
|
6
|
+
|
|
7
|
+
### Internal
|
|
8
|
+
- Style Engine: move PHP unit tests to Gutenberg [#44722](https://github.com/WordPress/gutenberg/pull/44722)
|
|
9
|
+
|
|
10
|
+
## 1.2.0 (2022-10-05)
|
|
11
|
+
|
|
12
|
+
### Internal
|
|
13
|
+
- Script loader: remove 6.1 wp actions ([#44519](https://github.com/WordPress/gutenberg/pull/44519))
|
|
14
|
+
|
|
5
15
|
## 1.1.0 (2022-09-21)
|
|
6
16
|
|
|
7
17
|
### Enhancement
|
|
@@ -14,7 +14,7 @@ var _utils = require("../utils");
|
|
|
14
14
|
/**
|
|
15
15
|
* Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
|
|
16
16
|
*
|
|
17
|
-
* @param
|
|
17
|
+
* @param path An array of strings representing the path to the style value in the style object.
|
|
18
18
|
*
|
|
19
19
|
* @return A function that generates CSS rules.
|
|
20
20
|
*/
|
|
@@ -24,7 +24,7 @@ function createBorderGenerateFunction(path) {
|
|
|
24
24
|
/**
|
|
25
25
|
* Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
|
|
26
26
|
*
|
|
27
|
-
* @param
|
|
27
|
+
* @param edge The edge to create CSS rules for.
|
|
28
28
|
*
|
|
29
29
|
* @return A function that generates CSS rules.
|
|
30
30
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACN,yBAAcD,KAAd,EAAqBC,OAArB,EAA8BF,IAA9B,EAAoC,0BAAeA,IAAf,CAApC,CADD;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,QAAF,EAAY,QAAZ,CAHM,EAIN;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJM,EAQN,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARM,CAAP;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;eAKe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACN,yBAAcD,KAAd,EAAqBC,OAArB,EAA8BF,IAA9B,EAAoC,0BAAeA,IAAf,CAApC,CADD;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,QAAF,EAAY,QAAZ,CAHM,EAIN;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJM,EAQN,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARM,CAAP;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;eAKe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param path An array of strings representing the path to the style value in the style object.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderGenerateFunction( path: string[] ): GenerateFunction {\n\treturn ( style, options ) =>\n\t\tgenerateRule( style, options, path, camelCaseJoin( path ) );\n}\n\n/**\n * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.\n *\n * @param edge The edge to create CSS rules for.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {\n\treturn ( style, options ) => {\n\t\treturn [ 'color', 'style', 'width' ].flatMap( ( key ) => {\n\t\t\tconst path = [ 'border', edge, key ];\n\t\t\treturn createBorderGenerateFunction( path )( style, options );\n\t\t} );\n\t};\n}\n\nconst color: StyleDefinition = {\n\tname: 'color',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'color' ] ),\n};\n\nconst radius: StyleDefinition = {\n\tname: 'radius',\n\tgenerate: ( style, options ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle: StyleDefinition = {\n\tname: 'style',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'style' ] ),\n};\n\nconst width: StyleDefinition = {\n\tname: 'width',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'width' ] ),\n};\n\nconst borderTop: StyleDefinition = {\n\tname: 'borderTop',\n\tgenerate: createBorderEdgeGenerateFunction( 'top' ),\n};\n\nconst borderRight: StyleDefinition = {\n\tname: 'borderRight',\n\tgenerate: createBorderEdgeGenerateFunction( 'right' ),\n};\n\nconst borderBottom: StyleDefinition = {\n\tname: 'borderBottom',\n\tgenerate: createBorderEdgeGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft: StyleDefinition = {\n\tname: 'borderLeft',\n\tgenerate: createBorderEdgeGenerateFunction( 'left' ),\n};\n\nexport default [\n\tcolor,\n\tborderStyle,\n\twidth,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}
|
|
@@ -22,7 +22,7 @@ const offset = {
|
|
|
22
22
|
name: 'offset',
|
|
23
23
|
generate: function (style, options) {
|
|
24
24
|
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
|
|
25
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '
|
|
25
|
+
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
|
|
26
26
|
return (0, _utils.generateRule)(style, options, path, ruleKey);
|
|
27
27
|
}
|
|
28
28
|
};
|
|
@@ -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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,
|
|
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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,eACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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
|
@@ -103,7 +103,7 @@ function getCSSVarFromStyleValue(styleValue) {
|
|
|
103
103
|
/**
|
|
104
104
|
* Capitalizes the first letter in a string.
|
|
105
105
|
*
|
|
106
|
-
* @param
|
|
106
|
+
* @param string The string whose first letter the function will capitalize.
|
|
107
107
|
*
|
|
108
108
|
* @return String with the first letter capitalized.
|
|
109
109
|
*/
|
|
@@ -116,7 +116,7 @@ function upperFirst(string) {
|
|
|
116
116
|
/**
|
|
117
117
|
* Converts an array of strings into a camelCase string.
|
|
118
118
|
*
|
|
119
|
-
* @param
|
|
119
|
+
* @param strings The strings to join into a camelCase string.
|
|
120
120
|
*
|
|
121
121
|
* @return camelCase string.
|
|
122
122
|
*/
|
|
@@ -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":"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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
|
|
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":"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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"]}
|
|
@@ -5,7 +5,7 @@ import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
|
|
|
5
5
|
/**
|
|
6
6
|
* Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
|
|
7
7
|
*
|
|
8
|
-
* @param
|
|
8
|
+
* @param path An array of strings representing the path to the style value in the style object.
|
|
9
9
|
*
|
|
10
10
|
* @return A function that generates CSS rules.
|
|
11
11
|
*/
|
|
@@ -16,7 +16,7 @@ function createBorderGenerateFunction(path) {
|
|
|
16
16
|
/**
|
|
17
17
|
* Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
|
|
18
18
|
*
|
|
19
|
-
* @param
|
|
19
|
+
* @param edge The edge to create CSS rules for.
|
|
20
20
|
*
|
|
21
21
|
* @return A function that generates CSS rules.
|
|
22
22
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["generateRule","generateBoxRules","camelCaseJoin","createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,EAAuBC,gBAAvB,EAAyCC,aAAzC,QAA8D,UAA9D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACNN,YAAY,CAAEK,KAAF,EAASC,OAAT,EAAkBF,IAAlB,EAAwBF,aAAa,CAAEE,IAAF,CAArC,CADb;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAOL,gBAAgB,CACtBI,KADsB,EAEtBC,OAFsB,EAGtB,CAAE,QAAF,EAAY,QAAZ,CAHsB,EAItB;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJsB,EAQtB,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARsB,CAAvB;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;AAKA,eAAe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["generateRule","generateBoxRules","camelCaseJoin","createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,EAAuBC,gBAAvB,EAAyCC,aAAzC,QAA8D,UAA9D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACNN,YAAY,CAAEK,KAAF,EAASC,OAAT,EAAkBF,IAAlB,EAAwBF,aAAa,CAAEE,IAAF,CAArC,CADb;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAOL,gBAAgB,CACtBI,KADsB,EAEtBC,OAFsB,EAGtB,CAAE,QAAF,EAAY,QAAZ,CAHsB,EAItB;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJsB,EAQtB,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARsB,CAAvB;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;AAKA,eAAe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param path An array of strings representing the path to the style value in the style object.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderGenerateFunction( path: string[] ): GenerateFunction {\n\treturn ( style, options ) =>\n\t\tgenerateRule( style, options, path, camelCaseJoin( path ) );\n}\n\n/**\n * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.\n *\n * @param edge The edge to create CSS rules for.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {\n\treturn ( style, options ) => {\n\t\treturn [ 'color', 'style', 'width' ].flatMap( ( key ) => {\n\t\t\tconst path = [ 'border', edge, key ];\n\t\t\treturn createBorderGenerateFunction( path )( style, options );\n\t\t} );\n\t};\n}\n\nconst color: StyleDefinition = {\n\tname: 'color',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'color' ] ),\n};\n\nconst radius: StyleDefinition = {\n\tname: 'radius',\n\tgenerate: ( style, options ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle: StyleDefinition = {\n\tname: 'style',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'style' ] ),\n};\n\nconst width: StyleDefinition = {\n\tname: 'width',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'width' ] ),\n};\n\nconst borderTop: StyleDefinition = {\n\tname: 'borderTop',\n\tgenerate: createBorderEdgeGenerateFunction( 'top' ),\n};\n\nconst borderRight: StyleDefinition = {\n\tname: 'borderRight',\n\tgenerate: createBorderEdgeGenerateFunction( 'right' ),\n};\n\nconst borderBottom: StyleDefinition = {\n\tname: 'borderBottom',\n\tgenerate: createBorderEdgeGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft: StyleDefinition = {\n\tname: 'borderLeft',\n\tgenerate: createBorderEdgeGenerateFunction( 'left' ),\n};\n\nexport default [\n\tcolor,\n\tborderStyle,\n\twidth,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}
|
|
@@ -14,7 +14,7 @@ const offset = {
|
|
|
14
14
|
name: 'offset',
|
|
15
15
|
generate: function (style, options) {
|
|
16
16
|
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
|
|
17
|
-
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '
|
|
17
|
+
let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
|
|
18
18
|
return generateRule(style, options, path, ruleKey);
|
|
19
19
|
}
|
|
20
20
|
};
|
|
@@ -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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,
|
|
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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,eACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;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"]}
|
|
@@ -92,7 +92,7 @@ export function getCSSVarFromStyleValue(styleValue) {
|
|
|
92
92
|
/**
|
|
93
93
|
* Capitalizes the first letter in a string.
|
|
94
94
|
*
|
|
95
|
-
* @param
|
|
95
|
+
* @param string The string whose first letter the function will capitalize.
|
|
96
96
|
*
|
|
97
97
|
* @return String with the first letter capitalized.
|
|
98
98
|
*/
|
|
@@ -104,7 +104,7 @@ export function upperFirst(string) {
|
|
|
104
104
|
/**
|
|
105
105
|
* Converts an array of strings into a camelCase string.
|
|
106
106
|
*
|
|
107
|
-
* @param
|
|
107
|
+
* @param strings The strings to join into a camelCase string.
|
|
108
108
|
*
|
|
109
109
|
* @return camelCase string.
|
|
110
110
|
*/
|
|
@@ -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":"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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
|
|
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,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,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;;AACA,OAAO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINQ,QAJM,EAMe;AAAA,MADrBC,oBACqB,uEADY,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CACZ;AACrB,QAAMC,QAAkC,GAAGlB,GAAG,CAAEM,KAAF,EAASE,IAAT,CAA9C;;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,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,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,CACxDd,GAAG,CAAEkB,QAAF,EAAY,CAAEO,IAAF,CAAZ,CADqD,CAAzD;;AAGA,UAAKZ,KAAL,EAAa;AACZW,QAAAA,GAAG,CAACJ,IAAJ,CAAU;AACTT,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEU,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;;AACA,OAAO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuB3B,yBAAvB,CAFD,EAGE;AACD,UAAM4B,QAAQ,GAAGpB,UAAU,CACzBqB,KADe,CACR7B,yBAAyB,CAAC8B,MADlB,EAEfC,KAFe,CAER9B,uCAFQ,EAGf+B,GAHe,CAGRC,cAAF,IAAsBlC,SAAS,CAAEkC,cAAF,CAHrB,EAIfC,IAJe,CAIThC,mCAJS,CAAjB;AAKA,WAAQ,aAAa0B,QAAU,GAA/B;AACA;;AACD,SAAOpB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASkB,UAAT,CAAqBS,MAArB,EAA8C;AACpD,QAAM,CAAEC,WAAF,EAAe,GAAGC,IAAlB,IAA2BF,MAAjC;AACA,SAAOC,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACH,IAAL,CAAW,EAAX,CAAnC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASK,aAAT,CAAwBC,OAAxB,EAAoD;AAC1D,QAAM,CAAEC,SAAF,EAAa,GAAGJ,IAAhB,IAAyBG,OAA/B;AACA,SAAOC,SAAS,CAACC,WAAV,KAA0BL,IAAI,CAACL,GAAL,CAAUN,UAAV,EAAuBQ,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"]}
|
|
@@ -36,7 +36,7 @@ export declare function getCSSVarFromStyleValue(styleValue: string): string;
|
|
|
36
36
|
/**
|
|
37
37
|
* Capitalizes the first letter in a string.
|
|
38
38
|
*
|
|
39
|
-
* @param
|
|
39
|
+
* @param string The string whose first letter the function will capitalize.
|
|
40
40
|
*
|
|
41
41
|
* @return String with the first letter capitalized.
|
|
42
42
|
*/
|
|
@@ -44,7 +44,7 @@ export declare function upperFirst(string: string): string;
|
|
|
44
44
|
/**
|
|
45
45
|
* Converts an array of strings into a camelCase string.
|
|
46
46
|
*
|
|
47
|
-
* @param
|
|
47
|
+
* @param strings The strings to join into a camelCase string.
|
|
48
48
|
*
|
|
49
49
|
* @return camelCase string.
|
|
50
50
|
*/
|
|
@@ -17,6 +17,21 @@ if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
|
|
|
17
17
|
* @access private
|
|
18
18
|
*/
|
|
19
19
|
class WP_Style_Engine_CSS_Declarations {
|
|
20
|
+
/**
|
|
21
|
+
* An array of valid CSS custom properties.
|
|
22
|
+
* CSS custom properties are permitted by safecss_filter_attr()
|
|
23
|
+
* since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
|
|
24
|
+
*
|
|
25
|
+
* This whitelist exists so that the Gutenberg plugin maintains
|
|
26
|
+
* backwards compatibility with versions of WordPress < 6.1.
|
|
27
|
+
*
|
|
28
|
+
* It does not need to be backported to future versions of WordPress.
|
|
29
|
+
*
|
|
30
|
+
* @var array
|
|
31
|
+
*/
|
|
32
|
+
protected static $valid_custom_declarations = array(
|
|
33
|
+
'--wp--style--unstable-gallery-gap' => 'gap',
|
|
34
|
+
);
|
|
20
35
|
|
|
21
36
|
/**
|
|
22
37
|
* An array of CSS declarations (property => value pairs).
|
|
@@ -125,6 +140,23 @@ class WP_Style_Engine_CSS_Declarations {
|
|
|
125
140
|
*/
|
|
126
141
|
protected static function filter_declaration( $property, $value, $spacer = '' ) {
|
|
127
142
|
$filtered_value = wp_strip_all_tags( $value, true );
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Allows a specific list of CSS custom properties starting with `--wp--`.
|
|
146
|
+
*
|
|
147
|
+
* CSS custom properties are permitted by safecss_filter_attr()
|
|
148
|
+
* since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
|
|
149
|
+
*
|
|
150
|
+
* This condition exists so that the Gutenberg plugin maintains
|
|
151
|
+
* backwards compatibility with versions of WordPress < 6.1.
|
|
152
|
+
*
|
|
153
|
+
* It does not need to be backported to future versions of WordPress.
|
|
154
|
+
*/
|
|
155
|
+
if ( '' !== $filtered_value && isset( static::$valid_custom_declarations[ $property ] ) ) {
|
|
156
|
+
return safecss_filter_attr( static::$valid_custom_declarations[ $property ] . ":{$spacer}{$value}" ) ?
|
|
157
|
+
"{$property}:{$spacer}{$value}" : '';
|
|
158
|
+
}
|
|
159
|
+
|
|
128
160
|
if ( '' !== $filtered_value ) {
|
|
129
161
|
return safecss_filter_attr( "{$property}:{$spacer}{$filtered_value}" );
|
|
130
162
|
}
|
|
@@ -17,11 +17,12 @@ if ( class_exists( 'WP_Style_Engine' ) ) {
|
|
|
17
17
|
* The Style Engine aims to provide a consistent API for rendering styling for blocks across both client-side and server-side applications.
|
|
18
18
|
*
|
|
19
19
|
* This class is for internal Core usage and is not supposed to be used by extenders (plugins and/or themes).
|
|
20
|
+
* This class is final and should not be extended.
|
|
20
21
|
* This is a low-level API that may need to do breaking changes. Please, use wp_style_engine_get_styles instead.
|
|
21
22
|
*
|
|
22
23
|
* @access private
|
|
23
24
|
*/
|
|
24
|
-
class WP_Style_Engine {
|
|
25
|
+
final class WP_Style_Engine {
|
|
25
26
|
/**
|
|
26
27
|
* Style definitions that contain the instructions to
|
|
27
28
|
* parse/output valid Gutenberg styles from a block's attributes.
|
|
@@ -107,28 +108,28 @@ class WP_Style_Engine {
|
|
|
107
108
|
'path' => array( 'border', 'width' ),
|
|
108
109
|
),
|
|
109
110
|
'top' => array(
|
|
110
|
-
'value_func' => '
|
|
111
|
+
'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
|
|
111
112
|
'path' => array( 'border', 'top' ),
|
|
112
113
|
'css_vars' => array(
|
|
113
114
|
'color' => '--wp--preset--color--$slug',
|
|
114
115
|
),
|
|
115
116
|
),
|
|
116
117
|
'right' => array(
|
|
117
|
-
'value_func' => '
|
|
118
|
+
'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
|
|
118
119
|
'path' => array( 'border', 'right' ),
|
|
119
120
|
'css_vars' => array(
|
|
120
121
|
'color' => '--wp--preset--color--$slug',
|
|
121
122
|
),
|
|
122
123
|
),
|
|
123
124
|
'bottom' => array(
|
|
124
|
-
'value_func' => '
|
|
125
|
+
'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
|
|
125
126
|
'path' => array( 'border', 'bottom' ),
|
|
126
127
|
'css_vars' => array(
|
|
127
128
|
'color' => '--wp--preset--color--$slug',
|
|
128
129
|
),
|
|
129
130
|
),
|
|
130
131
|
'left' => array(
|
|
131
|
-
'value_func' => '
|
|
132
|
+
'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
|
|
132
133
|
'path' => array( 'border', 'left' ),
|
|
133
134
|
'css_vars' => array(
|
|
134
135
|
'color' => '--wp--preset--color--$slug',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/style-engine",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
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": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
|
|
39
39
|
}
|
|
@@ -7,7 +7,7 @@ import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
|
|
|
7
7
|
/**
|
|
8
8
|
* Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
|
|
9
9
|
*
|
|
10
|
-
* @param
|
|
10
|
+
* @param path An array of strings representing the path to the style value in the style object.
|
|
11
11
|
*
|
|
12
12
|
* @return A function that generates CSS rules.
|
|
13
13
|
*/
|
|
@@ -19,7 +19,7 @@ function createBorderGenerateFunction( path: string[] ): GenerateFunction {
|
|
|
19
19
|
/**
|
|
20
20
|
* Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
|
|
21
21
|
*
|
|
22
|
-
* @param
|
|
22
|
+
* @param edge The edge to create CSS rules for.
|
|
23
23
|
*
|
|
24
24
|
* @return A function that generates CSS rules.
|
|
25
25
|
*/
|
|
@@ -22,7 +22,7 @@ const offset = {
|
|
|
22
22
|
style: Style,
|
|
23
23
|
options: StyleOptions,
|
|
24
24
|
path: string[] = [ 'outline', 'offset' ],
|
|
25
|
-
ruleKey: string = '
|
|
25
|
+
ruleKey: string = 'outlineOffset'
|
|
26
26
|
): GeneratedCSSRule[] => {
|
|
27
27
|
return generateRule( style, options, path, ruleKey );
|
|
28
28
|
},
|
package/src/styles/utils.ts
CHANGED
|
@@ -129,7 +129,7 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
|
|
|
129
129
|
/**
|
|
130
130
|
* Capitalizes the first letter in a string.
|
|
131
131
|
*
|
|
132
|
-
* @param
|
|
132
|
+
* @param string The string whose first letter the function will capitalize.
|
|
133
133
|
*
|
|
134
134
|
* @return String with the first letter capitalized.
|
|
135
135
|
*/
|
|
@@ -141,7 +141,7 @@ export function upperFirst( string: string ): string {
|
|
|
141
141
|
/**
|
|
142
142
|
* Converts an array of strings into a camelCase string.
|
|
143
143
|
*
|
|
144
|
-
* @param
|
|
144
|
+
* @param strings The strings to join into a camelCase string.
|
|
145
145
|
*
|
|
146
146
|
* @return camelCase string.
|
|
147
147
|
*/
|
package/src/test/index.js
CHANGED
|
@@ -73,13 +73,19 @@ describe( 'generate', () => {
|
|
|
73
73
|
letterSpacing: '12px',
|
|
74
74
|
textTransform: 'uppercase',
|
|
75
75
|
},
|
|
76
|
+
outline: {
|
|
77
|
+
offset: '2px',
|
|
78
|
+
width: '4px',
|
|
79
|
+
style: 'dashed',
|
|
80
|
+
color: 'red',
|
|
81
|
+
},
|
|
76
82
|
},
|
|
77
83
|
{
|
|
78
84
|
selector: '.some-selector',
|
|
79
85
|
}
|
|
80
86
|
)
|
|
81
87
|
).toEqual(
|
|
82
|
-
".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
|
|
88
|
+
".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
|
|
83
89
|
);
|
|
84
90
|
} );
|
|
85
91
|
|
|
@@ -234,6 +240,13 @@ describe( 'getCSSRules', () => {
|
|
|
234
240
|
letterSpacing: '12px',
|
|
235
241
|
textTransform: 'uppercase',
|
|
236
242
|
},
|
|
243
|
+
outline: {
|
|
244
|
+
offset: '2px',
|
|
245
|
+
width: '4px',
|
|
246
|
+
style: 'dashed',
|
|
247
|
+
color: 'red',
|
|
248
|
+
},
|
|
249
|
+
shadow: '10px 10px red',
|
|
237
250
|
},
|
|
238
251
|
{
|
|
239
252
|
selector: '.some-selector',
|
|
@@ -255,6 +268,26 @@ describe( 'getCSSRules', () => {
|
|
|
255
268
|
key: 'backgroundColor',
|
|
256
269
|
value: '#555555',
|
|
257
270
|
},
|
|
271
|
+
{
|
|
272
|
+
selector: '.some-selector',
|
|
273
|
+
key: 'outlineColor',
|
|
274
|
+
value: 'red',
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
selector: '.some-selector',
|
|
278
|
+
key: 'outlineStyle',
|
|
279
|
+
value: 'dashed',
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
selector: '.some-selector',
|
|
283
|
+
key: 'outlineOffset',
|
|
284
|
+
value: '2px',
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
selector: '.some-selector',
|
|
288
|
+
key: 'outlineWidth',
|
|
289
|
+
value: '4px',
|
|
290
|
+
},
|
|
258
291
|
{
|
|
259
292
|
selector: '.some-selector',
|
|
260
293
|
key: 'marginRight',
|
|
@@ -276,45 +309,50 @@ describe( 'getCSSRules', () => {
|
|
|
276
309
|
value: '5px',
|
|
277
310
|
},
|
|
278
311
|
{
|
|
279
|
-
key: 'fontFamily',
|
|
280
312
|
selector: '.some-selector',
|
|
313
|
+
key: 'fontFamily',
|
|
281
314
|
value: "'Helvetica Neue',sans-serif",
|
|
282
315
|
},
|
|
283
316
|
{
|
|
284
|
-
key: 'fontSize',
|
|
285
317
|
selector: '.some-selector',
|
|
318
|
+
key: 'fontSize',
|
|
286
319
|
value: '2.2rem',
|
|
287
320
|
},
|
|
288
321
|
{
|
|
289
|
-
key: 'fontStyle',
|
|
290
322
|
selector: '.some-selector',
|
|
323
|
+
key: 'fontStyle',
|
|
291
324
|
value: 'italic',
|
|
292
325
|
},
|
|
293
326
|
{
|
|
294
|
-
key: 'fontWeight',
|
|
295
327
|
selector: '.some-selector',
|
|
328
|
+
key: 'fontWeight',
|
|
296
329
|
value: '800',
|
|
297
330
|
},
|
|
298
331
|
{
|
|
299
|
-
key: 'letterSpacing',
|
|
300
332
|
selector: '.some-selector',
|
|
333
|
+
key: 'letterSpacing',
|
|
301
334
|
value: '12px',
|
|
302
335
|
},
|
|
303
336
|
{
|
|
304
|
-
key: 'lineHeight',
|
|
305
337
|
selector: '.some-selector',
|
|
338
|
+
key: 'lineHeight',
|
|
306
339
|
value: '3.3',
|
|
307
340
|
},
|
|
308
341
|
{
|
|
309
|
-
key: 'textDecoration',
|
|
310
342
|
selector: '.some-selector',
|
|
343
|
+
key: 'textDecoration',
|
|
311
344
|
value: 'line-through',
|
|
312
345
|
},
|
|
313
346
|
{
|
|
314
|
-
key: 'textTransform',
|
|
315
347
|
selector: '.some-selector',
|
|
348
|
+
key: 'textTransform',
|
|
316
349
|
value: 'uppercase',
|
|
317
350
|
},
|
|
351
|
+
{
|
|
352
|
+
selector: '.some-selector',
|
|
353
|
+
key: 'boxShadow',
|
|
354
|
+
value: '10px 10px red',
|
|
355
|
+
},
|
|
318
356
|
] );
|
|
319
357
|
} );
|
|
320
358
|
|