@wordpress/style-engine 1.0.1 → 1.1.1-next.4d3b314fd5.0

package/build-module/styles/border/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["generateRule","generateBoxRules","upperFirst","color","name","generate","style","options","path","ruleKey","radius","default","individual","borderStyle","width","borderDefinitionsWithIndividualStyles","createBorderGenerateFunction","individualProperty","styleValue","border","reduce","acc","borderDefinition","key","hasOwnProperty","push","borderTop","borderRight","borderBottom","borderLeft"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport type {\n\tBorderIndividualStyles,\n\tBorderIndividualProperty,\n\tGeneratedCSSRule,\n\tStyle,\n\tStyleDefinition,\n\tStyleOptions,\n} from '../../types';\nimport { generateRule, generateBoxRules, upperFirst } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'color' ],\n\t\truleKey: string = 'borderColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst radius = {\n\tname: 'radius',\n\tgenerate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {\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 = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'style' ],\n\t\truleKey: string = 'borderStyle'\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[] = [ 'border', 'width' ],\n\t\truleKey: string = 'borderWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst borderDefinitionsWithIndividualStyles: StyleDefinition[] = [\n\tcolor,\n\tborderStyle,\n\twidth,\n];\n\n/**\n * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.\n *\n * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').\n *\n * @return StyleDefinition[ 'generate' ]\n */\nconst createBorderGenerateFunction =\n\t( individualProperty: BorderIndividualProperty ) =>\n\t( style: Style, options: StyleOptions ) => {\n\t\tconst styleValue:\n\t\t\t| BorderIndividualStyles< typeof individualProperty >\n\t\t\t| undefined = style?.border?.[ individualProperty ];\n\n\t\tif ( ! styleValue ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn borderDefinitionsWithIndividualStyles.reduce(\n\t\t\t(\n\t\t\t\tacc: GeneratedCSSRule[],\n\t\t\t\tborderDefinition: StyleDefinition\n\t\t\t): GeneratedCSSRule[] => {\n\t\t\t\tconst key = borderDefinition.name;\n\t\t\t\tif (\n\t\t\t\t\tstyleValue.hasOwnProperty( key ) &&\n\t\t\t\t\ttypeof borderDefinition.generate === 'function'\n\t\t\t\t) {\n\t\t\t\t\tconst ruleKey = `border${ upperFirst(\n\t\t\t\t\t\tindividualProperty\n\t\t\t\t\t) }${ upperFirst( key ) }`;\n\t\t\t\t\tacc.push(\n\t\t\t\t\t\t...borderDefinition.generate(\n\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\t[ 'border', individualProperty, key ],\n\t\t\t\t\t\t\truleKey\n\t\t\t\t\t\t)\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};\n\nconst borderTop = {\n\tname: 'borderTop',\n\tgenerate: createBorderGenerateFunction( 'top' ),\n};\n\nconst borderRight = {\n\tname: 'borderRight',\n\tgenerate: createBorderGenerateFunction( 'right' ),\n};\n\nconst borderBottom = {\n\tname: 'borderBottom',\n\tgenerate: createBorderGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft = {\n\tname: 'borderLeft',\n\tgenerate: createBorderGenerateFunction( 'left' ),\n};\n\nexport default [\n\t...borderDefinitionsWithIndividualStyles,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}
+{"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"]}

package/build-module/styles/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
+import { get, kebabCase } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -83,7 +83,7 @@ export function generateBoxRules(style, options, path, ruleKeys) {
 
 export function getCSSVarFromStyleValue(styleValue) {
   if (typeof styleValue === 'string' && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
-    const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
+    const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => kebabCase(presetVariable)).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
     return `var(--wp--${variable})`;
   }
 
@@ -92,13 +92,25 @@ export function getCSSVarFromStyleValue(styleValue) {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
  */
 
-export function upperFirst(_ref) {
-  let [firstLetter, ...rest] = _ref;
+export function upperFirst(string) {
+  const [firstLetter, ...rest] = string;
   return firstLetter.toUpperCase() + rest.join('');
 }
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
+ */
+
+export function camelCaseJoin(strings) {
+  const [firstItem, ...rest] = strings;
+  return firstItem.toLowerCase() + rest.map(upperFirst).join('');
+}
 //# sourceMappingURL=utils.js.map

package/build-module/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","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","join","firstLetter","rest","toUpperCase"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,QAApB;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,EAKL;AACD,QAAMC,UAA8B,GAAGT,GAAG,CAAEK,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,GAAGjB,GAAG,CAAEK,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,CACxDb,GAAG,CAAEiB,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,IAHe,CAGT9B,mCAHS,CAAjB;AAIA,WAAQ,aAAa0B,QAAU,GAA/B;AACA;;AACD,SAAOpB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASkB,UAAT,OAAwD;AAAA,MAAnC,CAAEO,WAAF,EAAe,GAAGC,IAAlB,CAAmC;AAC9D,SAAOD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACF,IAAL,CAAW,EAAX,CAAnC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } 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) {\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.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} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","kebabCase","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","map","presetVariable","join","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.map( ( presetVariable ) => kebabCase( presetVariable ) )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n"]}

package/build-types/styles/border/index.d.ts

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { GeneratedCSSRule, Style, StyleDefinition, StyleOptions } from '../../types';
-declare const _default: (StyleDefinition | {
-    name: string;
-    generate: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
-})[];
+import type { StyleDefinition } from '../../types';
+declare const _default: StyleDefinition[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/border/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAGX,gBAAgB,EAChB,KAAK,EACL,eAAe,EACf,YAAY,EACZ,MAAM,aAAa,CAAC;;;;;AA+HrB,wBAOE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAA6B,eAAe,EAAE,MAAM,aAAa,CAAC;;AAkF9E,wBASE"}

package/build-types/styles/color/background.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const background: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 };
 export default background;
 //# sourceMappingURL=background.d.ts.map

package/build-types/styles/color/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/styles/color/background.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,UAAU;;sBAEI,KAAK,WAAW,YAAY;;;;;CAQ/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/styles/color/background.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,UAAU;;sBAEI,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build-types/styles/color/gradient.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const gradient: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 };
 export default gradient;
 //# sourceMappingURL=gradient.d.ts.map

package/build-types/styles/color/gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/styles/color/gradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,QAAQ;;sBAEM,KAAK,WAAW,YAAY;;;;;CAQ/C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/styles/color/gradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,QAAQ;;sBAEM,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build-types/styles/color/index.d.ts

@@ -1,10 +1,6 @@
 declare const _default: {
     name: string;
-    generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => import("../../types").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/color/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/color/index.ts"],"names":[],"mappings":";;;;;;;;AAOA,wBAA8C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/color/index.ts"],"names":[],"mappings":";;;;AAOA,wBAA8C"}

package/build-types/styles/color/text.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const text: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 };
 export default text;
 //# sourceMappingURL=text.d.ts.map

package/build-types/styles/color/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/styles/color/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,IAAI;;sBAEU,KAAK,WAAW,YAAY;;;;;CAG/C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/styles/color/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,IAAI;;sBAEU,KAAK,WAAW,YAAY;CAG/C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build-types/styles/shadow/index.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/shadow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/shadow/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;;;;;AAUvD,wBAA0B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/shadow/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;AAUvD,wBAA0B"}

package/build-types/styles/typography/index.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/typography/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;;;;;AAmGvD,wBASE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/typography/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;AAmGvD,wBASE"}

package/build-types/styles/utils.d.ts

@@ -12,11 +12,7 @@ import type { CssRulesKeys, GeneratedCSSRule, Style, StyleOptions } from '../typ
  *
  * @return GeneratedCSSRule[] CSS rules.
  */
-export declare function generateRule(style: Style, options: StyleOptions, path: string[], ruleKey: string): {
-    selector: string | undefined;
-    key: string;
-    value: string;
-}[];
+export declare function generateRule(style: Style, options: StyleOptions, path: string[], ruleKey: string): GeneratedCSSRule[];
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
@@ -40,9 +36,17 @@ export declare function getCSSVarFromStyleValue(styleValue: string): string;
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
+ */
+export declare function upperFirst(string: string): string;
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
  */
-export declare function upperFirst([firstLetter, ...rest]: string): string;
+export declare function camelCaseJoin(strings: string[]): string;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/styles/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAqCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,CAAE,WAAW,EAAE,GAAG,IAAI,CAAE,EAAE,MAAM,UAE3D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM,GACb,gBAAgB,EAAE,CAYpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAqCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAapE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,CAGnD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAE,OAAO,EAAE,MAAM,EAAE,GAAI,MAAM,CAGzD"}

package/build-types/types.d.ts

@@ -2,19 +2,19 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-declare type BoxVariants = 'margin' | 'padding' | undefined;
-export declare type Box<T extends BoxVariants = undefined> = {
+declare type BoxVariant = 'margin' | 'padding';
+export interface Box<T extends BoxVariant | undefined = undefined> {
     top?: CSSProperties[T extends undefined ? 'top' : `${T}Top`];
     right?: CSSProperties[T extends undefined ? 'right' : `${T}Right`];
     bottom?: CSSProperties[T extends undefined ? 'bottom' : `${T}Bottom`];
     left?: CSSProperties[T extends undefined ? 'left' : `${T}Left`];
-};
-export declare type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
-export declare type BorderIndividualStyles<T extends BorderIndividualProperty> = {
-    color?: CSSProperties[`border${Capitalize<string & T>}Color`];
-    style?: CSSProperties[`border${Capitalize<string & T>}Style`];
-    width?: CSSProperties[`border${Capitalize<string & T>}Width`];
-};
+}
+export declare type BoxEdge = 'top' | 'right' | 'bottom' | 'left';
+export interface BorderIndividualStyles<T extends BoxEdge> {
+    color?: CSSProperties[`border${Capitalize<T>}Color`];
+    style?: CSSProperties[`border${Capitalize<T>}Style`];
+    width?: CSSProperties[`border${Capitalize<T>}Width`];
+}
 export interface Style {
     border?: {
         color?: CSSProperties['borderColor'];
@@ -58,17 +58,17 @@ export interface Style {
         };
     };
 }
-export declare type CssRulesKeys = {
+export interface CssRulesKeys {
     default: string;
     individual: string;
-};
-export declare type StyleOptions = {
+}
+export interface StyleOptions {
     /**
      * CSS selector for the generated style.
      */
     selector?: string;
-};
-export declare type GeneratedCSSRule = {
+}
+export interface GeneratedCSSRule {
     selector?: string;
     value: string;
     /**
@@ -76,10 +76,13 @@ export declare type GeneratedCSSRule = {
      * E.g. `paddingTop` instead of `padding-top`.
      */
     key: string;
-};
+}
+export interface GenerateFunction {
+    (style: Style, options: StyleOptions): GeneratedCSSRule[];
+}
 export interface StyleDefinition {
     name: string;
-    generate?: (style: Style, options: StyleOptions | {}, path?: string[], ruleKey?: string) => GeneratedCSSRule[];
+    generate?: GenerateFunction;
 }
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/class-wp-style-engine-css-declarations.php

@@ -12,7 +12,7 @@ if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
 }
 
 /**
- * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
  *
  * @access private
  */

package/class-wp-style-engine-css-rule.php

@@ -12,7 +12,7 @@ if ( class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
 }
 
 /**
- * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
  *
  * @access private
  */

package/class-wp-style-engine-css-rules-store.php

@@ -12,7 +12,7 @@ if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
 }
 
 /**
- * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
  *
  * @access private
  */

package/class-wp-style-engine-processor.php

@@ -85,7 +85,7 @@ class WP_Style_Engine_Processor {
 	 *     Optional. An array of options. Default empty array.
 	 *
 	 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
-	 *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
+	 *     @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
 	 * }
 	 *
 	 * @return string The computed CSS.

package/docs/toc.json

@@ -0,0 +1,8 @@
+[
+	{
+		"title": "@wordpress/style-engine Using the Style Engine to generate block supports styles",
+		"slug": "using-the-style-engine-with-block-supports",
+		"markdown_source": "../packages/style-engine/docs/using-the-style-engine-with-block-supports.md",
+		"parent": "packages-style-engine"
+	}
+]

package/docs/using-the-style-engine-with-block-supports.md

@@ -46,45 +46,105 @@ array(
 */
 ```
 
+## Use case
+When [registering a block support](https://developer.wordpress.org/reference/classes/wp_block_supports/register/), it is possible to pass an 'apply' callback in the block support config array to add or extend block support attributes with "class" or "style" properties.
+
+If a block has opted into the block support, the values of "class" and "style" will be applied to the block element's "class" and "style" attributes accordingly when rendered in the frontend HTML. Note, this applies only to server-side rendered blocks, for example, the [Site Title block](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#site-title).
+
+The callback receives `$block_type` and `$block_attributes` as arguments. The `style` attribute within `$block_attributes` only contains the raw style object, if any styles have been set for the block, and not any CSS or classnames to be applied to the block's HTML elements. 
+
+Here is where `wp_style_engine_get_styles` comes in handy: it will generate CSS and, if appropriate, classnames to be added to the "style" and "class" HTML attributes in the final rendered block markup.
+
+Here is a _very_ simplified version of how the [color block support](https://github.com/WordPress/gutenberg/tree/HEAD/lib/block-supports/color.php) works:
+
+```php
+function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
+	// Get the color styles from the style object.
+	$block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;
+
+	// Since we only want the color styles, pass the color styles only to the Style Engine.
+	$styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );
+
+	// Return the generated styles to be applied to the block's HTML element.
+	return array(
+		'style' => $styles['css'],
+		'class' => $styles['classnames']
+	);
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register(
+	'colors',
+	array(
+		'register_attribute' => 'gutenberg_register_colors_support',
+		'apply'              => 'gutenberg_apply_colors_support',
+	)
+);
+```
+
+It's important to note that, for now, the Style Engine will only generate styles for the following, core block supports:
+
+- border
+- color
+- spacing
+- typography
+
+In future releases, it will be possible to extend this list.
+
 ## Checking for block support and skip serialization
 
-Before passing the block style object to the Style Engine, it's important to take into account:
+Before passing the block style object to the Style Engine, you'll need to take into account:
 
 1. whether the theme has elected to support a particular block style, and
 2. whether a block has elected to "skip serialization" of that particular block style, that is, opt-out of automatic application of styles to the block's element (usually in order to do it via the block's internals). See the [block API documentation](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#block-supports-api) for further information.
 
 If a block either:
 
-- has no support for a specific style, or 
+- has no support for a style, or 
 - skips serialization of that style
 
-it's likely that you'll want to remove those style values from the style object.
-
-For example:
-
-```php
-// Check if a block has support using block_has_support (https://developer.wordpress.org/reference/functions/block_has_support/)
-$has_padding_support = block_has_support( $block_type, array( 'spacing', 'padding' ), false ); // Returns true.
-$has_margin_support  = block_has_support( $block_type, array( 'spacing', 'margin' ), false ); // Returns false.
-
-// Check skipping of serialization.
-$should_skip_padding = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' ); // Returns true.
-$should_skip_margin  = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' ); // Returns false.
+it's likely that you'll want to remove those style values from the style object before passing it to the Style Engine with help of two functions:
 
-// Now build the styles object.
-$spacing_block_styles            = array();
-$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_attributes['style'], array( 'spacing', 'padding' ), null ) : null;
-$spacing_block_styles['margin']  = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_attributes['style'], array( 'spacing', 'margin' ), null ) : null;
+- wp_should_skip_block_supports_serialization()
+- block_has_support()
 
-// Now get the styles.
-$styles = wp_style_engine_get_styles( array( 'spacing' => $spacing_block_styles ) );
+We can now update the apply callback code above so that we'll only return "style" and "class", where a block has support and it doesn't skip serialization:
 
-print_r( $styles );
-
-/*
-// Nothing, because there's no support for margin and the block skip's serialization for padding.
-array()
-*/
+```php
+function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
+	// The return value.
+	$attributes = array();
+    
+	// Return early if the block skips all serialization for block supports.
+	if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'color' ) ) {
+		return $attributes;
+	}
+
+	// Checks for support and skip serialization.
+	$has_text_support                        = block_has_support( $block_type, array( 'color', 'text' ), false ); 
+	$has_background_support                  = block_has_support( $block_type, array( 'color', 'background' ), false );
+	$skips_serialization_of_color_text       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ); 
+	$skips_serialization_of_color_background = wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ); 
+    
+	// Get the color styles from the style object.
+	$block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;
+
+	// The mutated styles object we're going to pass to wp_style_engine_get_styles().
+	$color_block_styles = array();
+
+	// Set the color style values according to whether the block has support and does not skip serialization.
+	$spacing_block_styles['text']       = $has_text_support && ! $skips_serialization_of_color_text ? _wp_array_get( $block_color_styles, array( 'text' ), null ) : null;
+	$spacing_block_styles['background'] = $has_background_support && ! $skips_serialization_of_color_background ? _wp_array_get( $block_color_styles, array( 'background' ), null ) : null;
+
+	// Pass the color styles, excluding those that have no support or skip serialization, to the Style Engine.
+	$styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );
+
+	// Return the generated styles to be applied to the block's HTML element.
+	return array(
+		'style' => $styles['css'],
+		'class' => $styles['classnames']
+	);
+}
 ```
 
 ## Generating classnames and CSS custom selectors from presets
@@ -110,8 +170,8 @@ $preset_font_size        = "var:preset|font-size|{$block_attributes['fontSize']}
 $preset_background_color = "var:preset|color|{$block_attributes['backgroundColor']}";
 
 $block_styles =  array(
-     'typography' => array( 'fontSize' => $preset_font_size ),
-     'color'      => array( 'background' => $preset_background_color )
+	'typography' => array( 'fontSize' => $preset_font_size ),
+	'color'      => array( 'background' => $preset_background_color )
 );
 
 $styles = wp_style_engine_get_styles(
@@ -131,12 +191,12 @@ If you don't want the Style Engine to output the CSS custom vars as well, which
 
 ```php
 $options = array(
-    // Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
-    'convert_vars_to_classnames' => 'true',
+	// Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
+	'convert_vars_to_classnames' => 'true',
 );
 $styles = wp_style_engine_get_styles(
-    $block_styles,
-    $options
+	$block_styles,
+	$options
 );
 print_r( $styles );