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

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.15.0 (2022-08-24)
+
 ## 0.14.0 (2022-08-10)
 
 ## 0.13.0 (2022-07-27)

package/README.md

@@ -2,6 +2,27 @@
 
 The Style Engine powering global styles and block customizations.
 
+## Important
+
+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.
+
+Because this package is experimental and still in development it does not yet generate a `wp.styleEngine` global. To get
+there, the following tasks need to be completed:
+
+**TODO List:**
+
+-   Add style definitions for all the currently supported styles in blocks and theme.json.
+-   The CSS variable shortcuts for values (for presets...)
+-   Support generating styles in the frontend. (Ongoing)
+-   Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing)
+-   Refactor all block styles to use the style engine server side. (Ongoing)
+-   Consolidate global and block style rendering and enqueuing
+-   Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific
+    attributes).
+
+See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
+
 ## Backend API
 
 ### wp_style_engine_get_styles()
@@ -17,8 +38,7 @@ _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'.
-    -   _enqueue_ `boolean` When `true` will attempt to store and enqueue for rendering in a `style` tag on the site frontend.
+        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 }`,
@@ -41,8 +61,7 @@ To enqueue a style for rendering in the site's frontend, the `$options` array re
 
 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
-    batched together and printed in the same HTML style tag. The default is `'block-supports'`.
-3.  **enqueue (boolean)** - tells the style engine to store the styles.
+    stored together.
 
 `wp_style_engine_get_styles` will return the compiled CSS and CSS declarations array.
 
@@ -57,7 +76,6 @@ $styles = wp_style_engine_get_styles(
     array(
         'selector' => '.a-selector',
         'context'  => 'block-supports',
-        'enqueue'  => true,
     )
 );
 print_r( $styles );
@@ -81,8 +99,7 @@ _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'. Default is 'block-supports'.
-    -   _enqueue_ `boolean` When `true` will store using the `context` value as a key.
+        global-styles'. When set, the style engine will store the CSS rules using the `context` value as a key.
 
 _Returns_
 `string` A compiled CSS string based on `$css_rules`.
@@ -113,7 +130,6 @@ $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.
-        'enqueue'  => true, // Render the styles for output.
     )
 );
 print_r( $stylesheet ); // .wp-pumpkin, .wp-kumquat {color:orange}.wp-tomato{color:red;padding:100px}
@@ -125,13 +141,15 @@ Returns compiled CSS from a store, if found.
 
 _Parameters_
 
--   _$store_key_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
+-   _$store_name_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
 
 _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.
+
 ```php
 // First register some styles.
 $styles = array(
@@ -152,6 +170,11 @@ $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' );
 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 );
+    wp_enqueue_style( 'my-stylesheet' );
+}
 ```
 
 ## Installation (JS only)
@@ -167,26 +190,37 @@ 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._
 
-## Important
+## Usage
 
-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.
+<!-- START TOKEN(Autogenerated API docs) -->
 
-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:
+### compileCSS
 
-**TODO List:**
+Generates a stylesheet for a given style object and selector.
 
--   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).
+_Parameters_
 
-See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
+-   _style_ `Style`: Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
+-   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
+
+_Returns_
+
+-   `string`: generated stylesheet.
+
+### getCSSRules
+
+Returns a JSON representation of the generated CSS rules.
+
+_Parameters_
+
+-   _style_ `Style`: Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
+-   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
+
+_Returns_
+
+-   `GeneratedCSSRule[]`: generated styles.
+
+<!-- END TOKEN(Autogenerated API docs) -->
 
 ## Glossary
 
@@ -195,8 +229,6 @@ A guide to the terms and variable names referenced by the Style Engine package.
 <dl>
   <dt>Block style (Gutenberg internal)</dt>
   <dd>An object comprising a block's style attribute that contains a block's style values. E.g., <code>{ spacing: { margin: '10px' }, color: { ... }, ...  }</code></dd>
-  <dt>Global styles (Gutenberg internal)</dt>
-  <dd>A merged block styles object containing values from a theme's theme.json and user styles settings.</dd>
   <dt>CSS declaration or (CSS property declaration)</dt>
   <dd>A CSS property paired with a CSS value. E.g., <code>color: pink</code> </dd>
   <dt>CSS declarations block</dt>
@@ -213,40 +245,14 @@ A guide to the terms and variable names referenced by the Style Engine package.
   <dd>The value of a CSS property. The value determines how the property is modified. E.g., the <code>10vw</code> in <code>height: 10vw</code>.</dd>
   <dt>CSS variables (vars) or CSS custom properties</dt>
   <dd>Properties, whose values can be reused in other CSS declarations. Set using custom property notation (e.g., <code>--wp--preset--olive: #808000;</code>) and  accessed using the <code>var()</code> function (e.g., <code>color: var( --wp--preset--olive );</code>). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">MDN article on CSS custom properties</a>.</dd>
+  <dt>Global styles (Gutenberg internal)</dt>
+  <dd>A merged block styles object containing values from a theme's theme.json and user styles settings.</dd>
   <dt>Inline styles</dt>
   <dd>Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute</dd>
+  <dt>Processor</dt>
+  <dd>Performs compilation and optimization on stored CSS rules. See the class `WP_Style_Engine_Processor`.</dd>
+  <dt>Store</dt>
+  <dd>A data object that contains related styles. See the class `WP_Style_Engine_CSS_Rules_Store`.</dd>
 </dl>
 
-## Usage
-
-<!-- START TOKEN(Autogenerated API docs) -->
-
-### generate
-
-Generates a stylesheet for a given style object and selector.
-
-_Parameters_
-
--   _style_ `Style`: Style object.
--   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
-
-_Returns_
-
--   `string`: generated stylesheet.
-
-### getCSSRules
-
-Returns a JSON representation of the generated CSS rules.
-
-_Parameters_
-
--   _style_ `Style`: Style object.
--   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
-
-_Returns_
-
--   `GeneratedCSSRule[]`: generated styles.
-
-<!-- END TOKEN(Autogenerated API docs) -->
-
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

package/build/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generate = generate;
+exports.compileCSS = compileCSS;
 exports.getCSSRules = getCSSRules;
 
 var _lodash = require("lodash");
@@ -17,12 +17,13 @@ var _styles = require("./styles");
 /**
  * Generates a stylesheet for a given style object and selector.
  *
- * @param  style   Style object.
+ * @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.
  */
-function generate(style, options) {
+function compileCSS(style) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
 
   if (!(options !== null && options !== void 0 && options.selector)) {
@@ -43,14 +44,15 @@ function generate(style, options) {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
- * @param  style   Style object.
+ * @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.
  */
 
 
-function getCSSRules(style, options) {
+function getCSSRules(style) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const rules = [];
 
   _styles.styleDefinitions.forEach(definition => {

package/build/index.js.map

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

package/build/styles/index.js

@@ -11,6 +11,8 @@ var _border = _interopRequireDefault(require("./border"));
 
 var _color = _interopRequireDefault(require("./color"));
 
+var _shadow = _interopRequireDefault(require("./shadow"));
+
 var _spacing = _interopRequireDefault(require("./spacing"));
 
 var _typography = _interopRequireDefault(require("./typography"));
@@ -18,6 +20,6 @@ var _typography = _interopRequireDefault(require("./typography"));
 /**
  * Internal dependencies
  */
-const styleDefinitions = [..._border.default, ..._color.default, ..._spacing.default, ..._typography.default];
+const styleDefinitions = [..._border.default, ..._color.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"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAMO,MAAMA,gBAAgB,GAAG,CAC/B,GAAGC,eAD4B,EAE/B,GAAGC,cAF4B,EAG/B,GAAGC,gBAH4B,EAI/B,GAAGC,mBAJ4B,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport border from './border';\nimport color from './color';\nimport spacing from './spacing';\nimport typography from './typography';\n\nexport const styleDefinitions = [\n\t...border,\n\t...color,\n\t...spacing,\n\t...typography,\n];\n"]}
+{"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"]}

package/build/styles/shadow/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/shadow/index.ts"],"names":["shadow","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,MAAM,GAAG;AACdC,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBAAcD,KAAd,EAAqBC,OAArB,EAA8B,CAAE,QAAF,CAA9B,EAA4C,WAA5C,CAAP;AACA;AAJa,CAAf;eAOe,CAAEJ,MAAF,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst shadow = {\n\tname: 'shadow',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule( style, options, [ 'shadow' ], 'boxShadow' );\n\t},\n};\n\nexport default [ shadow ];\n"]}

package/build/styles/typography/index.js

@@ -28,6 +28,12 @@ const fontWeight = {
     return (0, _utils.generateRule)(style, options, ['typography', 'fontWeight'], 'fontWeight');
   }
 };
+const fontFamily = {
+  name: 'fontFamily',
+  generate: (style, options) => {
+    return (0, _utils.generateRule)(style, options, ['typography', 'fontFamily'], 'fontFamily');
+  }
+};
 const letterSpacing = {
   name: 'letterSpacing',
   generate: (style, options) => {
@@ -52,6 +58,6 @@ const textTransform = {
     return (0, _utils.generateRule)(style, options, ['typography', 'textTransform'], 'textTransform');
   }
 };
-var _default = [fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
+var _default = [fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

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

package/build/styles/utils.js

@@ -37,11 +37,11 @@ function generateRule(style, options, path, ruleKey) {
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
- * @param style                Style object.
- * @param options              Options object with settings to adjust how the styles are generated.
- * @param path                 An array of strings representing the path to the style value in the style object.
- * @param ruleKeys             An array of CSS property keys and patterns.
- * @param individualProperties The "sides" or individual properties for which to generate rules.
+ * @param  style                Style object.
+ * @param  options              Options object with settings to adjust how the styles are generated.
+ * @param  path                 An array of strings representing the path to the style value in the style object.
+ * @param  ruleKeys             An array of CSS property keys and patterns.
+ * @param  individualProperties The "sides" or individual properties for which to generate rules.
  *
  * @return GeneratedCSSRule[]  CSS rules.
  */

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","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","firstLetter","rest","toUpperCase"],"mappings":";;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKL;AACD,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADpB;AAECC,IAAAA,GAAG,EAAEH,OAFN;AAGCI,IAAAA,KAAK,EAAEC,uBAAuB,CAAEJ,UAAF;AAH/B,GADA,CADc,GAQd,EARH;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINQ,QAJM,EAMe;AAAA,MADrBC,oBACqB,uEADY,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CACZ;AACrB,QAAMC,QAAkC,GAAG,iBAAKZ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEU,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXT,MAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEI,QAAQ,CAACK,OAFH;AAGXR,MAAAA,KAAK,EAAEK;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMI,SAAS,GAAGL,oBAAoB,CAACM,MAArB,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMZ,KAAyB,GAAGC,uBAAuB,CACxD,iBAAKI,QAAL,EAAe,CAAEO,IAAF,CAAf,CADwD,CAAzD;;AAGA,UAAKZ,KAAL,EAAa;AACZW,QAAAA,GAAG,CAACJ,IAAJ,CAAU;AACTT,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEU,UAAV,CAAqBC,OAArB,CACJ,IADI,EAEJC,UAAU,CAAEH,IAAF,CAFN,CAFI;AAMTZ,UAAAA;AANS,SAAV;AAQA;;AACD,aAAOW,GAAP;AACA,KAhBgB,EAiBjB,EAjBiB,CAAlB;AAmBAL,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGE,SAAf;AACA;;AAED,SAAOH,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGrB,UAAU,CACzBsB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,IAHe,CAGTC,8CAHS,CAAjB;AAIA,WAAQ,aAAaN,QAAU,GAA/B;AACA;;AACD,SAAOrB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkB,UAAT,OAAwD;AAAA,MAAnC,CAAEU,WAAF,EAAe,GAAGC,IAAlB,CAAmC;AAC9D,SAAOD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACH,IAAL,CAAW,EAAX,CAAnC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}

package/build-module/index.js

@@ -10,13 +10,14 @@ import { styleDefinitions } from './styles';
 /**
  * Generates a stylesheet for a given style object and selector.
  *
- * @param  style   Style object.
+ * @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.
  */
 
-export function generate(style, options) {
+export function compileCSS(style) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
 
   if (!(options !== null && options !== void 0 && options.selector)) {
@@ -37,13 +38,14 @@ export function generate(style, options) {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
- * @param  style   Style object.
+ * @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.
  */
 
-export function getCSSRules(style, options) {
+export function getCSSRules(style) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const rules = [];
   styleDefinitions.forEach(definition => {
     if (typeof definition.generate === 'function') {

package/build-module/index.js.map

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

package/build-module/styles/index.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/shadow/index.ts"],"names":["generateRule","shadow","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,MAAM,GAAG;AACdC,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkB,CAAE,QAAF,CAAlB,EAAgC,WAAhC,CAAnB;AACA;AAJa,CAAf;AAOA,eAAe,CAAEJ,MAAF,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst shadow = {\n\tname: 'shadow',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule( style, options, [ 'shadow' ], 'boxShadow' );\n\t},\n};\n\nexport default [ shadow ];\n"]}

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

@@ -20,6 +20,12 @@ const fontWeight = {
     return generateRule(style, options, ['typography', 'fontWeight'], 'fontWeight');
   }
 };
+const fontFamily = {
+  name: 'fontFamily',
+  generate: (style, options) => {
+    return generateRule(style, options, ['typography', 'fontFamily'], 'fontFamily');
+  }
+};
 const letterSpacing = {
   name: 'letterSpacing',
   generate: (style, options) => {
@@ -44,5 +50,5 @@ const textTransform = {
     return generateRule(style, options, ['typography', 'textTransform'], 'textTransform');
   }
 };
-export default [fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
+export default [fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["generateRule","fontSize","name","generate","style","options","fontStyle","fontWeight","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,UAAhB,CAHkB,EAIlB,UAJkB,CAAnB;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,WAAhB,CAHkB,EAIlB,WAJkB,CAAnB;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMG,aAAa,GAAG;AACrBN,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,eAAhB,CAHkB,EAIlB,eAJkB,CAAnB;AAMA;AAToB,CAAtB;AAYA,MAAMI,UAAU,GAAG;AAClBP,EAAAA,IAAI,EAAE,eADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMK,cAAc,GAAG;AACtBR,EAAAA,IAAI,EAAE,gBADgB;AAEtBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,gBAAhB,CAHkB,EAIlB,gBAJkB,CAAnB;AAMA;AATqB,CAAvB;AAYA,MAAMM,aAAa,GAAG;AACrBT,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,eAAhB,CAHkB,EAIlB,eAJkB,CAAnB;AAMA;AAToB,CAAtB;AAYA,eAAe,CACdJ,QADc,EAEdK,SAFc,EAGdC,UAHc,EAIdC,aAJc,EAKdC,UALc,EAMdC,cANc,EAOdC,aAPc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst fontSize = {\n\tname: 'fontSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t'fontSize'\n\t\t);\n\t},\n};\n\nconst fontStyle = {\n\tname: 'fontStyle',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontStyle' ],\n\t\t\t'fontStyle'\n\t\t);\n\t},\n};\n\nconst fontWeight = {\n\tname: 'fontWeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontWeight' ],\n\t\t\t'fontWeight'\n\t\t);\n\t},\n};\n\nconst letterSpacing = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t'letterSpacing'\n\t\t);\n\t},\n};\n\nconst lineHeight = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t'lineHeight'\n\t\t);\n\t},\n};\n\nconst textDecoration = {\n\tname: 'textDecoration',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t'textDecoration'\n\t\t);\n\t},\n};\n\nconst textTransform = {\n\tname: 'textTransform',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t'textTransform'\n\t\t);\n\t},\n};\n\nexport default [\n\tfontSize,\n\tfontStyle,\n\tfontWeight,\n\tletterSpacing,\n\tlineHeight,\n\ttextDecoration,\n\ttextTransform,\n];\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["generateRule","fontSize","name","generate","style","options","fontStyle","fontWeight","fontFamily","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,UAAhB,CAHkB,EAIlB,UAJkB,CAAnB;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,WAAhB,CAHkB,EAIlB,WAJkB,CAAnB;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMG,UAAU,GAAG;AAClBN,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMI,aAAa,GAAG;AACrBP,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,eAAhB,CAHkB,EAIlB,eAJkB,CAAnB;AAMA;AAToB,CAAtB;AAYA,MAAMK,UAAU,GAAG;AAClBR,EAAAA,IAAI,EAAE,eADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMM,cAAc,GAAG;AACtBT,EAAAA,IAAI,EAAE,gBADgB;AAEtBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,gBAAhB,CAHkB,EAIlB,gBAJkB,CAAnB;AAMA;AATqB,CAAvB;AAYA,MAAMO,aAAa,GAAG;AACrBV,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,eAAhB,CAHkB,EAIlB,eAJkB,CAAnB;AAMA;AAToB,CAAtB;AAYA,eAAe,CACdG,UADc,EAEdP,QAFc,EAGdK,SAHc,EAIdC,UAJc,EAKdE,aALc,EAMdC,UANc,EAOdC,cAPc,EAQdC,aARc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst fontSize = {\n\tname: 'fontSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t'fontSize'\n\t\t);\n\t},\n};\n\nconst fontStyle = {\n\tname: 'fontStyle',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontStyle' ],\n\t\t\t'fontStyle'\n\t\t);\n\t},\n};\n\nconst fontWeight = {\n\tname: 'fontWeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontWeight' ],\n\t\t\t'fontWeight'\n\t\t);\n\t},\n};\n\nconst fontFamily = {\n\tname: 'fontFamily',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontFamily' ],\n\t\t\t'fontFamily'\n\t\t);\n\t},\n};\n\nconst letterSpacing = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t'letterSpacing'\n\t\t);\n\t},\n};\n\nconst lineHeight = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t'lineHeight'\n\t\t);\n\t},\n};\n\nconst textDecoration = {\n\tname: 'textDecoration',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t'textDecoration'\n\t\t);\n\t},\n};\n\nconst textTransform = {\n\tname: 'textTransform',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t'textTransform'\n\t\t);\n\t},\n};\n\nexport default [\n\tfontFamily,\n\tfontSize,\n\tfontStyle,\n\tfontWeight,\n\tletterSpacing,\n\tlineHeight,\n\ttextDecoration,\n\ttextTransform,\n];\n"]}

package/build-module/styles/utils.js

@@ -29,11 +29,11 @@ export function generateRule(style, options, path, ruleKey) {
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
- * @param style                Style object.
- * @param options              Options object with settings to adjust how the styles are generated.
- * @param path                 An array of strings representing the path to the style value in the style object.
- * @param ruleKeys             An array of CSS property keys and patterns.
- * @param individualProperties The "sides" or individual properties for which to generate rules.
+ * @param  style                Style object.
+ * @param  options              Options object with settings to adjust how the styles are generated.
+ * @param  path                 An array of strings representing the path to the style value in the style object.
+ * @param  ruleKeys             An array of CSS property keys and patterns.
+ * @param  individualProperties The "sides" or individual properties for which to generate rules.
  *
  * @return GeneratedCSSRule[]  CSS rules.
  */