@wordpress/style-engine 2.42.0 → 2.43.1-next.v.202604091042.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/styles/background/index.cjs +14 -17
  3. package/build/styles/background/index.cjs.map +2 -2
  4. package/build/styles/utils.cjs +1 -1
  5. package/build/styles/utils.cjs.map +2 -2
  6. package/build/types.cjs.map +1 -1
  7. package/build-module/styles/background/index.mjs +15 -18
  8. package/build-module/styles/background/index.mjs.map +2 -2
  9. package/build-module/styles/utils.mjs +1 -1
  10. package/build-module/styles/utils.mjs.map +2 -2
  11. package/build-types/styles/background/index.d.ts.map +1 -1
  12. package/build-types/types.d.ts +1 -0
  13. package/build-types/types.d.ts.map +1 -1
  14. package/package.json +2 -2
  15. package/src/class-wp-style-engine.php +19 -0
  16. package/src/styles/background/index.ts +24 -23
  17. package/src/styles/utils.ts +1 -1
  18. package/src/test/index.js +68 -0
  19. package/src/types.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 2.43.0 (2026-04-01)
6
+
5
7
  ## 2.42.0 (2026-03-18)
6
8
 
7
9
  ## 2.41.0 (2026-03-04)
package/build/styles/background/index.cjs CHANGED
@@ -28,24 +28,21 @@ var backgroundImage = {
28
28
  name: "backgroundImage",
29
29
  generate: (style, options) => {
30
30
  const _backgroundImage = style?.background?.backgroundImage;
31
- if (typeof _backgroundImage === "object" && _backgroundImage?.url) {
32
- return [
33
- {
34
- selector: options.selector,
35
- key: "backgroundImage",
36
- // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
37
- value: `url( '${encodeURI(
38
- (0, import_utils.safeDecodeURI)(_backgroundImage.url)
39
- )}' )`
40
- }
41
- ];
31
+ const gradient = (0, import_utils.getCSSValueFromRawStyle)(style?.background?.gradient) || "";
32
+ if (!_backgroundImage && !gradient) {
33
+ return [];
42
34
  }
43
- return (0, import_utils.generateRule)(
44
- style,
45
- options,
46
- ["background", "backgroundImage"],
47
- "backgroundImage"
48
- );
35
+ const backgroundImageValue = typeof _backgroundImage === "object" && _backgroundImage?.url ? `url( '${encodeURI(
36
+ (0, import_utils.safeDecodeURI)(_backgroundImage.url)
37
+ )}' )` : (0, import_utils.getCSSValueFromRawStyle)(_backgroundImage);
38
+ const cssValue = [gradient, backgroundImageValue].filter(Boolean).join(", ");
39
+ return !!cssValue ? [
40
+ {
41
+ selector: options.selector,
42
+ key: "backgroundImage",
43
+ value: cssValue
44
+ }
45
+ ] : [];
49
46
  }
50
47
  };
51
48
  var backgroundPosition = {
package/build/styles/background/index.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/styles/background/index.ts"],
4
- "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\n\t\t/*\n\t\t * The background image can be a string or an object.\n\t\t * If the background image is a string, it could already contain a url() function,\n\t\t * or have a linear-gradient value.\n\t\t */\n\t\tif ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tselector: options.selector,\n\t\t\t\t\tkey: 'backgroundImage',\n\t\t\t\t\t// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.\n\t\t\t\t\tvalue: `url( '${ encodeURI(\n\t\t\t\t\t\tsafeDecodeURI( _backgroundImage.url )\n\t\t\t\t\t) }' )`,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t'backgroundImage'\n\t\t);\n\t},\n};\n\nconst backgroundPosition = {\n\tname: 'backgroundPosition',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t'backgroundPosition'\n\t\t);\n\t},\n};\n\nconst backgroundRepeat = {\n\tname: 'backgroundRepeat',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t'backgroundRepeat'\n\t\t);\n\t},\n};\n\nconst backgroundSize = {\n\tname: 'backgroundSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundSize' ],\n\t\t\t'backgroundSize'\n\t\t);\n\t},\n};\n\nconst backgroundAttachment = {\n\tname: 'backgroundAttachment',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t'backgroundAttachment'\n\t\t);\n\t},\n};\n\nexport default [\n\tbackgroundImage,\n\tbackgroundPosition,\n\tbackgroundRepeat,\n\tbackgroundSize,\n\tbackgroundAttachment,\n];\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAA4C;AAE5C,IAAM,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,UAAM,mBAAmB,OAAO,YAAY;AAO5C,QAAK,OAAO,qBAAqB,YAAY,kBAAkB,KAAM;AACpE,aAAO;AAAA,QACN;AAAA,UACC,UAAU,QAAQ;AAAA,UAClB,KAAK;AAAA;AAAA,UAEL,OAAO,SAAU;AAAA,gBAChB,4BAAe,iBAAiB,GAAI;AAAA,UACrC,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD;AAEA,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,iBAAkB;AAAA,MAClC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,qBAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,oBAAqB;AAAA,MACrC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,kBAAmB;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,iBAAiB;AAAA,EACtB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,gBAAiB;AAAA,MACjC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,sBAAuB;AAAA,MACvC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
4
+ "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\t\tconst gradient =\n\t\t\tgetCSSValueFromRawStyle( style?.background?.gradient ) || '';\n\n\t\tif ( ! _backgroundImage && ! gradient ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst backgroundImageValue =\n\t\t\ttypeof _backgroundImage === 'object' && _backgroundImage?.url\n\t\t\t\t? `url( '${ encodeURI(\n\t\t\t\t\t\tsafeDecodeURI( _backgroundImage.url )\n\t\t\t\t ) }' )`\n\t\t\t\t: getCSSValueFromRawStyle( _backgroundImage );\n\t\tconst cssValue = [ gradient, backgroundImageValue ]\n\t\t\t.filter( Boolean )\n\t\t\t.join( ', ' );\n\n\t\treturn !! cssValue\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tselector: options.selector,\n\t\t\t\t\t\tkey: 'backgroundImage',\n\t\t\t\t\t\tvalue: cssValue,\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: [];\n\t},\n};\n\nconst backgroundPosition = {\n\tname: 'backgroundPosition',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t'backgroundPosition'\n\t\t);\n\t},\n};\n\nconst backgroundRepeat = {\n\tname: 'backgroundRepeat',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t'backgroundRepeat'\n\t\t);\n\t},\n};\n\nconst backgroundSize = {\n\tname: 'backgroundSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundSize' ],\n\t\t\t'backgroundSize'\n\t\t);\n\t},\n};\n\nconst backgroundAttachment = {\n\tname: 'backgroundAttachment',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t'backgroundAttachment'\n\t\t);\n\t},\n};\n\nexport default [\n\tbackgroundImage,\n\tbackgroundPosition,\n\tbackgroundRepeat,\n\tbackgroundSize,\n\tbackgroundAttachment,\n];\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAqE;AAErE,IAAM,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,UAAM,mBAAmB,OAAO,YAAY;AAC5C,UAAM,eACL,sCAAyB,OAAO,YAAY,QAAS,KAAK;AAE3D,QAAK,CAAE,oBAAoB,CAAE,UAAW;AACvC,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,uBACL,OAAO,qBAAqB,YAAY,kBAAkB,MACvD,SAAU;AAAA,UACV,4BAAe,iBAAiB,GAAI;AAAA,IACpC,CAAE,YACF,sCAAyB,gBAAiB;AAC9C,UAAM,WAAW,CAAE,UAAU,oBAAqB,EAChD,OAAQ,OAAQ,EAChB,KAAM,IAAK;AAEb,WAAO,CAAC,CAAE,WACP;AAAA,MACA;AAAA,QACC,UAAU,QAAQ;AAAA,QAClB,KAAK;AAAA,QACL,OAAO;AAAA,MACR;AAAA,IACA,IACA,CAAC;AAAA,EACL;AACD;AAEA,IAAM,qBAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,oBAAqB;AAAA,MACrC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,kBAAmB;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,iBAAiB;AAAA,EACtB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,gBAAiB;AAAA,MACjC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,sBAAuB;AAAA,MACvC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
6
6
  "names": []
7
7
  }
package/build/styles/utils.cjs CHANGED
@@ -118,7 +118,7 @@ function camelCaseJoin(strings) {
118
118
  function safeDecodeURI(uri) {
119
119
  try {
120
120
  return decodeURI(uri);
121
- } catch (uriError) {
121
+ } catch {
122
122
  return uri;
123
123
  }
124
124
  }
package/build/styles/utils.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles/utils.ts"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * Helper util to return a value from a certain path of the object.\n * Path is specified as an array of properties, like `[ 'x', 'y' ]`.\n *\n * @param object Input object.\n * @param path Path to the object property.\n * @return Value of the object property at the specified path.\n */\nexport const getStyleValueByPath = (\n\tobject: Record< any, any >,\n\tpath: string[]\n) => {\n\tlet value: any = object;\n\tpath.forEach( ( fieldName: string ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value;\n};\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 = getStyleValueByPath( 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: getCSSValueFromRawStyle( 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 = getStyleValueByPath(\n\t\tstyle,\n\t\tpath\n\t);\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: getCSSValueFromRawStyle( 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 = getCSSValueFromRawStyle(\n\t\t\t\t\tgetStyleValueByPath( 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 WordPress CSS custom var value from incoming style preset value,\n * if one is detected.\n *\n * The preset value is a string and follows the pattern `var:description|context|slug`.\n *\n * Example:\n *\n * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'\n *\n * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.\n *\n * @return A CSS custom var value if the incoming style value is a preset value.\n */\n\nexport function getCSSValueFromRawStyle< StyleValue = string >(\n\tstyleValue: StyleValue\n): StyleValue {\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 ) =>\n\t\t\t\tkebabCase( presetVariable, {\n\t\t\t\t\tsplitRegexp: [\n\t\t\t\t\t\t/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t\t\t\t/([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t\t\t\t],\n\t\t\t\t} )\n\t\t\t)\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })` as StyleValue;\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\n/**\n * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if\n * `decodeURI` throws an error.\n *\n * @param {string} uri URI to decode.\n *\n * @example\n * ```js\n * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'\n * ```\n *\n * @return {string} Decoded URI if possible.\n */\nexport function safeDecodeURI( uri: string ): string {\n\ttry {\n\t\treturn decodeURI( uri );\n\t} catch ( uriError ) {\n\t\treturn uri;\n\t}\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAuC;AAYvC,uBAIO;AAUA,IAAM,sBAAsB,CAClC,QACA,SACI;AACJ,MAAI,QAAa;AACjB,OAAK,QAAS,CAAE,cAAuB;AACtC,YAAQ,QAAS,SAAU;AAAA,EAC5B,CAAE;AACF,SAAO;AACR;AAYO,SAAS,aACf,OACA,SACA,MACA,SACqB;AACrB,QAAM,aAAiC,oBAAqB,OAAO,IAAK;AAExE,SAAO,aACJ;AAAA,IACA;AAAA,MACC,UAAU,SAAS;AAAA,MACnB,KAAK;AAAA,MACL,OAAO,wBAAyB,UAAW;AAAA,IAC5C;AAAA,EACA,IACA,CAAC;AACL;AAaO,SAAS,iBACf,OACA,SACA,MACA,UACA,uBAAiC,CAAE,OAAO,SAAS,UAAU,MAAO,GAC/C;AACrB,QAAM,WAAqC;AAAA,IAC1C;AAAA,IACA;AAAA,EACD;AACA,MAAK,CAAE,UAAW;AACjB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,QAA4B,CAAC;AACnC,MAAK,OAAO,aAAa,UAAW;AACnC,UAAM,KAAM;AAAA,MACX,UAAU,SAAS;AAAA,MACnB,KAAK,SAAS;AAAA,MACd,OAAO,wBAAyB,QAAS;AAAA,IAC1C,CAAE;AAAA,EACH,OAAO;AACN,UAAM,YAAY,qBAAqB;AAAA,MACtC,CAAE,KAAyB,SAAkB;AAC5C,cAAM,QAAQ;AAAA,UACb,oBAAqB,UAAU,CAAE,IAAK,CAAE;AAAA,QACzC;AACA,YAAK,OAAQ;AACZ,cAAI,KAAM;AAAA,YACT,UAAU,SAAS;AAAA,YACnB,KAAK,UAAU,WAAW;AAAA,cACzB;AAAA,cACA,WAAY,IAAK;AAAA,YAClB;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AACA,eAAO;AAAA,MACR;AAAA,MACA,CAAC;AAAA,IACF;AACA,UAAM,KAAM,GAAG,SAAU;AAAA,EAC1B;AAEA,SAAO;AACR;AAiBO,SAAS,wBACf,YACa;AACb,MACC,OAAO,eAAe,YACtB,WAAW,WAAY,0CAA0B,GAChD;AACD,UAAM,WAAW,WACf,MAAO,2CAA0B,MAAO,EACxC,MAAO,wDAAwC,EAC/C;AAAA,MAAK,CAAE,uBACP,mBAAAA,WAAW,gBAAgB;AAAA,QAC1B,aAAa;AAAA,UACZ;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,EACC,KAAM,oDAAoC;AAC5C,WAAO,aAAc,QAAS;AAAA,EAC/B;AACA,SAAO;AACR;AASO,SAAS,WAAY,QAAyB;AACpD,QAAM,CAAE,aAAa,GAAG,IAAK,IAAI;AACjC,SAAO,YAAY,YAAY,IAAI,KAAK,KAAM,EAAG;AAClD;AASO,SAAS,cAAe,SAA4B;AAC1D,QAAM,CAAE,WAAW,GAAG,IAAK,IAAI;AAC/B,SAAO,UAAU,YAAY,IAAI,KAAK,IAAK,UAAW,EAAE,KAAM,EAAG;AAClE;AAeO,SAAS,cAAe,KAAsB;AACpD,MAAI;AACH,WAAO,UAAW,GAAI;AAAA,EACvB,SAAU,UAAW;AACpB,WAAO;AAAA,EACR;AACD;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * Helper util to return a value from a certain path of the object.\n * Path is specified as an array of properties, like `[ 'x', 'y' ]`.\n *\n * @param object Input object.\n * @param path Path to the object property.\n * @return Value of the object property at the specified path.\n */\nexport const getStyleValueByPath = (\n\tobject: Record< any, any >,\n\tpath: string[]\n) => {\n\tlet value: any = object;\n\tpath.forEach( ( fieldName: string ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value;\n};\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 = getStyleValueByPath( 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: getCSSValueFromRawStyle( 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 = getStyleValueByPath(\n\t\tstyle,\n\t\tpath\n\t);\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: getCSSValueFromRawStyle( 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 = getCSSValueFromRawStyle(\n\t\t\t\t\tgetStyleValueByPath( 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 WordPress CSS custom var value from incoming style preset value,\n * if one is detected.\n *\n * The preset value is a string and follows the pattern `var:description|context|slug`.\n *\n * Example:\n *\n * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'\n *\n * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.\n *\n * @return A CSS custom var value if the incoming style value is a preset value.\n */\n\nexport function getCSSValueFromRawStyle< StyleValue = string >(\n\tstyleValue: StyleValue\n): StyleValue {\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 ) =>\n\t\t\t\tkebabCase( presetVariable, {\n\t\t\t\t\tsplitRegexp: [\n\t\t\t\t\t\t/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t\t\t\t/([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t\t\t\t],\n\t\t\t\t} )\n\t\t\t)\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })` as StyleValue;\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\n/**\n * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if\n * `decodeURI` throws an error.\n *\n * @param {string} uri URI to decode.\n *\n * @example\n * ```js\n * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'\n * ```\n *\n * @return {string} Decoded URI if possible.\n */\nexport function safeDecodeURI( uri: string ): string {\n\ttry {\n\t\treturn decodeURI( uri );\n\t} catch {\n\t\treturn uri;\n\t}\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAuC;AAYvC,uBAIO;AAUA,IAAM,sBAAsB,CAClC,QACA,SACI;AACJ,MAAI,QAAa;AACjB,OAAK,QAAS,CAAE,cAAuB;AACtC,YAAQ,QAAS,SAAU;AAAA,EAC5B,CAAE;AACF,SAAO;AACR;AAYO,SAAS,aACf,OACA,SACA,MACA,SACqB;AACrB,QAAM,aAAiC,oBAAqB,OAAO,IAAK;AAExE,SAAO,aACJ;AAAA,IACA;AAAA,MACC,UAAU,SAAS;AAAA,MACnB,KAAK;AAAA,MACL,OAAO,wBAAyB,UAAW;AAAA,IAC5C;AAAA,EACA,IACA,CAAC;AACL;AAaO,SAAS,iBACf,OACA,SACA,MACA,UACA,uBAAiC,CAAE,OAAO,SAAS,UAAU,MAAO,GAC/C;AACrB,QAAM,WAAqC;AAAA,IAC1C;AAAA,IACA;AAAA,EACD;AACA,MAAK,CAAE,UAAW;AACjB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,QAA4B,CAAC;AACnC,MAAK,OAAO,aAAa,UAAW;AACnC,UAAM,KAAM;AAAA,MACX,UAAU,SAAS;AAAA,MACnB,KAAK,SAAS;AAAA,MACd,OAAO,wBAAyB,QAAS;AAAA,IAC1C,CAAE;AAAA,EACH,OAAO;AACN,UAAM,YAAY,qBAAqB;AAAA,MACtC,CAAE,KAAyB,SAAkB;AAC5C,cAAM,QAAQ;AAAA,UACb,oBAAqB,UAAU,CAAE,IAAK,CAAE;AAAA,QACzC;AACA,YAAK,OAAQ;AACZ,cAAI,KAAM;AAAA,YACT,UAAU,SAAS;AAAA,YACnB,KAAK,UAAU,WAAW;AAAA,cACzB;AAAA,cACA,WAAY,IAAK;AAAA,YAClB;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AACA,eAAO;AAAA,MACR;AAAA,MACA,CAAC;AAAA,IACF;AACA,UAAM,KAAM,GAAG,SAAU;AAAA,EAC1B;AAEA,SAAO;AACR;AAiBO,SAAS,wBACf,YACa;AACb,MACC,OAAO,eAAe,YACtB,WAAW,WAAY,0CAA0B,GAChD;AACD,UAAM,WAAW,WACf,MAAO,2CAA0B,MAAO,EACxC,MAAO,wDAAwC,EAC/C;AAAA,MAAK,CAAE,uBACP,mBAAAA,WAAW,gBAAgB;AAAA,QAC1B,aAAa;AAAA,UACZ;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,EACC,KAAM,oDAAoC;AAC5C,WAAO,aAAc,QAAS;AAAA,EAC/B;AACA,SAAO;AACR;AASO,SAAS,WAAY,QAAyB;AACpD,QAAM,CAAE,aAAa,GAAG,IAAK,IAAI;AACjC,SAAO,YAAY,YAAY,IAAI,KAAK,KAAM,EAAG;AAClD;AASO,SAAS,cAAe,SAA4B;AAC1D,QAAM,CAAE,WAAW,GAAG,IAAK,IAAI;AAC/B,SAAO,UAAU,YAAY,IAAI,KAAK,IAAK,UAAW,EAAE,KAAM,EAAG;AAClE;AAeO,SAAS,cAAe,KAAsB;AACpD,MAAI;AACH,WAAO,UAAW,GAAI;AAAA,EACvB,QAAQ;AACP,WAAO;AAAA,EACR;AACD;",
6
6
  "names": ["kebabCase"]
7
7
  }
package/build/types.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/types.ts"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t\tgradient?: CSSProperties[ 'backgroundImage' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/build-module/styles/background/index.mjs CHANGED
@@ -1,27 +1,24 @@
1
1
  // packages/style-engine/src/styles/background/index.ts
2
- import { generateRule, safeDecodeURI } from "../utils.mjs";
2
+ import { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from "../utils.mjs";
3
3
  var backgroundImage = {
4
4
  name: "backgroundImage",
5
5
  generate: (style, options) => {
6
6
  const _backgroundImage = style?.background?.backgroundImage;
7
- if (typeof _backgroundImage === "object" && _backgroundImage?.url) {
8
- return [
9
- {
10
- selector: options.selector,
11
- key: "backgroundImage",
12
- // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
13
- value: `url( '${encodeURI(
14
- safeDecodeURI(_backgroundImage.url)
15
- )}' )`
16
- }
17
- ];
7
+ const gradient = getCSSValueFromRawStyle(style?.background?.gradient) || "";
8
+ if (!_backgroundImage && !gradient) {
9
+ return [];
18
10
  }
19
- return generateRule(
20
- style,
21
- options,
22
- ["background", "backgroundImage"],
23
- "backgroundImage"
24
- );
11
+ const backgroundImageValue = typeof _backgroundImage === "object" && _backgroundImage?.url ? `url( '${encodeURI(
12
+ safeDecodeURI(_backgroundImage.url)
13
+ )}' )` : getCSSValueFromRawStyle(_backgroundImage);
14
+ const cssValue = [gradient, backgroundImageValue].filter(Boolean).join(", ");
15
+ return !!cssValue ? [
16
+ {
17
+ selector: options.selector,
18
+ key: "backgroundImage",
19
+ value: cssValue
20
+ }
21
+ ] : [];
25
22
  }
26
23
  };
27
24
  var backgroundPosition = {
package/build-module/styles/background/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/styles/background/index.ts"],
4
- "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\n\t\t/*\n\t\t * The background image can be a string or an object.\n\t\t * If the background image is a string, it could already contain a url() function,\n\t\t * or have a linear-gradient value.\n\t\t */\n\t\tif ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tselector: options.selector,\n\t\t\t\t\tkey: 'backgroundImage',\n\t\t\t\t\t// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.\n\t\t\t\t\tvalue: `url( '${ encodeURI(\n\t\t\t\t\t\tsafeDecodeURI( _backgroundImage.url )\n\t\t\t\t\t) }' )`,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t'backgroundImage'\n\t\t);\n\t},\n};\n\nconst backgroundPosition = {\n\tname: 'backgroundPosition',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t'backgroundPosition'\n\t\t);\n\t},\n};\n\nconst backgroundRepeat = {\n\tname: 'backgroundRepeat',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t'backgroundRepeat'\n\t\t);\n\t},\n};\n\nconst backgroundSize = {\n\tname: 'backgroundSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundSize' ],\n\t\t\t'backgroundSize'\n\t\t);\n\t},\n};\n\nconst backgroundAttachment = {\n\tname: 'backgroundAttachment',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t'backgroundAttachment'\n\t\t);\n\t},\n};\n\nexport default [\n\tbackgroundImage,\n\tbackgroundPosition,\n\tbackgroundRepeat,\n\tbackgroundSize,\n\tbackgroundAttachment,\n];\n"],
5
- "mappings": ";AAIA,SAAS,cAAc,qBAAqB;AAE5C,IAAM,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,UAAM,mBAAmB,OAAO,YAAY;AAO5C,QAAK,OAAO,qBAAqB,YAAY,kBAAkB,KAAM;AACpE,aAAO;AAAA,QACN;AAAA,UACC,UAAU,QAAQ;AAAA,UAClB,KAAK;AAAA;AAAA,UAEL,OAAO,SAAU;AAAA,YAChB,cAAe,iBAAiB,GAAI;AAAA,UACrC,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,iBAAkB;AAAA,MAClC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,qBAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,oBAAqB;AAAA,MACrC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,kBAAmB;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,iBAAiB;AAAA,EACtB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,gBAAiB;AAAA,MACjC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,sBAAuB;AAAA,MACvC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
4
+ "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\t\tconst gradient =\n\t\t\tgetCSSValueFromRawStyle( style?.background?.gradient ) || '';\n\n\t\tif ( ! _backgroundImage && ! gradient ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst backgroundImageValue =\n\t\t\ttypeof _backgroundImage === 'object' && _backgroundImage?.url\n\t\t\t\t? `url( '${ encodeURI(\n\t\t\t\t\t\tsafeDecodeURI( _backgroundImage.url )\n\t\t\t\t ) }' )`\n\t\t\t\t: getCSSValueFromRawStyle( _backgroundImage );\n\t\tconst cssValue = [ gradient, backgroundImageValue ]\n\t\t\t.filter( Boolean )\n\t\t\t.join( ', ' );\n\n\t\treturn !! cssValue\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tselector: options.selector,\n\t\t\t\t\t\tkey: 'backgroundImage',\n\t\t\t\t\t\tvalue: cssValue,\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: [];\n\t},\n};\n\nconst backgroundPosition = {\n\tname: 'backgroundPosition',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t'backgroundPosition'\n\t\t);\n\t},\n};\n\nconst backgroundRepeat = {\n\tname: 'backgroundRepeat',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t'backgroundRepeat'\n\t\t);\n\t},\n};\n\nconst backgroundSize = {\n\tname: 'backgroundSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundSize' ],\n\t\t\t'backgroundSize'\n\t\t);\n\t},\n};\n\nconst backgroundAttachment = {\n\tname: 'backgroundAttachment',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t'backgroundAttachment'\n\t\t);\n\t},\n};\n\nexport default [\n\tbackgroundImage,\n\tbackgroundPosition,\n\tbackgroundRepeat,\n\tbackgroundSize,\n\tbackgroundAttachment,\n];\n"],
5
+ "mappings": ";AAIA,SAAS,cAAc,yBAAyB,qBAAqB;AAErE,IAAM,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,UAAM,mBAAmB,OAAO,YAAY;AAC5C,UAAM,WACL,wBAAyB,OAAO,YAAY,QAAS,KAAK;AAE3D,QAAK,CAAE,oBAAoB,CAAE,UAAW;AACvC,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,uBACL,OAAO,qBAAqB,YAAY,kBAAkB,MACvD,SAAU;AAAA,MACV,cAAe,iBAAiB,GAAI;AAAA,IACpC,CAAE,QACF,wBAAyB,gBAAiB;AAC9C,UAAM,WAAW,CAAE,UAAU,oBAAqB,EAChD,OAAQ,OAAQ,EAChB,KAAM,IAAK;AAEb,WAAO,CAAC,CAAE,WACP;AAAA,MACA;AAAA,QACC,UAAU,QAAQ;AAAA,QAClB,KAAK;AAAA,QACL,OAAO;AAAA,MACR;AAAA,IACA,IACA,CAAC;AAAA,EACL;AACD;AAEA,IAAM,qBAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,oBAAqB;AAAA,MACrC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,kBAAmB;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,iBAAiB;AAAA,EACtB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,gBAAiB;AAAA,MACjC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,sBAAuB;AAAA,MACvC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
6
6
  "names": []
7
7
  }
package/build-module/styles/utils.mjs CHANGED
@@ -92,7 +92,7 @@ function camelCaseJoin(strings) {
92
92
  function safeDecodeURI(uri) {
93
93
  try {
94
94
  return decodeURI(uri);
95
- } catch (uriError) {
95
+ } catch {
96
96
  return uri;
97
97
  }
98
98
  }
package/build-module/styles/utils.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles/utils.ts"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * Helper util to return a value from a certain path of the object.\n * Path is specified as an array of properties, like `[ 'x', 'y' ]`.\n *\n * @param object Input object.\n * @param path Path to the object property.\n * @return Value of the object property at the specified path.\n */\nexport const getStyleValueByPath = (\n\tobject: Record< any, any >,\n\tpath: string[]\n) => {\n\tlet value: any = object;\n\tpath.forEach( ( fieldName: string ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value;\n};\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 = getStyleValueByPath( 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: getCSSValueFromRawStyle( 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 = getStyleValueByPath(\n\t\tstyle,\n\t\tpath\n\t);\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: getCSSValueFromRawStyle( 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 = getCSSValueFromRawStyle(\n\t\t\t\t\tgetStyleValueByPath( 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 WordPress CSS custom var value from incoming style preset value,\n * if one is detected.\n *\n * The preset value is a string and follows the pattern `var:description|context|slug`.\n *\n * Example:\n *\n * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'\n *\n * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.\n *\n * @return A CSS custom var value if the incoming style value is a preset value.\n */\n\nexport function getCSSValueFromRawStyle< StyleValue = string >(\n\tstyleValue: StyleValue\n): StyleValue {\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 ) =>\n\t\t\t\tkebabCase( presetVariable, {\n\t\t\t\t\tsplitRegexp: [\n\t\t\t\t\t\t/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t\t\t\t/([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t\t\t\t],\n\t\t\t\t} )\n\t\t\t)\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })` as StyleValue;\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\n/**\n * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if\n * `decodeURI` throws an error.\n *\n * @param {string} uri URI to decode.\n *\n * @example\n * ```js\n * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'\n * ```\n *\n * @return {string} Decoded URI if possible.\n */\nexport function safeDecodeURI( uri: string ): string {\n\ttry {\n\t\treturn decodeURI( uri );\n\t} catch ( uriError ) {\n\t\treturn uri;\n\t}\n}\n"],
5
- "mappings": ";AAGA,SAAS,aAAa,iBAAiB;AAYvC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAUA,IAAM,sBAAsB,CAClC,QACA,SACI;AACJ,MAAI,QAAa;AACjB,OAAK,QAAS,CAAE,cAAuB;AACtC,YAAQ,QAAS,SAAU;AAAA,EAC5B,CAAE;AACF,SAAO;AACR;AAYO,SAAS,aACf,OACA,SACA,MACA,SACqB;AACrB,QAAM,aAAiC,oBAAqB,OAAO,IAAK;AAExE,SAAO,aACJ;AAAA,IACA;AAAA,MACC,UAAU,SAAS;AAAA,MACnB,KAAK;AAAA,MACL,OAAO,wBAAyB,UAAW;AAAA,IAC5C;AAAA,EACA,IACA,CAAC;AACL;AAaO,SAAS,iBACf,OACA,SACA,MACA,UACA,uBAAiC,CAAE,OAAO,SAAS,UAAU,MAAO,GAC/C;AACrB,QAAM,WAAqC;AAAA,IAC1C;AAAA,IACA;AAAA,EACD;AACA,MAAK,CAAE,UAAW;AACjB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,QAA4B,CAAC;AACnC,MAAK,OAAO,aAAa,UAAW;AACnC,UAAM,KAAM;AAAA,MACX,UAAU,SAAS;AAAA,MACnB,KAAK,SAAS;AAAA,MACd,OAAO,wBAAyB,QAAS;AAAA,IAC1C,CAAE;AAAA,EACH,OAAO;AACN,UAAM,YAAY,qBAAqB;AAAA,MACtC,CAAE,KAAyB,SAAkB;AAC5C,cAAM,QAAQ;AAAA,UACb,oBAAqB,UAAU,CAAE,IAAK,CAAE;AAAA,QACzC;AACA,YAAK,OAAQ;AACZ,cAAI,KAAM;AAAA,YACT,UAAU,SAAS;AAAA,YACnB,KAAK,UAAU,WAAW;AAAA,cACzB;AAAA,cACA,WAAY,IAAK;AAAA,YAClB;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AACA,eAAO;AAAA,MACR;AAAA,MACA,CAAC;AAAA,IACF;AACA,UAAM,KAAM,GAAG,SAAU;AAAA,EAC1B;AAEA,SAAO;AACR;AAiBO,SAAS,wBACf,YACa;AACb,MACC,OAAO,eAAe,YACtB,WAAW,WAAY,yBAA0B,GAChD;AACD,UAAM,WAAW,WACf,MAAO,0BAA0B,MAAO,EACxC,MAAO,uCAAwC,EAC/C;AAAA,MAAK,CAAE,mBACP,UAAW,gBAAgB;AAAA,QAC1B,aAAa;AAAA,UACZ;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,EACC,KAAM,mCAAoC;AAC5C,WAAO,aAAc,QAAS;AAAA,EAC/B;AACA,SAAO;AACR;AASO,SAAS,WAAY,QAAyB;AACpD,QAAM,CAAE,aAAa,GAAG,IAAK,IAAI;AACjC,SAAO,YAAY,YAAY,IAAI,KAAK,KAAM,EAAG;AAClD;AASO,SAAS,cAAe,SAA4B;AAC1D,QAAM,CAAE,WAAW,GAAG,IAAK,IAAI;AAC/B,SAAO,UAAU,YAAY,IAAI,KAAK,IAAK,UAAW,EAAE,KAAM,EAAG;AAClE;AAeO,SAAS,cAAe,KAAsB;AACpD,MAAI;AACH,WAAO,UAAW,GAAI;AAAA,EACvB,SAAU,UAAW;AACpB,WAAO;AAAA,EACR;AACD;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * Helper util to return a value from a certain path of the object.\n * Path is specified as an array of properties, like `[ 'x', 'y' ]`.\n *\n * @param object Input object.\n * @param path Path to the object property.\n * @return Value of the object property at the specified path.\n */\nexport const getStyleValueByPath = (\n\tobject: Record< any, any >,\n\tpath: string[]\n) => {\n\tlet value: any = object;\n\tpath.forEach( ( fieldName: string ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value;\n};\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 = getStyleValueByPath( 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: getCSSValueFromRawStyle( 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 = getStyleValueByPath(\n\t\tstyle,\n\t\tpath\n\t);\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: getCSSValueFromRawStyle( 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 = getCSSValueFromRawStyle(\n\t\t\t\t\tgetStyleValueByPath( 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 WordPress CSS custom var value from incoming style preset value,\n * if one is detected.\n *\n * The preset value is a string and follows the pattern `var:description|context|slug`.\n *\n * Example:\n *\n * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'\n *\n * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.\n *\n * @return A CSS custom var value if the incoming style value is a preset value.\n */\n\nexport function getCSSValueFromRawStyle< StyleValue = string >(\n\tstyleValue: StyleValue\n): StyleValue {\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 ) =>\n\t\t\t\tkebabCase( presetVariable, {\n\t\t\t\t\tsplitRegexp: [\n\t\t\t\t\t\t/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t\t\t\t/([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t\t\t\t],\n\t\t\t\t} )\n\t\t\t)\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })` as StyleValue;\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\n/**\n * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if\n * `decodeURI` throws an error.\n *\n * @param {string} uri URI to decode.\n *\n * @example\n * ```js\n * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'\n * ```\n *\n * @return {string} Decoded URI if possible.\n */\nexport function safeDecodeURI( uri: string ): string {\n\ttry {\n\t\treturn decodeURI( uri );\n\t} catch {\n\t\treturn uri;\n\t}\n}\n"],
5
+ "mappings": ";AAGA,SAAS,aAAa,iBAAiB;AAYvC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAUA,IAAM,sBAAsB,CAClC,QACA,SACI;AACJ,MAAI,QAAa;AACjB,OAAK,QAAS,CAAE,cAAuB;AACtC,YAAQ,QAAS,SAAU;AAAA,EAC5B,CAAE;AACF,SAAO;AACR;AAYO,SAAS,aACf,OACA,SACA,MACA,SACqB;AACrB,QAAM,aAAiC,oBAAqB,OAAO,IAAK;AAExE,SAAO,aACJ;AAAA,IACA;AAAA,MACC,UAAU,SAAS;AAAA,MACnB,KAAK;AAAA,MACL,OAAO,wBAAyB,UAAW;AAAA,IAC5C;AAAA,EACA,IACA,CAAC;AACL;AAaO,SAAS,iBACf,OACA,SACA,MACA,UACA,uBAAiC,CAAE,OAAO,SAAS,UAAU,MAAO,GAC/C;AACrB,QAAM,WAAqC;AAAA,IAC1C;AAAA,IACA;AAAA,EACD;AACA,MAAK,CAAE,UAAW;AACjB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,QAA4B,CAAC;AACnC,MAAK,OAAO,aAAa,UAAW;AACnC,UAAM,KAAM;AAAA,MACX,UAAU,SAAS;AAAA,MACnB,KAAK,SAAS;AAAA,MACd,OAAO,wBAAyB,QAAS;AAAA,IAC1C,CAAE;AAAA,EACH,OAAO;AACN,UAAM,YAAY,qBAAqB;AAAA,MACtC,CAAE,KAAyB,SAAkB;AAC5C,cAAM,QAAQ;AAAA,UACb,oBAAqB,UAAU,CAAE,IAAK,CAAE;AAAA,QACzC;AACA,YAAK,OAAQ;AACZ,cAAI,KAAM;AAAA,YACT,UAAU,SAAS;AAAA,YACnB,KAAK,UAAU,WAAW;AAAA,cACzB;AAAA,cACA,WAAY,IAAK;AAAA,YAClB;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AACA,eAAO;AAAA,MACR;AAAA,MACA,CAAC;AAAA,IACF;AACA,UAAM,KAAM,GAAG,SAAU;AAAA,EAC1B;AAEA,SAAO;AACR;AAiBO,SAAS,wBACf,YACa;AACb,MACC,OAAO,eAAe,YACtB,WAAW,WAAY,yBAA0B,GAChD;AACD,UAAM,WAAW,WACf,MAAO,0BAA0B,MAAO,EACxC,MAAO,uCAAwC,EAC/C;AAAA,MAAK,CAAE,mBACP,UAAW,gBAAgB;AAAA,QAC1B,aAAa;AAAA,UACZ;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,EACC,KAAM,mCAAoC;AAC5C,WAAO,aAAc,QAAS;AAAA,EAC/B;AACA,SAAO;AACR;AASO,SAAS,WAAY,QAAyB;AACpD,QAAM,CAAE,aAAa,GAAG,IAAK,IAAI;AACjC,SAAO,YAAY,YAAY,IAAI,KAAK,KAAM,EAAG;AAClD;AASO,SAAS,cAAe,SAA4B;AAC1D,QAAM,CAAE,WAAW,GAAG,IAAK,IAAI;AAC/B,SAAO,UAAU,YAAY,IAAI,KAAK,IAAK,UAAW,EAAE,KAAM,EAAG;AAClE;AAeO,SAAS,cAAe,KAAsB;AACpD,MAAI;AACH,WAAO,UAAW,GAAI;AAAA,EACvB,QAAQ;AACP,WAAO;AAAA,EACR;AACD;",
6
6
  "names": []
7
7
  }
package/build-types/styles/background/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/background/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;sBAKnC,KAAK,WAAW,YAAY;;AA8EhD,wBAME"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/background/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;sBAsCnC,KAAK,WAAW,YAAY;;AA8ChD,wBAME"}
package/build-types/types.d.ts CHANGED
@@ -24,6 +24,7 @@ export interface Style {
24
24
  backgroundPosition?: CSSProperties['backgroundPosition'];
25
25
  backgroundRepeat?: CSSProperties['backgroundRepeat'];
26
26
  backgroundSize?: CSSProperties['backgroundSize'];
27
+ gradient?: CSSProperties['backgroundImage'];
27
28
  };
28
29
  border?: {
29
30
  color?: CSSProperties['borderColor'];
package/build-types/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/style-engine",
3
- "version": "2.42.0",
3
+ "version": "2.43.1-next.v.202604091042.0+668146787",
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",
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
73
+ "gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
74
74
  }
package/src/class-wp-style-engine.php CHANGED
@@ -73,6 +73,18 @@ if ( ! class_exists( 'WP_Style_Engine' ) ) {
73
73
  ),
74
74
  'path' => array( 'background', 'backgroundAttachment' ),
75
75
  ),
76
+ 'gradient' => array(
77
+ 'property_keys' => array(
78
+ 'default' => 'background-image',
79
+ ),
80
+ 'css_vars' => array(
81
+ 'gradient' => '--wp--preset--gradient--$slug',
82
+ ),
83
+ 'path' => array( 'background', 'gradient' ),
84
+ 'classnames' => array(
85
+ 'has-background' => true,
86
+ ),
87
+ ),
76
88
  ),
77
89
  'color' => array(
78
90
  'text' => array(
@@ -455,6 +467,13 @@ if ( ! class_exists( 'WP_Style_Engine' ) ) {
455
467
 
456
468
  $css_declarations = static::get_css_declarations( $style_value, $style_definition, $options );
457
469
  if ( ! empty( $css_declarations ) ) {
470
+ /*
471
+ * Combine background gradient and background image into a single
472
+ * comma-separated background-image value, matching the JS style engine.
473
+ */
474
+ if ( isset( $css_declarations['background-image'] ) && isset( $parsed_styles['declarations']['background-image'] ) ) {
475
+ $css_declarations['background-image'] = $css_declarations['background-image'] . ', ' . $parsed_styles['declarations']['background-image'];
476
+ }
458
477
  $parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], $css_declarations );
459
478
  }
460
479
  }
package/src/styles/background/index.ts CHANGED
@@ -2,37 +2,38 @@
2
2
  * Internal dependencies
3
3
  */
4
4
  import type { Style, StyleOptions } from '../../types';
5
- import { generateRule, safeDecodeURI } from '../utils';
5
+ import { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from '../utils';
6
6
 
7
7
  const backgroundImage = {
8
8
  name: 'backgroundImage',
9
9
  generate: ( style: Style, options: StyleOptions ) => {
10
10
  const _backgroundImage = style?.background?.backgroundImage;
11
+ const gradient =
12
+ getCSSValueFromRawStyle( style?.background?.gradient ) || '';
11
13
 
12
- /*
13
- * The background image can be a string or an object.
14
- * If the background image is a string, it could already contain a url() function,
15
- * or have a linear-gradient value.
16
- */
17
- if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
18
- return [
19
- {
20
- selector: options.selector,
21
- key: 'backgroundImage',
22
- // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
23
- value: `url( '${ encodeURI(
24
- safeDecodeURI( _backgroundImage.url )
25
- ) }' )`,
26
- },
27
- ];
14
+ if ( ! _backgroundImage && ! gradient ) {
15
+ return [];
28
16
  }
29
17
 
30
- return generateRule(
31
- style,
32
- options,
33
- [ 'background', 'backgroundImage' ],
34
- 'backgroundImage'
35
- );
18
+ const backgroundImageValue =
19
+ typeof _backgroundImage === 'object' && _backgroundImage?.url
20
+ ? `url( '${ encodeURI(
21
+ safeDecodeURI( _backgroundImage.url )
22
+ ) }' )`
23
+ : getCSSValueFromRawStyle( _backgroundImage );
24
+ const cssValue = [ gradient, backgroundImageValue ]
25
+ .filter( Boolean )
26
+ .join( ', ' );
27
+
28
+ return !! cssValue
29
+ ? [
30
+ {
31
+ selector: options.selector,
32
+ key: 'backgroundImage',
33
+ value: cssValue,
34
+ },
35
+ ]
36
+ : [];
36
37
  },
37
38
  };
38
39
 
package/src/styles/utils.ts CHANGED
@@ -207,7 +207,7 @@ export function camelCaseJoin( strings: string[] ): string {
207
207
  export function safeDecodeURI( uri: string ): string {
208
208
  try {
209
209
  return decodeURI( uri );
210
- } catch ( uriError ) {
210
+ } catch {
211
211
  return uri;
212
212
  }
213
213
  }
package/src/test/index.js CHANGED
@@ -456,4 +456,72 @@ describe( 'getCSSRules', () => {
456
456
  },
457
457
  ] );
458
458
  } );
459
+
460
+ it( 'should comma-separate background gradient and background image into a single background-image value', () => {
461
+ expect(
462
+ getCSSRules(
463
+ {
464
+ background: {
465
+ backgroundImage: {
466
+ url: 'https://example.com/image.jpg',
467
+ },
468
+ gradient:
469
+ 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
470
+ },
471
+ },
472
+ {
473
+ selector: '.some-selector',
474
+ }
475
+ )
476
+ ).toEqual( [
477
+ {
478
+ selector: '.some-selector',
479
+ key: 'backgroundImage',
480
+ value: "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%), url( 'https://example.com/image.jpg' )",
481
+ },
482
+ ] );
483
+ } );
484
+
485
+ it( 'should output only gradient as background-image when no background image is set', () => {
486
+ expect(
487
+ getCSSRules(
488
+ {
489
+ background: {
490
+ gradient:
491
+ 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
492
+ },
493
+ },
494
+ {
495
+ selector: '.some-selector',
496
+ }
497
+ )
498
+ ).toEqual( [
499
+ {
500
+ selector: '.some-selector',
501
+ key: 'backgroundImage',
502
+ value: 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
503
+ },
504
+ ] );
505
+ } );
506
+
507
+ it( 'should resolve background gradient preset slug to CSS custom property', () => {
508
+ expect(
509
+ getCSSRules(
510
+ {
511
+ background: {
512
+ gradient: 'var:preset|gradient|vivid-cyan-blue',
513
+ },
514
+ },
515
+ {
516
+ selector: '.some-selector',
517
+ }
518
+ )
519
+ ).toEqual( [
520
+ {
521
+ selector: '.some-selector',
522
+ key: 'backgroundImage',
523
+ value: 'var(--wp--preset--gradient--vivid-cyan-blue)',
524
+ },
525
+ ] );
526
+ } );
459
527
  } );
package/src/types.ts CHANGED
@@ -28,6 +28,7 @@ export interface Style {
28
28
  backgroundPosition?: CSSProperties[ 'backgroundPosition' ];
29
29
  backgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];
30
30
  backgroundSize?: CSSProperties[ 'backgroundSize' ];
31
+ gradient?: CSSProperties[ 'backgroundImage' ];
31
32
  };
32
33
  border?: {
33
34
  color?: CSSProperties[ 'borderColor' ];