@wordpress/style-engine 0.5.1 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.8.0 (2022-05-18)
+
+## 0.7.0 (2022-05-04)
+
+## 0.6.0 (2022-04-21)
+
 ## 0.5.0 (2022-04-08)
 
 ## 0.4.0 (2022-03-23)

package/build/index.js

@@ -23,7 +23,16 @@ var _styles = require("./styles");
  * @return generated stylesheet.
  */
 function generate(style, options) {
-  const rules = getCSSRules(style, options);
+  const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
+
+  if (!(options !== null && options !== void 0 && options.selector)) {
+    const inlineRules = [];
+    rules.forEach(rule => {
+      inlineRules.push(`${(0, _lodash.kebabCase)(rule.key)}: ${rule.value};`);
+    });
+    return inlineRules.join(' ');
+  }
+
   const groupedRules = (0, _lodash.groupBy)(rules, 'selector');
   const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
     acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${(0, _lodash.kebabCase)(rule.key)}: ${rule.value};`).join(' ')} }`);
@@ -45,7 +54,9 @@ function getCSSRules(style, options) {
   const rules = [];
 
   _styles.styleDefinitions.forEach(definition => {
-    rules.push(...definition.generate(style, options));
+    if (typeof definition.generate === 'function') {
+      rules.push(...definition.generate(style, options));
+    }
   });
 
   return rules;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["generate","style","options","rules","getCSSRules","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","push","map","rule","key","value","join","styleDefinitions","forEach","definition"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,QAAT,CAAmBC,KAAnB,EAAiCC,OAAjC,EAAiE;AACvE,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB;AACA,QAAMG,YAAY,GAAG,qBAASF,KAAT,EAAgB,UAAhB,CAArB;AACA,QAAMG,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACE,IAAJ,CACE,GAAGD,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBE,GADqB,CAEnBC,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACC,GAAhB,CAAuB,KAAKD,IAAI,CAACE,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOP,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACW,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASb,WAAT,CACNH,KADM,EAENC,OAFM,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAe,2BAAiBC,OAAjB,CAA4BC,UAAF,IAAmC;AAC5DjB,IAAAA,KAAK,CAACS,IAAN,CAAY,GAAGQ,UAAU,CAACpB,QAAX,CAAqBC,KAArB,EAA4BC,OAA5B,CAAf;AACA,GAFD;;AAIA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function generate( style: Style, options: StyleOptions ): string {\n\tconst rules = getCSSRules( style, options );\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\trules.push( ...definition.generate( style, options ) );\n\t} );\n\n\treturn rules;\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["generate","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","map","styleDefinitions","definition"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,QAAT,CAAmBC,KAAnB,EAAiCC,OAAjC,EAAiE;AACvE,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CADuE,CAGvE;;AACA,MAAK,EAAEA,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEG,QAAX,CAAL,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAG,uBAAWD,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAG,qBAASV,KAAT,EAAgB,UAAhB,CAArB;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACT,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOM,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACF,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASR,WAAT,CACNH,KADM,EAENC,OAFM,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAkB,2BAAiBd,OAAjB,CAA4Be,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACtB,QAAlB,KAA+B,UAApC,EAAiD;AAChDG,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGa,UAAU,CAACtB,QAAX,CAAqBC,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function generate( style: Style, options: StyleOptions ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}

package/build/styles/color/background.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+/**
+ * Internal dependencies
+ */
+const background = {
+  name: 'background',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['color', 'background'], 'backgroundColor');
+  }
+};
+var _default = background;
+exports.default = _default;
+//# sourceMappingURL=background.js.map

package/build/styles/color/background.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/background.ts"],"names":["background","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,UAAU,GAAG;AAClBC,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,OAAF,EAAW,YAAX,CAHM,EAIN,iBAJM,CAAP;AAMA;AATiB,CAAnB;eAYeJ,U","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst background = {\n\tname: 'background',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'color', 'background' ],\n\t\t\t'backgroundColor'\n\t\t);\n\t},\n};\n\nexport default background;\n"]}

package/build/styles/color/gradient.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+/**
+ * Internal dependencies
+ */
+const gradient = {
+  name: 'gradient',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['color', 'gradient'], 'background');
+  }
+};
+var _default = gradient;
+exports.default = _default;
+//# sourceMappingURL=gradient.js.map

package/build/styles/color/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/gradient.ts"],"names":["gradient","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,OAAF,EAAW,UAAX,CAHM,EAIN,YAJM,CAAP;AAMA;AATe,CAAjB;eAYeJ,Q","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst gradient = {\n\tname: 'gradient',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'color', 'gradient' ],\n\t\t\t'background'\n\t\t);\n\t},\n};\n\nexport default gradient;\n"]}

package/build/styles/color/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _background = _interopRequireDefault(require("./background"));
+
+var _gradient = _interopRequireDefault(require("./gradient"));
+
+var _text = _interopRequireDefault(require("./text"));
+
+/**
+ * Internal dependencies
+ */
+var _default = [_text.default, _gradient.default, _background.default];
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/styles/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/index.ts"],"names":["text","gradient","background"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;eAKe,CAAEA,aAAF,EAAQC,iBAAR,EAAkBC,mBAAlB,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport background from './background';\nimport gradient from './gradient';\nimport text from './text';\n\nexport default [ text, gradient, background ];\n"]}

package/build/styles/color/text.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+/**
+ * Internal dependencies
+ */
+const text = {
+  name: 'text',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['color', 'text'], 'color');
+  }
+};
+var _default = text;
+exports.default = _default;
+//# sourceMappingURL=text.js.map

package/build/styles/color/text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/text.ts"],"names":["text","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG;AACZC,EAAAA,IAAI,EAAE,MADM;AAEZC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBAAcD,KAAd,EAAqBC,OAArB,EAA8B,CAAE,OAAF,EAAW,MAAX,CAA9B,EAAmD,OAAnD,CAAP;AACA;AAJW,CAAb;eAOeJ,I","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst text = {\n\tname: 'text',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule( style, options, [ 'color', 'text' ], 'color' );\n\t},\n};\n\nexport default text;\n"]}

package/build/styles/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIABLE_REFERENCE_PREFIX = exports.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = exports.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = void 0;
+const VARIABLE_REFERENCE_PREFIX = 'var:';
+exports.VARIABLE_REFERENCE_PREFIX = VARIABLE_REFERENCE_PREFIX;
+const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+exports.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE;
+const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+exports.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = VARIABLE_PATH_SEPARATOR_TOKEN_STYLE;
+//# sourceMappingURL=constants.js.map

package/build/styles/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/constants.ts"],"names":["VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE"],"mappings":";;;;;;AAAO,MAAMA,yBAAyB,GAAG,MAAlC;;AACA,MAAMC,uCAAuC,GAAG,GAAhD;;AACA,MAAMC,mCAAmC,GAAG,IAA5C","sourcesContent":["export const VARIABLE_REFERENCE_PREFIX = 'var:';\nexport const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';\nexport const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';\n"]}

package/build/styles/index.js

@@ -7,13 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styleDefinitions = void 0;
 
-var _padding = _interopRequireDefault(require("./padding"));
+var _color = _interopRequireDefault(require("./color"));
 
-var _margin = _interopRequireDefault(require("./margin"));
+var _spacing = _interopRequireDefault(require("./spacing"));
+
+var _typography = _interopRequireDefault(require("./typography"));
 
 /**
  * Internal dependencies
  */
-const styleDefinitions = [_margin.default, _padding.default];
+const styleDefinitions = [..._color.default, ..._spacing.default, ..._typography.default];
 exports.styleDefinitions = styleDefinitions;
 //# sourceMappingURL=index.js.map

package/build/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["styleDefinitions","margin","padding"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIO,MAAMA,gBAAgB,GAAG,CAAEC,eAAF,EAAUC,gBAAV,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport padding from './padding';\nimport margin from './margin';\n\nexport const styleDefinitions = [ margin, padding ];\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["styleDefinitions","color","spacing","typography"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAKO,MAAMA,gBAAgB,GAAG,CAAE,GAAGC,cAAL,EAAY,GAAGC,gBAAf,EAAwB,GAAGC,mBAA3B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport color from './color';\nimport spacing from './spacing';\nimport typography from './typography';\n\nexport const styleDefinitions = [ ...color, ...spacing, ...typography ];\n"]}

package/build/styles/spacing/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _padding = _interopRequireDefault(require("./padding"));
+
+var _margin = _interopRequireDefault(require("./margin"));
+
+/**
+ * Internal dependencies
+ */
+var _default = [_margin.default, _padding.default];
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/styles/spacing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/index.ts"],"names":["margin","padding"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;eAIe,CAAEA,eAAF,EAAUC,gBAAV,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport padding from './padding';\nimport margin from './margin';\n\nexport default [ margin, padding ];\n"]}

package/build/styles/{margin.js → spacing/margin.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _utils = require("./utils");
+var _utils = require("../utils");
 
 /**
  * Internal dependencies

package/build/styles/spacing/margin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/margin.ts"],"names":["margin","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,MAAM,GAAG;AACdC,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,SAAF,EAAa,QAAb,CAHM,EAIN,QAJM,CAAP;AAMA;AATa,CAAf;eAYeJ,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateBoxRules } from '../utils';\n\nconst margin = {\n\tname: 'margin',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'spacing', 'margin' ],\n\t\t\t'margin'\n\t\t);\n\t},\n};\n\nexport default margin;\n"]}

package/build/styles/{padding.js → spacing/padding.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _utils = require("./utils");
+var _utils = require("../utils");
 
 /**
  * Internal dependencies

package/build/styles/spacing/padding.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/padding.ts"],"names":["padding","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,OAAO,GAAG;AACfC,EAAAA,IAAI,EAAE,SADS;AAEfC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,SAAF,EAAa,SAAb,CAHM,EAIN,SAJM,CAAP;AAMA;AATc,CAAhB;eAYeJ,O","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateBoxRules } from '../utils';\n\nconst padding = {\n\tname: 'padding',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'spacing', 'padding' ],\n\t\t\t'padding'\n\t\t);\n\t},\n};\n\nexport default padding;\n"]}

package/build/styles/typography/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+/**
+ * Internal dependencies
+ */
+const fontSize = {
+  name: 'fontSize',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'fontSize'], 'fontSize');
+  }
+};
+const fontStyle = {
+  name: 'fontStyle',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'fontStyle'], 'fontStyle');
+  }
+};
+const fontWeight = {
+  name: 'fontWeight',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'fontWeight'], 'fontWeight');
+  }
+};
+const letterSpacing = {
+  name: 'letterSpacing',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'letterSpacing'], 'letterSpacing');
+  }
+};
+const lineHeight = {
+  name: 'letterSpacing',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'lineHeight'], 'lineHeight');
+  }
+};
+const textDecoration = {
+  name: 'textDecoration',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'textDecoration'], 'textDecoration');
+  }
+};
+const textTransform = {
+  name: 'textTransform',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'textTransform'], 'textTransform');
+  }
+};
+var _default = [fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/styles/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["fontSize","name","generate","style","options","fontStyle","fontWeight","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,UAAhB,CAHM,EAIN,UAJM,CAAP;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,WAAhB,CAHM,EAIN,WAJM,CAAP;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,YAAhB,CAHM,EAIN,YAJM,CAAP;AAMA;AATiB,CAAnB;AAYA,MAAMG,aAAa,GAAG;AACrBN,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,eAAhB,CAHM,EAIN,eAJM,CAAP;AAMA;AAToB,CAAtB;AAYA,MAAMI,UAAU,GAAG;AAClBP,EAAAA,IAAI,EAAE,eADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,YAAhB,CAHM,EAIN,YAJM,CAAP;AAMA;AATiB,CAAnB;AAYA,MAAMK,cAAc,GAAG;AACtBR,EAAAA,IAAI,EAAE,gBADgB;AAEtBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,gBAAhB,CAHM,EAIN,gBAJM,CAAP;AAMA;AATqB,CAAvB;AAYA,MAAMM,aAAa,GAAG;AACrBT,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,eAAhB,CAHM,EAIN,eAJM,CAAP;AAMA;AAToB,CAAtB;eAYe,CACdJ,QADc,EAEdK,SAFc,EAGdC,UAHc,EAIdC,aAJc,EAKdC,UALc,EAMdC,cANc,EAOdC,aAPc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst fontSize = {\n\tname: 'fontSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t'fontSize'\n\t\t);\n\t},\n};\n\nconst fontStyle = {\n\tname: 'fontStyle',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontStyle' ],\n\t\t\t'fontStyle'\n\t\t);\n\t},\n};\n\nconst fontWeight = {\n\tname: 'fontWeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontWeight' ],\n\t\t\t'fontWeight'\n\t\t);\n\t},\n};\n\nconst letterSpacing = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t'letterSpacing'\n\t\t);\n\t},\n};\n\nconst lineHeight = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t'lineHeight'\n\t\t);\n\t},\n};\n\nconst textDecoration = {\n\tname: 'textDecoration',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t'textDecoration'\n\t\t);\n\t},\n};\n\nconst textTransform = {\n\tname: 'textTransform',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t'textTransform'\n\t\t);\n\t},\n};\n\nexport default [\n\tfontSize,\n\tfontStyle,\n\tfontWeight,\n\tletterSpacing,\n\tlineHeight,\n\ttextDecoration,\n\ttextTransform,\n];\n"]}

package/build/styles/utils.js

@@ -4,12 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateBoxRules = generateBoxRules;
+exports.generateRule = generateRule;
+exports.getCSSVarFromStyleValue = getCSSVarFromStyleValue;
 
 var _lodash = require("lodash");
 
+var _constants = require("./constants");
+
 /**
  * External dependencies
  */
+
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ * @param  path    An array of strings representing the path to the style value in the style object.
+ * @param  ruleKey A CSS property key.
+ *
+ * @return GeneratedCSSRule[] CSS rules.
+ */
+function generateRule(style, options, path, ruleKey) {
+  const styleValue = (0, _lodash.get)(style, path);
+  return styleValue ? [{
+    selector: options === null || options === void 0 ? void 0 : options.selector,
+    key: ruleKey,
+    value: getCSSVarFromStyleValue(styleValue)
+  }] : [];
+}
+/**
+ * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ * @param  path    An array of strings representing the path to the style value in the style object.
+ * @param  ruleKey A CSS property key.
+ *
+ * @return GeneratedCSSRule[] CSS rules.
+ */
+
+
 function generateBoxRules(style, options, path, ruleKey) {
   const boxStyle = (0, _lodash.get)(style, path);
 
@@ -21,7 +56,7 @@ function generateBoxRules(style, options, path, ruleKey) {
 
   if (typeof boxStyle === 'string') {
     rules.push({
-      selector: options.selector,
+      selector: options === null || options === void 0 ? void 0 : options.selector,
       key: ruleKey,
       value: boxStyle
     });
@@ -31,7 +66,7 @@ function generateBoxRules(style, options, path, ruleKey) {
 
       if (value) {
         acc.push({
-          selector: options.selector,
+          selector: options === null || options === void 0 ? void 0 : options.selector,
           key: `${ruleKey}${(0, _lodash.upperFirst)(side)}`,
           value
         });
@@ -44,4 +79,21 @@ function generateBoxRules(style, options, path, ruleKey) {
 
   return rules;
 }
+/**
+ * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+ *
+ * @param  styleValue A raw style value.
+ *
+ * @return string A CSS var value.
+ */
+
+
+function getCSSVarFromStyleValue(styleValue) {
+  if (typeof styleValue === 'string' && styleValue.startsWith(_constants.VARIABLE_REFERENCE_PREFIX)) {
+    const variable = styleValue.slice(_constants.VARIABLE_REFERENCE_PREFIX.length).split(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
+    return `var(--wp--${variable})`;
+  }
+
+  return styleValue;
+}
 //# sourceMappingURL=utils.js.map

package/build/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateBoxRules","style","options","path","ruleKey","boxStyle","rules","push","selector","key","value","sideRules","reduce","acc","side"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAQO,SAASA,gBAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMC,QAAkC,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEE,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXC,MAAAA,QAAQ,EAAEN,OAAO,CAACM,QADP;AAEXC,MAAAA,GAAG,EAAEL,OAFM;AAGXM,MAAAA,KAAK,EAAEL;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMM,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,EAAqCC,MAArC,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMJ,KAAyB,GAAG,iBAAKL,QAAL,EAAe,CAAES,IAAF,CAAf,CAAlC;;AACA,UAAKJ,KAAL,EAAa;AACZG,QAAAA,GAAG,CAACN,IAAJ,CAAU;AACTC,UAAAA,QAAQ,EAAEN,OAAO,CAACM,QADT;AAETC,UAAAA,GAAG,EAAG,GAAGL,OAAS,GAAG,wBAAYU,IAAZ,CAAoB,EAFhC;AAGTJ,UAAAA;AAHS,SAAV;AAKA;;AACD,aAAOG,GAAP;AACA,KAXgB,EAYjB,EAZiB,CAAlB;AAcAP,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGI,SAAf;AACA;;AAED,SAAOL,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get, upperFirst } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';\n\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\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: ruleKey,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = [ 'top', 'right', 'bottom', 'left' ].reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = get( boxStyle, [ side ] );\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: `${ ruleKey }${ upperFirst( side ) }`,\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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","boxStyle","rules","push","sideRules","reduce","acc","side","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE"],"mappings":";;;;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKL;AACD,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;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;;;AACO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMO,QAAkC,GAAG,iBAAKV,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEQ,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXP,MAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEH,OAFM;AAGXI,MAAAA,KAAK,EAAEG;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMG,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,EAAqCC,MAArC,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMT,KAAyB,GAAG,iBAAKG,QAAL,EAAe,CAAEM,IAAF,CAAf,CAAlC;;AACA,UAAKT,KAAL,EAAa;AACZQ,QAAAA,GAAG,CAACH,IAAJ,CAAU;AACTP,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAG,GAAGH,OAAS,GAAG,wBAAYa,IAAZ,CAAoB,EAFhC;AAGTT,UAAAA;AAHS,SAAV;AAKA;;AACD,aAAOQ,GAAP;AACA,KAXgB,EAYjB,EAZiB,CAAlB;AAcAJ,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGC,SAAf;AACA;;AAED,SAAOF,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASH,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACa,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGf,UAAU,CACzBgB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,IAHe,CAGTC,8CAHS,CAAjB;AAIA,WAAQ,aAAaN,QAAU,GAA/B;AACA;;AACD,SAAOf,UAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get, upperFirst } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, Box, StyleOptions } 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  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\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: ruleKey,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = [ 'top', 'right', 'bottom', 'left' ].reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = get( boxStyle, [ side ] );\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: `${ ruleKey }${ upperFirst( side ) }`,\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"]}

package/build-module/index.js

@@ -17,7 +17,16 @@ import { styleDefinitions } from './styles';
  */
 
 export function generate(style, options) {
-  const rules = getCSSRules(style, options);
+  const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
+
+  if (!(options !== null && options !== void 0 && options.selector)) {
+    const inlineRules = [];
+    rules.forEach(rule => {
+      inlineRules.push(`${kebabCase(rule.key)}: ${rule.value};`);
+    });
+    return inlineRules.join(' ');
+  }
+
   const groupedRules = groupBy(rules, 'selector');
   const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
     acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${kebabCase(rule.key)}: ${rule.value};`).join(' ')} }`);
@@ -37,7 +46,9 @@ export function generate(style, options) {
 export function getCSSRules(style, options) {
   const rules = [];
   styleDefinitions.forEach(definition => {
-    rules.push(...definition.generate(style, options));
+    if (typeof definition.generate === 'function') {
+      rules.push(...definition.generate(style, options));
+    }
   });
   return rules;
 }

package/build-module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["groupBy","kebabCase","styleDefinitions","generate","style","options","rules","getCSSRules","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","push","map","rule","key","value","join","forEach","definition"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,SAAlB,QAAmC,QAAnC;AAEA;AACA;AACA;;AAOA,SAASC,gBAAT,QAAiC,UAAjC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,QAAT,CAAmBC,KAAnB,EAAiCC,OAAjC,EAAiE;AACvE,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB;AACA,QAAMG,YAAY,GAAGR,OAAO,CAAEM,KAAF,EAAS,UAAT,CAA5B;AACA,QAAMG,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACE,IAAJ,CACE,GAAGD,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBE,GADqB,CAEnBC,IAAF,IACE,GAAGhB,SAAS,CAAEgB,IAAI,CAACC,GAAP,CAAc,KAAKD,IAAI,CAACE,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOP,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACW,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASb,WAAT,CACNH,KADM,EAENC,OAFM,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;AACAJ,EAAAA,gBAAgB,CAACmB,OAAjB,CAA4BC,UAAF,IAAmC;AAC5DhB,IAAAA,KAAK,CAACS,IAAN,CAAY,GAAGO,UAAU,CAACnB,QAAX,CAAqBC,KAArB,EAA4BC,OAA5B,CAAf;AACA,GAFD;AAIA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function generate( style: Style, options: StyleOptions ): string {\n\tconst rules = getCSSRules( style, options );\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\trules.push( ...definition.generate( style, options ) );\n\t} );\n\n\treturn rules;\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["groupBy","kebabCase","styleDefinitions","generate","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","map","definition"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,SAAlB,QAAmC,QAAnC;AAEA;AACA;AACA;;AAOA,SAASC,gBAAT,QAAiC,UAAjC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,QAAT,CAAmBC,KAAnB,EAAiCC,OAAjC,EAAiE;AACvE,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CADuE,CAGvE;;AACA,MAAK,EAAEA,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEG,QAAX,CAAL,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAGX,SAAS,CAAEU,IAAI,CAACE,GAAP,CAAc,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAGhB,OAAO,CAAEM,KAAF,EAAS,UAAT,CAA5B;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACT,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAGV,SAAS,CAAEU,IAAI,CAACE,GAAP,CAAc,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOM,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACF,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASR,WAAT,CACNH,KADM,EAENC,OAFM,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;AACAJ,EAAAA,gBAAgB,CAACQ,OAAjB,CAA4Bc,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACrB,QAAlB,KAA+B,UAApC,EAAiD;AAChDG,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGY,UAAU,CAACrB,QAAX,CAAqBC,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function generate( style: Style, options: StyleOptions ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}

package/build-module/styles/color/background.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { generateRule } from '../utils';
+const background = {
+  name: 'background',
+  generate: (style, options) => {
+    return generateRule(style, options, ['color', 'background'], 'backgroundColor');
+  }
+};
+export default background;
+//# sourceMappingURL=background.js.map

package/build-module/styles/color/background.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/background.ts"],"names":["generateRule","background","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,UAAU,GAAG;AAClBC,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,OAAF,EAAW,YAAX,CAHkB,EAIlB,iBAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,eAAeJ,UAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst background = {\n\tname: 'background',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'color', 'background' ],\n\t\t\t'backgroundColor'\n\t\t);\n\t},\n};\n\nexport default background;\n"]}

package/build-module/styles/color/gradient.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { generateRule } from '../utils';
+const gradient = {
+  name: 'gradient',
+  generate: (style, options) => {
+    return generateRule(style, options, ['color', 'gradient'], 'background');
+  }
+};
+export default gradient;
+//# sourceMappingURL=gradient.js.map

package/build-module/styles/color/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/gradient.ts"],"names":["generateRule","gradient","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,OAAF,EAAW,UAAX,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATe,CAAjB;AAYA,eAAeJ,QAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst gradient = {\n\tname: 'gradient',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'color', 'gradient' ],\n\t\t\t'background'\n\t\t);\n\t},\n};\n\nexport default gradient;\n"]}

package/build-module/styles/color/index.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import background from './background';
+import gradient from './gradient';
+import text from './text';
+export default [text, gradient, background];
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/index.ts"],"names":["background","gradient","text"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,cAAvB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AAEA,eAAe,CAAEA,IAAF,EAAQD,QAAR,EAAkBD,UAAlB,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport background from './background';\nimport gradient from './gradient';\nimport text from './text';\n\nexport default [ text, gradient, background ];\n"]}

package/build-module/styles/color/text.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { generateRule } from '../utils';
+const text = {
+  name: 'text',
+  generate: (style, options) => {
+    return generateRule(style, options, ['color', 'text'], 'color');
+  }
+};
+export default text;
+//# sourceMappingURL=text.js.map

package/build-module/styles/color/text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/color/text.ts"],"names":["generateRule","text","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,IAAI,GAAG;AACZC,EAAAA,IAAI,EAAE,MADM;AAEZC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkB,CAAE,OAAF,EAAW,MAAX,CAAlB,EAAuC,OAAvC,CAAnB;AACA;AAJW,CAAb;AAOA,eAAeJ,IAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst text = {\n\tname: 'text',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule( style, options, [ 'color', 'text' ], 'color' );\n\t},\n};\n\nexport default text;\n"]}

package/build-module/styles/constants.js

@@ -0,0 +1,4 @@
+export const VARIABLE_REFERENCE_PREFIX = 'var:';
+export const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+export const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/constants.ts"],"names":["VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE"],"mappings":"AAAA,OAAO,MAAMA,yBAAyB,GAAG,MAAlC;AACP,OAAO,MAAMC,uCAAuC,GAAG,GAAhD;AACP,OAAO,MAAMC,mCAAmC,GAAG,IAA5C","sourcesContent":["export const VARIABLE_REFERENCE_PREFIX = 'var:';\nexport const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';\nexport const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';\n"]}

package/build-module/styles/index.js

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import padding from './padding';
-import margin from './margin';
-export const styleDefinitions = [margin, padding];
+import color from './color';
+import spacing from './spacing';
+import typography from './typography';
+export const styleDefinitions = [...color, ...spacing, ...typography];
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["padding","margin","styleDefinitions"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,WAApB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,OAAO,MAAMC,gBAAgB,GAAG,CAAED,MAAF,EAAUD,OAAV,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport padding from './padding';\nimport margin from './margin';\n\nexport const styleDefinitions = [ margin, padding ];\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["color","spacing","typography","styleDefinitions"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,KAAP,MAAkB,SAAlB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,OAAO,MAAMC,gBAAgB,GAAG,CAAE,GAAGH,KAAL,EAAY,GAAGC,OAAf,EAAwB,GAAGC,UAA3B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport color from './color';\nimport spacing from './spacing';\nimport typography from './typography';\n\nexport const styleDefinitions = [ ...color, ...spacing, ...typography ];\n"]}

package/build-module/styles/spacing/index.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import padding from './padding';
+import margin from './margin';
+export default [margin, padding];
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/index.ts"],"names":["padding","margin"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,WAApB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,eAAe,CAAEA,MAAF,EAAUD,OAAV,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport padding from './padding';\nimport margin from './margin';\n\nexport default [ margin, padding ];\n"]}

package/build-module/styles/{margin.js → spacing/margin.js}

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { generateBoxRules } from './utils';
+import { generateBoxRules } from '../utils';
 const margin = {
   name: 'margin',
   generate: (style, options) => {