@wordpress/style-engine 0.10.0 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.13.0 (2022-07-27)
+
+## 0.12.0 (2022-07-13)
+
+## 0.11.0 (2022-06-29)
+
 ## 0.10.0 (2022-06-15)
 
 ## 0.9.0 (2022-06-01)

package/README.md

@@ -16,17 +16,49 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json.
 
-Currently it's not a package that generates a wp.styleEngine global because it's not ready yet, it's still a bundled package but ultimately, we want it to be so, once the roadmap is finished:
+Because this package is experimental and still in development it does not yet generate a `wp.styleEngine` global. To get there, the following tasks need to be completed:
 
 **TODO List:**
 
 -   Add style definitions for all the currently supported styles in blocks and theme.json.
--   the CSS variable shortcuts for values (for presets...)
+-   The CSS variable shortcuts for values (for presets...)
 -   Support generating styles in the frontend. (Ongoing)
 -   Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing)
 -   Refactor all block styles to use the style engine server side. (Ongoing)
+-   Consolidate global and block style rendering and enqueuing
 -   Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes).
 
+See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
+
+## Glossary
+
+A guide to the terms and variable names referenced by the Style Engine package.
+
+<dl>
+  <dt>Block style (Gutenberg internal)</dt>
+  <dd>An object comprising a block's style attribute that contains a block's style values. E.g., <code>{ spacing: { margin: '10px' }, color: { ... }, ...  }</code></dd>
+  <dt>Global styles (Gutenberg internal)</dt>
+  <dd>A merged block styles object containing values from a theme's theme.json and user styles settings.</dd>
+  <dt>CSS declaration or (CSS property declaration)</dt>
+  <dd>A CSS property paired with a CSS value. E.g., <code>color: pink</code> </dd>
+  <dt>CSS declarations block</dt>
+  <dd>A set of CSS declarations usually paired with a CSS selector to create a CSS rule.</dd>
+  <dt>CSS property</dt>
+  <dd>Identifiers that describe stylistic, modifiable features of an HTML element. E.g., <code>border</code>, <code>font-size</code>, <code>width</code>...</dd>
+  <dt>CSS rule</dt>
+  <dd>A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.</dd>
+  <dt>CSS selector</dt>
+   <dd>The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule&rsquo;s CSS definitions apply. E.g., <code>p.my-cool-classname > span</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS selectors article</a>.</dd>
+  <dt>CSS stylesheet</dt>
+  <dd>A collection of CSS rules contained within a file or within an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank">HTML style tag</a>.</dd>
+  <dt>CSS value</dt>
+  <dd>The value of a CSS property. The value determines how the property is modified. E.g., the <code>10vw</code> in <code>height: 10vw</code>.</dd>
+  <dt>CSS variables (vars) or CSS custom properties</dt>
+  <dd>Properties, whose values can be reused in other CSS declarations. Set using custom property notation (e.g., <code>--wp--preset--olive: #808000;</code>) and  accessed using the <code>var()</code> function (e.g., <code>color: var( --wp--preset--olive );</code>). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">MDN article on CSS custom properties</a>.</dd>
+  <dt>Inline styles</dt>
+  <dd>Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute</dd>
+</dl>
+
 ## Usage
 
 <!-- START TOKEN(Autogenerated API docs) -->

package/build/styles/border/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+/**
+ * Internal dependencies
+ */
+const color = {
+  name: 'color',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'color'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderColor';
+    return (0, _utils.generateRule)(style, options, path, ruleKey);
+  }
+};
+const radius = {
+  name: 'radius',
+  generate: (style, options) => {
+    return (0, _utils.generateBoxRules)(style, options, ['border', 'radius'], {
+      default: 'borderRadius',
+      individual: 'border%sRadius'
+    }, ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']);
+  }
+};
+const borderStyle = {
+  name: 'style',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'style'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderStyle';
+    return (0, _utils.generateRule)(style, options, path, ruleKey);
+  }
+};
+const width = {
+  name: 'width',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'width'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderWidth';
+    return (0, _utils.generateRule)(style, options, path, ruleKey);
+  }
+};
+const borderDefinitionsWithIndividualStyles = [color, borderStyle, width];
+/**
+ * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
+ *
+ * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
+ *
+ * @return StyleDefinition[ 'generate' ]
+ */
+
+const createBorderGenerateFunction = individualProperty => (style, options) => {
+  var _style$border;
+
+  const styleValue = style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border[individualProperty];
+
+  if (!styleValue) {
+    return [];
+  }
+
+  return borderDefinitionsWithIndividualStyles.reduce((acc, borderDefinition) => {
+    const key = borderDefinition.name;
+
+    if (styleValue.hasOwnProperty(key) && typeof borderDefinition.generate === 'function') {
+      const ruleKey = `border${(0, _utils.upperFirst)(individualProperty)}${(0, _utils.upperFirst)(key)}`;
+      acc.push(...borderDefinition.generate(style, options, ['border', individualProperty, key], ruleKey));
+    }
+
+    return acc;
+  }, []);
+};
+
+const borderTop = {
+  name: 'borderTop',
+  generate: createBorderGenerateFunction('top')
+};
+const borderRight = {
+  name: 'borderRight',
+  generate: createBorderGenerateFunction('right')
+};
+const borderBottom = {
+  name: 'borderBottom',
+  generate: createBorderGenerateFunction('bottom')
+};
+const borderLeft = {
+  name: 'borderLeft',
+  generate: createBorderGenerateFunction('left')
+};
+var _default = [...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft];
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["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"]}

package/build/styles/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styleDefinitions = void 0;
 
+var _border = _interopRequireDefault(require("./border"));
+
 var _color = _interopRequireDefault(require("./color"));
 
 var _spacing = _interopRequireDefault(require("./spacing"));
@@ -16,6 +18,6 @@ var _typography = _interopRequireDefault(require("./typography"));
 /**
  * Internal dependencies
  */
-const styleDefinitions = [..._color.default, ..._spacing.default, ..._typography.default];
+const styleDefinitions = [..._border.default, ..._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","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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["styleDefinitions","border","color","spacing","typography"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAMO,MAAMA,gBAAgB,GAAG,CAC/B,GAAGC,eAD4B,EAE/B,GAAGC,cAF4B,EAG/B,GAAGC,gBAH4B,EAI/B,GAAGC,mBAJ4B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport border from './border';\nimport color from './color';\nimport spacing from './spacing';\nimport typography from './typography';\n\nexport const styleDefinitions = [\n\t...border,\n\t...color,\n\t...spacing,\n\t...typography,\n];\n"]}

package/build/styles/spacing/margin.js

@@ -13,7 +13,10 @@ var _utils = require("../utils");
 const margin = {
   name: 'margin',
   generate: (style, options) => {
-    return (0, _utils.generateBoxRules)(style, options, ['spacing', 'margin'], 'margin');
+    return (0, _utils.generateBoxRules)(style, options, ['spacing', 'margin'], {
+      default: 'margin',
+      individual: 'margin%s'
+    });
   }
 };
 var _default = margin;

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

@@ -1 +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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/margin.ts"],"names":["margin","name","generate","style","options","default","individual"],"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,6BAAkBD,KAAlB,EAAyBC,OAAzB,EAAkC,CAAE,SAAF,EAAa,QAAb,CAAlC,EAA2D;AACjEC,MAAAA,OAAO,EAAE,QADwD;AAEjEC,MAAAA,UAAU,EAAE;AAFqD,KAA3D,CAAP;AAIA;AAPa,CAAf;eAUeN,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( style, options, [ 'spacing', 'margin' ], {\n\t\t\tdefault: 'margin',\n\t\t\tindividual: 'margin%s',\n\t\t} );\n\t},\n};\n\nexport default margin;\n"]}

package/build/styles/spacing/padding.js

@@ -13,7 +13,10 @@ var _utils = require("../utils");
 const padding = {
   name: 'padding',
   generate: (style, options) => {
-    return (0, _utils.generateBoxRules)(style, options, ['spacing', 'padding'], 'padding');
+    return (0, _utils.generateBoxRules)(style, options, ['spacing', 'padding'], {
+      default: 'padding',
+      individual: 'padding%s'
+    });
   }
 };
 var _default = padding;

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

@@ -1 +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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/padding.ts"],"names":["padding","name","generate","style","options","default","individual"],"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,6BAAkBD,KAAlB,EAAyBC,OAAzB,EAAkC,CAAE,SAAF,EAAa,SAAb,CAAlC,EAA4D;AAClEC,MAAAA,OAAO,EAAE,SADyD;AAElEC,MAAAA,UAAU,EAAE;AAFsD,KAA5D,CAAP;AAIA;AAPc,CAAhB;eAUeN,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( style, options, [ 'spacing', 'padding' ], {\n\t\t\tdefault: 'padding',\n\t\t\tindividual: 'padding%s',\n\t\t} );\n\t},\n};\n\nexport default padding;\n"]}

package/build/styles/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.generateBoxRules = generateBoxRules;
 exports.generateRule = generateRule;
 exports.getCSSVarFromStyleValue = getCSSVarFromStyleValue;
+exports.upperFirst = upperFirst;
 
 var _lodash = require("lodash");
 
@@ -36,16 +37,18 @@ function generateRule(style, options, path, ruleKey) {
 /**
  * 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.
+ * @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 ruleKeys             An array of CSS property keys and patterns.
+ * @param individualProperties The "sides" or individual properties for which to generate rules.
  *
- * @return GeneratedCSSRule[] CSS rules.
+ * @return GeneratedCSSRule[]  CSS rules.
  */
 
 
-function generateBoxRules(style, options, path, ruleKey) {
+function generateBoxRules(style, options, path, ruleKeys) {
+  let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
   const boxStyle = (0, _lodash.get)(style, path);
 
   if (!boxStyle) {
@@ -57,17 +60,17 @@ function generateBoxRules(style, options, path, ruleKey) {
   if (typeof boxStyle === 'string') {
     rules.push({
       selector: options === null || options === void 0 ? void 0 : options.selector,
-      key: ruleKey,
+      key: ruleKeys.default,
       value: boxStyle
     });
   } else {
-    const sideRules = ['top', 'right', 'bottom', 'left'].reduce((acc, side) => {
-      const value = (0, _lodash.get)(boxStyle, [side]);
+    const sideRules = individualProperties.reduce((acc, side) => {
+      const value = getCSSVarFromStyleValue((0, _lodash.get)(boxStyle, [side]));
 
       if (value) {
         acc.push({
           selector: options === null || options === void 0 ? void 0 : options.selector,
-          key: `${ruleKey}${(0, _lodash.upperFirst)(side)}`,
+          key: ruleKeys === null || ruleKeys === void 0 ? void 0 : ruleKeys.individual.replace('%s', upperFirst(side)),
           value
         });
       }
@@ -96,4 +99,17 @@ function getCSSVarFromStyleValue(styleValue) {
 
   return styleValue;
 }
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return string A CSS var value.
+ */
+
+
+function upperFirst(_ref) {
+  let [firstLetter, ...rest] = _ref;
+  return firstLetter.toUpperCase() + rest.join('');
+}
 //# sourceMappingURL=utils.js.map

package/build/styles/utils.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","firstLetter","rest","toUpperCase"],"mappings":";;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,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;AACA;;;AACO,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,GAAG,iBAAKZ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEU,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXT,MAAAA,QAAQ,EAAEJ,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,CACxD,iBAAKI,QAAL,EAAe,CAAEO,IAAF,CAAf,CADwD,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;;;AACO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGrB,UAAU,CACzBsB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,IAHe,CAGTC,8CAHS,CAAjB;AAIA,WAAQ,aAAaN,QAAU,GAA/B;AACA;;AACD,SAAOrB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkB,UAAT,OAAwD;AAAA,MAAnC,CAAEU,WAAF,EAAe,GAAGC,IAAlB,CAAmC;AAC9D,SAAOD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACH,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"]}

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

@@ -0,0 +1,85 @@
+/**
+ * Internal dependencies
+ */
+import { generateRule, generateBoxRules, upperFirst } from '../utils';
+const color = {
+  name: 'color',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'color'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderColor';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+const radius = {
+  name: 'radius',
+  generate: (style, options) => {
+    return generateBoxRules(style, options, ['border', 'radius'], {
+      default: 'borderRadius',
+      individual: 'border%sRadius'
+    }, ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']);
+  }
+};
+const borderStyle = {
+  name: 'style',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'style'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderStyle';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+const width = {
+  name: 'width',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'width'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderWidth';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+const borderDefinitionsWithIndividualStyles = [color, borderStyle, width];
+/**
+ * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
+ *
+ * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
+ *
+ * @return StyleDefinition[ 'generate' ]
+ */
+
+const createBorderGenerateFunction = individualProperty => (style, options) => {
+  var _style$border;
+
+  const styleValue = style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border[individualProperty];
+
+  if (!styleValue) {
+    return [];
+  }
+
+  return borderDefinitionsWithIndividualStyles.reduce((acc, borderDefinition) => {
+    const key = borderDefinition.name;
+
+    if (styleValue.hasOwnProperty(key) && typeof borderDefinition.generate === 'function') {
+      const ruleKey = `border${upperFirst(individualProperty)}${upperFirst(key)}`;
+      acc.push(...borderDefinition.generate(style, options, ['border', individualProperty, key], ruleKey));
+    }
+
+    return acc;
+  }, []);
+};
+
+const borderTop = {
+  name: 'borderTop',
+  generate: createBorderGenerateFunction('top')
+};
+const borderRight = {
+  name: 'borderRight',
+  generate: createBorderGenerateFunction('right')
+};
+const borderBottom = {
+  name: 'borderBottom',
+  generate: createBorderGenerateFunction('bottom')
+};
+const borderLeft = {
+  name: 'borderLeft',
+  generate: createBorderGenerateFunction('left')
+};
+export default [...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft];
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

package/build-module/styles/index.js

@@ -1,8 +1,9 @@
 /**
  * Internal dependencies
  */
+import border from './border';
 import color from './color';
 import spacing from './spacing';
 import typography from './typography';
-export const styleDefinitions = [...color, ...spacing, ...typography];
+export const styleDefinitions = [...border, ...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":["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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["border","color","spacing","typography","styleDefinitions"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,OAAO,MAAMC,gBAAgB,GAAG,CAC/B,GAAGJ,MAD4B,EAE/B,GAAGC,KAF4B,EAG/B,GAAGC,OAH4B,EAI/B,GAAGC,UAJ4B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport border from './border';\nimport color from './color';\nimport spacing from './spacing';\nimport typography from './typography';\n\nexport const styleDefinitions = [\n\t...border,\n\t...color,\n\t...spacing,\n\t...typography,\n];\n"]}

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

@@ -5,7 +5,10 @@ import { generateBoxRules } from '../utils';
 const margin = {
   name: 'margin',
   generate: (style, options) => {
-    return generateBoxRules(style, options, ['spacing', 'margin'], 'margin');
+    return generateBoxRules(style, options, ['spacing', 'margin'], {
+      default: 'margin',
+      individual: 'margin%s'
+    });
   }
 };
 export default margin;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/margin.ts"],"names":["generateBoxRules","margin","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,gBAAT,QAAiC,UAAjC;AAEA,MAAMC,MAAM,GAAG;AACdC,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,gBAAgB,CACtBI,KADsB,EAEtBC,OAFsB,EAGtB,CAAE,SAAF,EAAa,QAAb,CAHsB,EAItB,QAJsB,CAAvB;AAMA;AATa,CAAf;AAYA,eAAeJ,MAAf","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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/margin.ts"],"names":["generateBoxRules","margin","name","generate","style","options","default","individual"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,gBAAT,QAAiC,UAAjC;AAEA,MAAMC,MAAM,GAAG;AACdC,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,gBAAgB,CAAEI,KAAF,EAASC,OAAT,EAAkB,CAAE,SAAF,EAAa,QAAb,CAAlB,EAA2C;AACjEC,MAAAA,OAAO,EAAE,QADwD;AAEjEC,MAAAA,UAAU,EAAE;AAFqD,KAA3C,CAAvB;AAIA;AAPa,CAAf;AAUA,eAAeN,MAAf","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( style, options, [ 'spacing', 'margin' ], {\n\t\t\tdefault: 'margin',\n\t\t\tindividual: 'margin%s',\n\t\t} );\n\t},\n};\n\nexport default margin;\n"]}

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

@@ -5,7 +5,10 @@ import { generateBoxRules } from '../utils';
 const padding = {
   name: 'padding',
   generate: (style, options) => {
-    return generateBoxRules(style, options, ['spacing', 'padding'], 'padding');
+    return generateBoxRules(style, options, ['spacing', 'padding'], {
+      default: 'padding',
+      individual: 'padding%s'
+    });
   }
 };
 export default padding;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/padding.ts"],"names":["generateBoxRules","padding","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,gBAAT,QAAiC,UAAjC;AAEA,MAAMC,OAAO,GAAG;AACfC,EAAAA,IAAI,EAAE,SADS;AAEfC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,gBAAgB,CACtBI,KADsB,EAEtBC,OAFsB,EAGtB,CAAE,SAAF,EAAa,SAAb,CAHsB,EAItB,SAJsB,CAAvB;AAMA;AATc,CAAhB;AAYA,eAAeJ,OAAf","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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/spacing/padding.ts"],"names":["generateBoxRules","padding","name","generate","style","options","default","individual"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,gBAAT,QAAiC,UAAjC;AAEA,MAAMC,OAAO,GAAG;AACfC,EAAAA,IAAI,EAAE,SADS;AAEfC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,gBAAgB,CAAEI,KAAF,EAASC,OAAT,EAAkB,CAAE,SAAF,EAAa,SAAb,CAAlB,EAA4C;AAClEC,MAAAA,OAAO,EAAE,SADyD;AAElEC,MAAAA,UAAU,EAAE;AAFsD,KAA5C,CAAvB;AAIA;AAPc,CAAhB;AAUA,eAAeN,OAAf","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( style, options, [ 'spacing', 'padding' ], {\n\t\t\tdefault: 'padding',\n\t\t\tindividual: 'padding%s',\n\t\t} );\n\t},\n};\n\nexport default padding;\n"]}

package/build-module/styles/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, upperFirst } from 'lodash';
+import { get } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -29,15 +29,17 @@ export function generateRule(style, options, path, ruleKey) {
 /**
  * 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.
+ * @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 ruleKeys             An array of CSS property keys and patterns.
+ * @param individualProperties The "sides" or individual properties for which to generate rules.
  *
- * @return GeneratedCSSRule[] CSS rules.
+ * @return GeneratedCSSRule[]  CSS rules.
  */
 
-export function generateBoxRules(style, options, path, ruleKey) {
+export function generateBoxRules(style, options, path, ruleKeys) {
+  let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
   const boxStyle = get(style, path);
 
   if (!boxStyle) {
@@ -49,17 +51,17 @@ export function generateBoxRules(style, options, path, ruleKey) {
   if (typeof boxStyle === 'string') {
     rules.push({
       selector: options === null || options === void 0 ? void 0 : options.selector,
-      key: ruleKey,
+      key: ruleKeys.default,
       value: boxStyle
     });
   } else {
-    const sideRules = ['top', 'right', 'bottom', 'left'].reduce((acc, side) => {
-      const value = get(boxStyle, [side]);
+    const sideRules = individualProperties.reduce((acc, side) => {
+      const value = getCSSVarFromStyleValue(get(boxStyle, [side]));
 
       if (value) {
         acc.push({
           selector: options === null || options === void 0 ? void 0 : options.selector,
-          key: `${ruleKey}${upperFirst(side)}`,
+          key: ruleKeys === null || ruleKeys === void 0 ? void 0 : ruleKeys.individual.replace('%s', upperFirst(side)),
           value
         });
       }
@@ -87,4 +89,16 @@ export function getCSSVarFromStyleValue(styleValue) {
 
   return styleValue;
 }
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return string A CSS var value.
+ */
+
+export function upperFirst(_ref) {
+  let [firstLetter, ...rest] = _ref;
+  return firstLetter.toUpperCase() + rest.join('');
+}
 //# sourceMappingURL=utils.js.map