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

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.1.0 (2022-09-21)
+
 ### Enhancement
 -   Allow for prettified output ([#42909](https://github.com/WordPress/gutenberg/pull/42909)).
 -   Enqueue block supports styles in Gutenberg ([#42880](https://github.com/WordPress/gutenberg/pull/42880)).

package/README.md

@@ -4,7 +4,7 @@ The Style Engine aims to provide a consistent API for rendering styling for bloc
 
 Initially, it will offer a single, centralized agent responsible for generating block styles, and, in later phases, it will also assume the responsibility of processing and rendering optimized frontend CSS.
 
-## Important
+## Please note
 
 This package is new as of WordPress 6.1 and therefore in its infancy.
 
@@ -23,23 +23,17 @@ For more information about the roadmap, please refer to [Block editor styles: in
 
 ### wp_style_engine_get_styles()
 
-Global public function to generate styles from a single style object, e.g., the value of
-a [block's attributes.style object](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#styles)
-or
-the [top level styles in theme.json](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/).
+Global public function to generate styles from a single style object, e.g., the value of a [block's attributes.style object](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#styles) or the [top level styles in theme.json](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/).
 
-See also [Using the Style Engine to generate block supports styles](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/using-the-style-engine-with-block-supports).
+See also [Using the Style Engine to generate block supports styles](https://github.com/WordPress/gutenberg/tree/HEAD/packages/style-engine/docs/using-the-style-engine-with-block-supports.md).
 
 _Parameters_
 
 -   _$block_styles_ `array` A block's `attributes.style` object or the top level styles in theme.json
 -   _$options_ `array<string|boolean>` An array of options to determine the output.
-    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
-        global-styles'. Default is 'block-supports'. When both `context` and `selector` are set, the style engine will store the CSS rules using the `context` as a key.
-    -   _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* )
-        values. Default is `false`.
-    -   _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`,
-        otherwise a concatenated string of properties and values.
+    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'. When both `context` and `selector` are set, the Style Engine will store the CSS rules using the `context` as a key.
+    -   _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* ) values. Default is `false`.
+    -   _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
 
 _Returns_
 `array<string|array>|null`
@@ -57,19 +51,25 @@ It will return compiled CSS declarations for inline styles, or, where a selector
 To enqueue a style for rendering in the site's frontend, the `$options` array requires the following:
 
 1.  **selector (string)** - this is the CSS selector for your block style CSS declarations.
-2.  **context (string)** - this tells the style engine where to store the styles. Styles in the same context will be
-    stored together.
+2.  **context (string)** - this tells the Style Engine where to store the styles. Styles in the same context will be stored together.
 
 `wp_style_engine_get_styles` will return the compiled CSS and CSS declarations array.
 
 #### Usage
 
+As mentioned, `wp_style_engine_get_styles()` is useful whenever you wish to generate CSS and/or classnames from a **block's style object**. A good example is [using the Style Engine to generate block supports styles](https://github.com/WordPress/gutenberg/tree/HEAD/packages/style-engine/docs/using-the-style-engine-with-block-supports.md).
+
+In the following snippet, we're taking the style object from a block's attributes and passing it to the Style Engine to get the styles. By passing a `context` in the options, the Style Engine will store the styles for later retrieval, for example, should you wish to batch enqueue a set of CSS rules.
+
 ```php
-$block_styles =  array(
-     'spacing' => array( 'padding' => '100px' )
+$block_attributes =  array(
+     'style' => array(
+        'spacing' => array( 'padding' => '100px' ),
+     ),
 );
+
 $styles = wp_style_engine_get_styles(
-    $block_styles,
+    $block_attributes['style'],
     array(
         'selector' => '.a-selector',
         'context'  => 'block-supports',
@@ -79,46 +79,53 @@ print_r( $styles );
 
 /*
 array(
-    'css'                 => '.a-selector{padding:100px}'
-    'declarations'  => array( 'padding' => '100px' )
+    'css'          => '.a-selector{padding:100px}'
+    'declarations' => array( 'padding' => '100px' )
 )
 */
 ```
 
 ### wp_style_engine_get_stylesheet_from_css_rules()
 
-Use this function to compile and return a stylesheet for any CSS rules. The style engine will automatically merge declarations and combine selectors.
+Use this function to compile and return a stylesheet for any CSS rules. The Style Engine will automatically merge declarations and combine selectors.
 
-This function acts as a CSS compiler, but will also enqueue styles for rendering where `enqueue` and `context` strings are passed in the options.
+This function acts as a CSS compiler, but will also register the styles in a store where a `context` string is passed in the options.
 
 _Parameters_
 
 -   _$css_rules_ `array<array>`
--   _$options_ `array<string|boolean>` An array of options to determine the output.
-    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
-        global-styles'. When set, the style engine will store the CSS rules using the `context` value as a key.
+-   _$options_ `array<string|bool>` An array of options to determine the output.
+    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'. When set, the Style Engine will attempt to store the CSS rules.
+    -   _prettify_ `bool` Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
+    -   _optimize_ `bool` Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
 
 _Returns_
 `string` A compiled CSS string based on `$css_rules`.
 
 #### Usage
 
+Useful for when you wish to compile a bespoke set of CSS rules from a series of selector + declaration items.
+
+The Style Engine will return a sanitized and optimized stylesheet. By passing a `context` identifier in the options, the Style Engine will store the styles for later retrieval, for example, should you wish to batch enqueue a set of CSS rules.
+
+You can call `wp_style_engine_get_stylesheet_from_css_rules()` multiple times, and, so long as your styles use the same `context` identifier, they will be stored together.
+
 ```php
 $styles = array(
     array(
-        'selector'.       => '.wp-pumpkin',
+        'selector'     => '.wp-pumpkin',
         'declarations' => array( 'color' => 'orange' )
     ),
     array(
-        'selector'.       => '.wp-tomato',
+        'selector'     => '.wp-tomato',
         'declarations' => array( 'color' => 'red' )
     ),
     array(
-        'selector'.       => '.wp-tomato',
+        'selector'     => '.wp-tomato',
         'declarations' => array( 'padding' => '100px' )
     ),
     array(
-        'selector'.       => '.wp-kumquat',
+        'selector'     => '.wp-kumquat',
         'declarations' => array( 'color' => 'orange' )
     ),
 );
@@ -126,7 +133,7 @@ $styles = array(
 $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
     $styles,
     array(
-        'context'  => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
+        'context' => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
     )
 );
 print_r( $stylesheet ); // .wp-pumpkin,.wp-kumquat{color:orange}.wp-tomato{color:red;padding:100px}
@@ -139,34 +146,40 @@ Returns compiled CSS from a stored context, if found.
 _Parameters_
 
 -   _$store_name_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
+-   _$options_ `array<bool>` An array of options to determine the output.
+    -   _prettify_ `bool` Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
+    -   _optimize_ `bool` Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
 
 _Returns_
 `string` A compiled CSS string from the stored CSS rules.
 
 #### Usage
 
-A use case would be to fetch the stylesheet, which contains all the compiled CSS rules from the store, and enqueue it for rendering on the frontend.
+Use this function to generate a stylesheet using all the styles stored under a specific context identifier.
+
+A use case would be when you wish to enqueue all stored styles for rendering to the frontend. The Style Engine will merge and deduplicate styles upon retrieval.
 
 ```php
-// First register some styles.
+// First, let's gather and register our styles.
 $styles = array(
     array(
-        'selector'.       => '.wp-apple',
+        'selector'     => '.wp-apple',
         'declarations' => array( 'color' => 'green' )
     ),
 );
 
-$stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+wp_style_engine_get_stylesheet_from_css_rules(
     $styles,
     array(
-        'context'  => 'fruit-styles',
-        'enqueue'  => true,
+        'context' => 'fruit-styles',
     )
 );
 
-// Later, fetch compiled rules from context store.
-$stylesheet = gutenberg_style_engine_get_stylesheet_from_context( 'fruit-styles' );
+// Later, we fetch compiled rules from context store.
+$stylesheet = wp_style_engine_get_stylesheet_from_context( 'fruit-styles' );
+
 print_r( $stylesheet ); // .wp-apple{color:green;}
+
 if ( ! empty( $stylesheet ) ) {
     wp_register_style( 'my-stylesheet', false, array(), true, true );
     wp_add_inline_style( 'my-stylesheet', $stylesheet );
@@ -242,7 +255,7 @@ A guide to the terms and variable names referenced by the Style Engine package.
   <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 (or CSS class 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>. A CSS selector matches HTML elements based on the contents of the "class" attribute. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS selectors article</a>.</dd>
+  <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>. A CSS selector matches HTML elements based on the contents of the "class" attribute. 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>

package/build/styles/border/index.js

@@ -10,13 +10,38 @@ var _utils = require("../utils");
 /**
  * Internal dependencies
  */
+
+/**
+ * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
+ *
+ * @param path An array of strings representing the path to the style value in the style object.
+ *
+ * @return A function that generates CSS rules.
+ */
+function createBorderGenerateFunction(path) {
+  return (style, options) => (0, _utils.generateRule)(style, options, path, (0, _utils.camelCaseJoin)(path));
+}
+/**
+ * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
+ *
+ * @param edge The edge to create CSS rules for.
+ *
+ * @return A function that generates CSS rules.
+ */
+
+
+function createBorderEdgeGenerateFunction(edge) {
+  return (style, options) => {
+    return ['color', 'style', 'width'].flatMap(key => {
+      const path = ['border', edge, key];
+      return createBorderGenerateFunction(path)(style, options);
+    });
+  };
+}
+
 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);
-  }
+  generate: createBorderGenerateFunction(['border', 'color'])
 };
 const radius = {
   name: 'radius',
@@ -29,66 +54,28 @@ const radius = {
 };
 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);
-  }
+  generate: createBorderGenerateFunction(['border', 'style'])
 };
 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;
-  }, []);
+  generate: createBorderGenerateFunction(['border', 'width'])
 };
-
 const borderTop = {
   name: 'borderTop',
-  generate: createBorderGenerateFunction('top')
+  generate: createBorderEdgeGenerateFunction('top')
 };
 const borderRight = {
   name: 'borderRight',
-  generate: createBorderGenerateFunction('right')
+  generate: createBorderEdgeGenerateFunction('right')
 };
 const borderBottom = {
   name: 'borderBottom',
-  generate: createBorderGenerateFunction('bottom')
+  generate: createBorderEdgeGenerateFunction('bottom')
 };
 const borderLeft = {
   name: 'borderLeft',
-  generate: createBorderGenerateFunction('left')
+  generate: createBorderEdgeGenerateFunction('left')
 };
-var _default = [...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft];
+var _default = [color, borderStyle, width, radius, borderTop, borderRight, borderBottom, borderLeft];
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACN,yBAAcD,KAAd,EAAqBC,OAArB,EAA8BF,IAA9B,EAAoC,0BAAeA,IAAf,CAApC,CADD;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,QAAF,EAAY,QAAZ,CAHM,EAIN;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJM,EAQN,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARM,CAAP;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;eAKe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param path An array of strings representing the path to the style value in the style object.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderGenerateFunction( path: string[] ): GenerateFunction {\n\treturn ( style, options ) =>\n\t\tgenerateRule( style, options, path, camelCaseJoin( path ) );\n}\n\n/**\n * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.\n *\n * @param edge The edge to create CSS rules for.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {\n\treturn ( style, options ) => {\n\t\treturn [ 'color', 'style', 'width' ].flatMap( ( key ) => {\n\t\t\tconst path = [ 'border', edge, key ];\n\t\t\treturn createBorderGenerateFunction( path )( style, options );\n\t\t} );\n\t};\n}\n\nconst color: StyleDefinition = {\n\tname: 'color',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'color' ] ),\n};\n\nconst radius: StyleDefinition = {\n\tname: 'radius',\n\tgenerate: ( style, options ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle: StyleDefinition = {\n\tname: 'style',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'style' ] ),\n};\n\nconst width: StyleDefinition = {\n\tname: 'width',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'width' ] ),\n};\n\nconst borderTop: StyleDefinition = {\n\tname: 'borderTop',\n\tgenerate: createBorderEdgeGenerateFunction( 'top' ),\n};\n\nconst borderRight: StyleDefinition = {\n\tname: 'borderRight',\n\tgenerate: createBorderEdgeGenerateFunction( 'right' ),\n};\n\nconst borderBottom: StyleDefinition = {\n\tname: 'borderBottom',\n\tgenerate: createBorderEdgeGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft: StyleDefinition = {\n\tname: 'borderLeft',\n\tgenerate: createBorderEdgeGenerateFunction( 'left' ),\n};\n\nexport default [\n\tcolor,\n\tborderStyle,\n\twidth,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}

package/build/styles/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.camelCaseJoin = camelCaseJoin;
 exports.generateBoxRules = generateBoxRules;
 exports.generateRule = generateRule;
 exports.getCSSVarFromStyleValue = getCSSVarFromStyleValue;
@@ -93,7 +94,7 @@ function generateBoxRules(style, options, path, ruleKeys) {
 
 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);
+    const variable = styleValue.slice(_constants.VARIABLE_REFERENCE_PREFIX.length).split(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => (0, _lodash.kebabCase)(presetVariable)).join(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
     return `var(--wp--${variable})`;
   }
 
@@ -102,14 +103,27 @@ function getCSSVarFromStyleValue(styleValue) {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
  */
 
 
-function upperFirst(_ref) {
-  let [firstLetter, ...rest] = _ref;
+function upperFirst(string) {
+  const [firstLetter, ...rest] = string;
   return firstLetter.toUpperCase() + rest.join('');
 }
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
+ */
+
+
+function camelCaseJoin(strings) {
+  const [firstItem, ...rest] = strings;
+  return firstItem.toLowerCase() + rest.map(upperFirst).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","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"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","map","presetVariable","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.map( ( presetVariable ) => kebabCase( presetVariable ) )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n"]}

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

@@ -1,14 +1,39 @@
 /**
  * Internal dependencies
  */
-import { generateRule, generateBoxRules, upperFirst } from '../utils';
+import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
+/**
+ * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
+ *
+ * @param path An array of strings representing the path to the style value in the style object.
+ *
+ * @return A function that generates CSS rules.
+ */
+
+function createBorderGenerateFunction(path) {
+  return (style, options) => generateRule(style, options, path, camelCaseJoin(path));
+}
+/**
+ * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
+ *
+ * @param edge The edge to create CSS rules for.
+ *
+ * @return A function that generates CSS rules.
+ */
+
+
+function createBorderEdgeGenerateFunction(edge) {
+  return (style, options) => {
+    return ['color', 'style', 'width'].flatMap(key => {
+      const path = ['border', edge, key];
+      return createBorderGenerateFunction(path)(style, options);
+    });
+  };
+}
+
 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);
-  }
+  generate: createBorderGenerateFunction(['border', 'color'])
 };
 const radius = {
   name: 'radius',
@@ -21,65 +46,27 @@ const radius = {
 };
 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);
-  }
+  generate: createBorderGenerateFunction(['border', 'style'])
 };
 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;
-  }, []);
+  generate: createBorderGenerateFunction(['border', 'width'])
 };
-
 const borderTop = {
   name: 'borderTop',
-  generate: createBorderGenerateFunction('top')
+  generate: createBorderEdgeGenerateFunction('top')
 };
 const borderRight = {
   name: 'borderRight',
-  generate: createBorderGenerateFunction('right')
+  generate: createBorderEdgeGenerateFunction('right')
 };
 const borderBottom = {
   name: 'borderBottom',
-  generate: createBorderGenerateFunction('bottom')
+  generate: createBorderEdgeGenerateFunction('bottom')
 };
 const borderLeft = {
   name: 'borderLeft',
-  generate: createBorderGenerateFunction('left')
+  generate: createBorderEdgeGenerateFunction('left')
 };
-export default [...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft];
+export default [color, borderStyle, width, radius, borderTop, borderRight, borderBottom, borderLeft];
 //# sourceMappingURL=index.js.map