@wordpress/style-engine 0.15.1-next.957ca95e4c.0 → 1.0.0

package/CHANGELOG.md

@@ -2,34 +2,22 @@
 
 ## Unreleased
 
-## 0.15.0 (2022-08-24)
-
-## 0.14.0 (2022-08-10)
-
-## 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)
-
-## 0.8.0 (2022-05-18)
-
-## 0.7.0 (2022-05-04)
-
-## 0.6.0 (2022-04-21)
-
-## 0.5.0 (2022-04-08)
-
-## 0.4.0 (2022-03-23)
-
-## 0.3.0 (2022-03-11)
-
-## 0.2.0 (2022-02-23)
-
-### New Feature
-
+### 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)).
+
+### Internal
+-   Move backend scripts to package ([#39736](https://github.com/WordPress/gutenberg/pull/39736)).
+-   Updating docs, formatting, and separating global functions from the main class file ([#43840](https://github.com/WordPress/gutenberg/pull/43840)).
+
+### New Features
+-   Add a WP_Style_Engine_Processor object ([#42463](https://github.com/WordPress/gutenberg/pull/42463)).
+-   Add a WP_Style_Engine_CSS_Declarations object ([#42043](https://github.com/WordPress/gutenberg/pull/42043)).
+-   Add Rules and Store objects ([#42222](https://github.com/WordPress/gutenberg/pull/42222)).
+-   Add elements styles support ([#41732](https://github.com/WordPress/gutenberg/pull/41732)) and ([#40987](https://github.com/WordPress/gutenberg/pull/40987)).
+-   Add typography and color support ([#40665](https://github.com/WordPress/gutenberg/pull/40987)) and ([#40332](https://github.com/WordPress/gutenberg/pull/40332)).
+-   Add border support ([#41803](https://github.com/WordPress/gutenberg/pull/40332)) and ([#40531](https://github.com/WordPress/gutenberg/pull/40531)).
+-   Add margin support to frontend ([#39790](https://github.com/WordPress/gutenberg/pull/39790)).
+-   Add basic block supports to backend ([#39446](https://github.com/WordPress/gutenberg/pull/39446)).
 -   Added initial version of the style engine ([#37978](https://github.com/WordPress/gutenberg/pull/37978)).
+-   Include `@wordpress/style-engine` on the list of external dependencies to allow using `wp.styleEngine` global with WordPress 6.1 and beyond ([#43840](https://github.com/WordPress/gutenberg/pull/43840)).

package/README.md

@@ -1,27 +1,23 @@
 # Style Engine
 
-The Style Engine powering global styles and block customizations.
+The Style Engine aims to provide a consistent API for rendering styling for blocks across both client-side and server-side applications.
 
-## Important
+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.
 
-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.
+## Important
 
-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:
+This package is new as of WordPress 6.1 and therefore in its infancy.
 
-**TODO List:**
+Upcoming tasks on the roadmap include, but are not limited to, the following:
 
--   Add style definitions for all the currently supported styles in blocks and theme.json.
--   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).
+-   Consolidate global and block style rendering and enqueuing (ongoing)
+-   Explore pre-render CSS rule processing with the intention of deduplicating other common and/or repetitive block styles. (ongoing)
+-   Extend the scope of semantic class names and/or design token expression, and encapsulate rules into stable utility classes.
+-   Explore pre-render CSS rule processing with the intention of deduplicating other common and/or repetitive block styles.
+-   Propose a way to control hierarchy and specificity, and make the style hierarchy cascade accessible and predictable. This might include preparing for CSS cascade layers until they become more widely supported, and allowing for opt-in support in Gutenberg via theme.json.
+-   Refactor all blocks to consistently use the "style" attribute for all customizations, that is, deprecate preset-specific attributes such as `attributes.fontSize`.
 
-See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
+For more information about the roadmap, please refer to [Block editor styles: initiatives and goals](https://make.wordpress.org/core/2022/06/24/block-editor-styles-initiatives-and-goals/) and the [Github project board](https://github.com/orgs/WordPress/projects/19).
 
 ## Backend API
 
@@ -30,8 +26,9 @@ See [Tracking: Add a Style Engine to manage rendering block styles #38167](https
 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/)
-.
+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).
 
 _Parameters_
 
@@ -82,7 +79,7 @@ print_r( $styles );
 
 /*
 array(
-    'css'                 => '.a-selector{padding:10px}'
+    'css'                 => '.a-selector{padding:100px}'
     'declarations'  => array( 'padding' => '100px' )
 )
 */
@@ -132,12 +129,12 @@ $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
         '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}
+print_r( $stylesheet ); // .wp-pumpkin,.wp-kumquat{color:orange}.wp-tomato{color:red;padding:100px}
 ```
 
-### wp_style_engine_get_stylesheet_from_store()
+### wp_style_engine_get_stylesheet_from_context()
 
-Returns compiled CSS from a store, if found.
+Returns compiled CSS from a stored context, if found.
 
 _Parameters_
 
@@ -167,8 +164,8 @@ $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
     )
 );
 
-// Later, fetch compiled rules from store.
-$stylesheet = gutenberg_style_engine_get_stylesheet_from_store( 'fruit-styles' );
+// Later, fetch compiled rules from context store.
+$stylesheet = gutenberg_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 );
@@ -185,10 +182,7 @@ Install the module
 npm install @wordpress/style-engine --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has
-limited or no support for such language features and APIs, you should
-include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill)
-in your code._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
 ## Usage
 
@@ -205,7 +199,11 @@ _Parameters_
 
 _Returns_
 
--   `string`: generated stylesheet.
+-   `string`: A generated stylesheet or inline style declarations.
+
+_Changelog_
+
+`6.1.0` Introduced in WordPress core.
 
 ### getCSSRules
 
@@ -218,7 +216,11 @@ _Parameters_
 
 _Returns_
 
--   `GeneratedCSSRule[]`: generated styles.
+-   `GeneratedCSSRule[]`: A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
+
+_Changelog_
+
+`6.1.0` Introduced in WordPress core.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
@@ -229,6 +231,8 @@ 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>Context</dt>
+  <dd>An identifier for a group of styles that share a common origin or purpose, e.g., 'block-supports' or 'global-styles'. The context is also used as a key to fetch CSS rules from the store.</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>
@@ -237,8 +241,8 @@ A guide to the terms and variable names referenced by the Style Engine package.
   <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 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>
   <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/index.js

@@ -17,10 +17,12 @@ var _styles = require("./styles");
 /**
  * Generates a stylesheet for a given style object and selector.
  *
+ * @since 6.1.0 Introduced in WordPress core.
+ *
  * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
- * @return generated stylesheet.
+ * @return A generated stylesheet or inline style declarations.
  */
 function compileCSS(style) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -44,10 +46,12 @@ function compileCSS(style) {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
+ * @since 6.1.0 Introduced in WordPress core.
+ *
  * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
- * @return generated styles.
+ * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  */
 
 

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","map","styleDefinitions","definition","generate"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,UAAT,CAAqBC,KAArB,EAAwE;AAAA,MAArCC,OAAqC,uEAAb,EAAa;AAC9E,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CAD8E,CAG9E;;AACA,MAAK,EAAEA,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEG,QAAX,CAAL,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAG,uBAAWD,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAG,qBAASV,KAAT,EAAgB,UAAhB,CAArB;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACT,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOM,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACF,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASR,WAAT,CACNH,KADM,EAGe;AAAA,MADrBC,OACqB,uEADG,EACH;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAkB,2BAAiBd,OAAjB,CAA4Be,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACC,QAAlB,KAA+B,UAApC,EAAiD;AAChDpB,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGa,UAAU,CAACC,QAAX,CAAqBtB,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","map","styleDefinitions","definition","generate"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,UAAT,CAAqBC,KAArB,EAAwE;AAAA,MAArCC,OAAqC,uEAAb,EAAa;AAC9E,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CAD8E,CAG9E;;AACA,MAAK,EAAEA,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEG,QAAX,CAAL,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAG,uBAAWD,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAG,qBAASV,KAAT,EAAgB,UAAhB,CAArB;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACT,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOM,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACF,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASR,WAAT,CACNH,KADM,EAGe;AAAA,MADrBC,OACqB,uEADG,EACH;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAkB,2BAAiBd,OAAjB,CAA4Be,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACC,QAAlB,KAA+B,UAApC,EAAiD;AAChDpB,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGa,UAAU,CAACC,QAAX,CAAqBtB,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}

package/build/styles/index.js

@@ -13,6 +13,8 @@ var _color = _interopRequireDefault(require("./color"));
 
 var _shadow = _interopRequireDefault(require("./shadow"));
 
+var _outline = _interopRequireDefault(require("./outline"));
+
 var _spacing = _interopRequireDefault(require("./spacing"));
 
 var _typography = _interopRequireDefault(require("./typography"));
@@ -20,6 +22,6 @@ var _typography = _interopRequireDefault(require("./typography"));
 /**
  * Internal dependencies
  */
-const styleDefinitions = [..._border.default, ..._color.default, ..._spacing.default, ..._typography.default, ..._shadow.default];
+const styleDefinitions = [..._border.default, ..._color.default, ..._outline.default, ..._spacing.default, ..._typography.default, ..._shadow.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","border","color","spacing","typography","shadow"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AAPA;AACA;AACA;AAOO,MAAMA,gBAAgB,GAAG,CAC/B,GAAGC,eAD4B,EAE/B,GAAGC,cAF4B,EAG/B,GAAGC,gBAH4B,EAI/B,GAAGC,mBAJ4B,EAK/B,GAAGC,eAL4B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport border from './border';\nimport color from './color';\nimport shadow from './shadow';\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\t...shadow,\n];\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["styleDefinitions","border","color","outline","spacing","typography","shadow"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAQO,MAAMA,gBAAgB,GAAG,CAC/B,GAAGC,eAD4B,EAE/B,GAAGC,cAF4B,EAG/B,GAAGC,gBAH4B,EAI/B,GAAGC,gBAJ4B,EAK/B,GAAGC,mBAL4B,EAM/B,GAAGC,eAN4B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport border from './border';\nimport color from './color';\nimport shadow from './shadow';\nimport outline from './outline';\nimport spacing from './spacing';\nimport typography from './typography';\n\nexport const styleDefinitions = [\n\t...border,\n\t...color,\n\t...outline,\n\t...spacing,\n\t...typography,\n\t...shadow,\n];\n"]}

package/build/styles/outline/index.js

@@ -0,0 +1,47 @@
+"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] : ['outline', 'color'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
+    return (0, _utils.generateRule)(style, options, path, ruleKey);
+  }
+};
+const offset = {
+  name: 'offset',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
+    return (0, _utils.generateRule)(style, options, path, ruleKey);
+  }
+};
+const outlineStyle = {
+  name: 'style',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
+    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] : ['outline', 'width'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
+    return (0, _utils.generateRule)(style, options, path, ruleKey);
+  }
+};
+var _default = [color, outlineStyle, offset, width];
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;eAYe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\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[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}

package/build-module/index.js

@@ -10,10 +10,12 @@ import { styleDefinitions } from './styles';
 /**
  * Generates a stylesheet for a given style object and selector.
  *
+ * @since 6.1.0 Introduced in WordPress core.
+ *
  * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
- * @return generated stylesheet.
+ * @return A generated stylesheet or inline style declarations.
  */
 
 export function compileCSS(style) {
@@ -38,10 +40,12 @@ export function compileCSS(style) {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
+ * @since 6.1.0 Introduced in WordPress core.
+ *
  * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
- * @return generated styles.
+ * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  */
 
 export function getCSSRules(style) {

package/build-module/index.js.map

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

package/build-module/styles/index.js

@@ -4,7 +4,8 @@
 import border from './border';
 import color from './color';
 import shadow from './shadow';
+import outline from './outline';
 import spacing from './spacing';
 import typography from './typography';
-export const styleDefinitions = [...border, ...color, ...spacing, ...typography, ...shadow];
+export const styleDefinitions = [...border, ...color, ...outline, ...spacing, ...typography, ...shadow];
 //# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import { generateRule } from '../utils';
+const color = {
+  name: 'color',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'color'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+const offset = {
+  name: 'offset',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+const outlineStyle = {
+  name: 'style',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+const width = {
+  name: 'width',
+  generate: function (style, options) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'width'];
+    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
+    return generateRule(style, options, path, ruleKey);
+  }
+};
+export default [color, outlineStyle, offset, width];
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["generateRule","color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,eAAe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\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[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}

package/build-types/index.d.ts

@@ -5,19 +5,23 @@ import type { Style, StyleOptions, GeneratedCSSRule } from './types';
 /**
  * Generates a stylesheet for a given style object and selector.
  *
+ * @since 6.1.0 Introduced in WordPress core.
+ *
  * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
- * @return generated stylesheet.
+ * @return A generated stylesheet or inline style declarations.
  */
 export declare function compileCSS(style: Style, options?: StyleOptions): string;
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
+ * @since 6.1.0 Introduced in WordPress core.
+ *
  * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
- * @return generated styles.
+ * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  */
 export declare function getCSSRules(style: Style, options?: StyleOptions): GeneratedCSSRule[];
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,KAAK,EACL,YAAY,EACZ,gBAAgB,EAEhB,MAAM,SAAS,CAAC;AAGjB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,YAAiB,GAAI,MAAM,CA6B7E;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAC1B,KAAK,EAAE,KAAK,EACZ,OAAO,GAAE,YAAiB,GACxB,gBAAgB,EAAE,CASpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,KAAK,EACL,YAAY,EACZ,gBAAgB,EAEhB,MAAM,SAAS,CAAC;AAGjB;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,YAAiB,GAAI,MAAM,CA6B7E;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAC1B,KAAK,EAAE,KAAK,EACZ,OAAO,GAAE,YAAiB,GACxB,gBAAgB,EAAE,CASpB"}

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

@@ -1,5 +1,5 @@
 export declare const styleDefinitions: (import("../types").StyleDefinition | {
     name: string;
-    generate: (style: import("../types").Style, options: import("../types").StyleOptions) => import("../types").GeneratedCSSRule[];
+    generate: (style: import("../types").Style, options: import("../types").StyleOptions, path?: string[], ruleKey?: string) => import("../types").GeneratedCSSRule[];
 })[];
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB;;;IAM5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB;;;IAO5B,CAAC"}

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

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

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

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

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

@@ -31,14 +31,14 @@ class WP_Style_Engine_CSS_Declarations {
 	 * If a `$declarations` array is passed, it will be used to populate
 	 * the initial $declarations prop of the object by calling add_declarations().
 	 *
-	 * @param array $declarations An array of declarations (property => value pairs).
+	 * @param string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
 	 */
 	public function __construct( $declarations = array() ) {
 		$this->add_declarations( $declarations );
 	}
 
 	/**
-	 * Add a single declaration.
+	 * Adds a single declaration.
 	 *
 	 * @param string $property The CSS property.
 	 * @param string $value    The CSS value.
@@ -46,28 +46,27 @@ class WP_Style_Engine_CSS_Declarations {
 	 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
 	 */
 	public function add_declaration( $property, $value ) {
-
-		// Sanitize the property.
+		// Sanitizes the property.
 		$property = $this->sanitize_property( $property );
-		// Bail early if the property is empty.
+		// Bails early if the property is empty.
 		if ( empty( $property ) ) {
 			return $this;
 		}
 
-		// Trim the value. If empty, bail early.
+		// Trims the value. If empty, bail early.
 		$value = trim( $value );
 		if ( '' === $value ) {
 			return $this;
 		}
 
-		// Add the declaration property/value pair.
+		// Adds the declaration property/value pair.
 		$this->declarations[ $property ] = $value;
 
 		return $this;
 	}
 
 	/**
-	 * Remove a single declaration.
+	 * Removes a single declaration.
 	 *
 	 * @param string $property The CSS property.
 	 *
@@ -79,7 +78,7 @@ class WP_Style_Engine_CSS_Declarations {
 	}
 
 	/**
-	 * Add multiple declarations.
+	 * Adds multiple declarations.
 	 *
 	 * @param array $declarations An array of declarations.
 	 *
@@ -93,7 +92,7 @@ class WP_Style_Engine_CSS_Declarations {
 	}
 
 	/**
-	 * Remove multiple declarations.
+	 * Removes multiple declarations.
 	 *
 	 * @param array $properties An array of properties.
 	 *
@@ -107,7 +106,7 @@ class WP_Style_Engine_CSS_Declarations {
 	}
 
 	/**
-	 * Get the declarations array.
+	 * Gets the declarations array.
 	 *
 	 * @return array
 	 */
@@ -122,7 +121,7 @@ class WP_Style_Engine_CSS_Declarations {
 	 * @param string $value    The value to be filtered.
 	 * @param string $spacer   The spacer between the colon and the value. Defaults to an empty string.
 	 *
-	 * @return string The filtered declaration as a single string.
+	 * @return string The filtered declaration or an empty string.
 	 */
 	protected static function filter_declaration( $property, $value, $spacer = '' ) {
 		$filtered_value = wp_strip_all_tags( $value, true );
@@ -135,8 +134,8 @@ class WP_Style_Engine_CSS_Declarations {
 	/**
 	 * Filters and compiles the CSS declarations.
 	 *
-	 * @param boolean $should_prettify Whether to add spacing, new lines and indents.
-	 * @param number  $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
+	 * @param bool   $should_prettify Whether to add spacing, new lines and indents.
+	 * @param number $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
 	 *
 	 * @return string The CSS declarations.
 	 */
@@ -158,7 +157,7 @@ class WP_Style_Engine_CSS_Declarations {
 	}
 
 	/**
-	 * Sanitize property names.
+	 * Sanitizes property names.
 	 *
 	 * @param string $property The CSS property.
 	 *