@wordpress/style-engine 0.16.0 → 1.0.0

package/CHANGELOG.md

@@ -2,36 +2,22 @@
 
 ## Unreleased
 
-## 0.16.0 (2022-09-13)
-
-## 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,7 +129,7 @@ $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_context()
@@ -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) -->
 
@@ -239,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-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-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/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.
 	 *

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

@@ -37,9 +37,9 @@ class WP_Style_Engine_CSS_Rule {
 	/**
 	 * Constructor
 	 *
-	 * @param string                                 $selector     The CSS selector.
-	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
-	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+	 * @param string                                    $selector     The CSS selector.
+	 * @param string[]|WP_Style_Engine_CSS_Declarations $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ),
+	 *                                                                or a WP_Style_Engine_CSS_Declarations object.
 	 */
 	public function __construct( $selector = '', $declarations = array() ) {
 		$this->set_selector( $selector );
@@ -47,7 +47,7 @@ class WP_Style_Engine_CSS_Rule {
 	}
 
 	/**
-	 * Set the selector.
+	 * Sets the selector.
 	 *
 	 * @param string $selector The CSS selector.
 	 *
@@ -59,7 +59,7 @@ class WP_Style_Engine_CSS_Rule {
 	}
 
 	/**
-	 * Set the declarations.
+	 * Sets the declarations.
 	 *
 	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
 	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
@@ -83,16 +83,16 @@ class WP_Style_Engine_CSS_Rule {
 	}
 
 	/**
-	 * Get the declarations object.
+	 * Gets the declarations object.
 	 *
-	 * @return WP_Style_Engine_CSS_Declarations
+	 * @return WP_Style_Engine_CSS_Declarations The declarations object.
 	 */
 	public function get_declarations() {
 		return $this->declarations;
 	}
 
 	/**
-	 * Get the full selector.
+	 * Gets the full selector.
 	 *
 	 * @return string
 	 */
@@ -101,18 +101,18 @@ class WP_Style_Engine_CSS_Rule {
 	}
 
 	/**
-	 * Get the CSS.
+	 * Gets the CSS.
 	 *
-	 * @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
 	 */
 	public function get_css( $should_prettify = false, $indent_count = 0 ) {
 		$rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
 		$declarations_indent = $should_prettify ? $indent_count + 1 : 0;
-		$new_line            = $should_prettify ? "\n" : '';
-		$space               = $should_prettify ? ' ' : '';
+		$suffix              = $should_prettify ? "\n" : '';
+		$spacer              = $should_prettify ? ' ' : '';
 		$selector            = $should_prettify ? str_replace( ',', ",\n", $this->get_selector() ) : $this->get_selector();
 		$css_declarations    = $this->declarations->get_declarations_string( $should_prettify, $declarations_indent );
 
@@ -120,6 +120,6 @@ class WP_Style_Engine_CSS_Rule {
 			return '';
 		}
 
-		return "{$rule_indent}{$selector}{$space}{{$new_line}{$css_declarations}{$new_line}{$rule_indent}}";
+		return "{$rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$rule_indent}}";
 	}
 }

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

@@ -42,7 +42,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	protected $rules = array();
 
 	/**
-	 * Get an instance of the store.
+	 * Gets an instance of the store.
 	 *
 	 * @param string $store_name The name of the store.
 	 *
@@ -61,7 +61,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	}
 
 	/**
-	 * Get an array of all available stores.
+	 * Gets an array of all available stores.
 	 *
 	 * @return WP_Style_Engine_CSS_Rules_Store[]
 	 */
@@ -79,7 +79,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	}
 
 	/**
-	 * Set the store name.
+	 * Sets the store name.
 	 *
 	 * @param string $name The store name.
 	 *
@@ -90,7 +90,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	}
 
 	/**
-	 * Get the store name.
+	 * Gets the store name.
 	 *
 	 * @return string
 	 */
@@ -99,7 +99,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	}
 
 	/**
-	 * Get an array of all rules.
+	 * Gets an array of all rules.
 	 *
 	 * @return WP_Style_Engine_CSS_Rule[]
 	 */
@@ -108,7 +108,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	}
 
 	/**
-	 * Get a WP_Style_Engine_CSS_Rule object by its selector.
+	 * Gets a WP_Style_Engine_CSS_Rule object by its selector.
 	 * If the rule does not exist, it will be created.
 	 *
 	 * @param string $selector The CSS selector.
@@ -132,7 +132,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	}
 
 	/**
-	 * Remove a selector from the store.
+	 * Removes a selector from the store.
 	 *
 	 * @param string $selector The CSS selector.
 	 *

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

@@ -19,7 +19,7 @@ if ( class_exists( 'WP_Style_Engine_Processor' ) ) {
 class WP_Style_Engine_Processor {
 
 	/**
-	 * The Style-Engine Store objects
+	 * A collection of Style Engine Store objects.
 	 *
 	 * @var WP_Style_Engine_CSS_Rules_Store[]
 	 */
@@ -39,7 +39,16 @@ class WP_Style_Engine_Processor {
 	 *
 	 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
 	 */
-	public function add_store( WP_Style_Engine_CSS_Rules_Store $store ) {
+	public function add_store( $store ) {
+		if ( ! $store instanceof WP_Style_Engine_CSS_Rules_Store ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( '$store must be an instance of WP_Style_Engine_CSS_Rules_Store', 'default' ),
+				'6.1.0'
+			);
+			return $this;
+		}
+
 		$this->stores[ $store->get_name() ] = $store;
 
 		return $this;
@@ -56,6 +65,7 @@ class WP_Style_Engine_Processor {
 		if ( ! is_array( $css_rules ) ) {
 			$css_rules = array( $css_rules );
 		}
+
 		foreach ( $css_rules as $rule ) {
 			$selector = $rule->get_selector();
 			if ( isset( $this->css_rules[ $selector ] ) ) {
@@ -71,10 +81,12 @@ class WP_Style_Engine_Processor {
 	/**
 	 * Get the CSS rules as a string.
 	 *
-	 * @param array $options array(
-	 *    'optimize' => (boolean) Whether to optimize the CSS output, e.g., combine rules.
-	 *    'prettify' => (boolean) Whether to add new lines to output.
-	 * );.
+	 * @param array $options   {
+	 *     Optional. An array of options. Default empty array.
+	 *
+	 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
+	 *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
+	 * }
 	 *
 	 * @return string The computed CSS.
 	 */