@wordpress/style-engine 0.13.0 → 0.15.0

package/CHANGELOG.md

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

package/README.md

@@ -2,21 +2,13 @@
 
 The Style Engine powering global styles and block customizations.
 
-## Installation (JS only)
-
-Install the module
-
-```bash
-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._
-
 ## 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.
+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:
+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:**
 
@@ -26,50 +18,189 @@ Because this package is experimental and still in development it does not yet ge
 -   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).
+-   Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific
+    attributes).
 
 See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
 
-## Glossary
+## Backend API
 
-A guide to the terms and variable names referenced by the Style Engine package.
+### wp_style_engine_get_styles()
 
-<dl>
-  <dt>Block style (Gutenberg internal)</dt>
-  <dd>An object comprising a block's style attribute that contains a block's style values. E.g., <code>{ spacing: { margin: '10px' }, color: { ... }, ...  }</code></dd>
-  <dt>Global styles (Gutenberg internal)</dt>
-  <dd>A merged block styles object containing values from a theme's theme.json and user styles settings.</dd>
-  <dt>CSS declaration or (CSS property declaration)</dt>
-  <dd>A CSS property paired with a CSS value. E.g., <code>color: pink</code> </dd>
-  <dt>CSS declarations block</dt>
-  <dd>A set of CSS declarations usually paired with a CSS selector to create a CSS rule.</dd>
-  <dt>CSS property</dt>
-  <dd>Identifiers that describe stylistic, modifiable features of an HTML element. E.g., <code>border</code>, <code>font-size</code>, <code>width</code>...</dd>
-  <dt>CSS rule</dt>
-  <dd>A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.</dd>
-  <dt>CSS selector</dt>
-   <dd>The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule&rsquo;s CSS definitions apply. E.g., <code>p.my-cool-classname > span</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS selectors article</a>.</dd>
-  <dt>CSS stylesheet</dt>
-  <dd>A collection of CSS rules contained within a file or within an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank">HTML style tag</a>.</dd>
-  <dt>CSS value</dt>
-  <dd>The value of a CSS property. The value determines how the property is modified. E.g., the <code>10vw</code> in <code>height: 10vw</code>.</dd>
-  <dt>CSS variables (vars) or CSS custom properties</dt>
-  <dd>Properties, whose values can be reused in other CSS declarations. Set using custom property notation (e.g., <code>--wp--preset--olive: #808000;</code>) and  accessed using the <code>var()</code> function (e.g., <code>color: var( --wp--preset--olive );</code>). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">MDN article on CSS custom properties</a>.</dd>
-  <dt>Inline styles</dt>
-  <dd>Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute</dd>
-</dl>
+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/)
+.
+
+_Parameters_
+
+-   _$block_styles_ `array` A block's `attributes.style` object or the top level styles in theme.json
+-   _$options_ `array<string|boolean>` An array of options to determine the output.
+    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
+        global-styles'. Default is 'block-supports'. When both `context` and `selector` are set, the style engine will store the CSS rules using the `context` as a key.
+    -   _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* )
+        values. Default is `false`.
+    -   _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`,
+        otherwise a concatenated string of properties and values.
+
+_Returns_
+`array<string|array>|null`
+
+```php
+array(
+    'css'           => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
+    'declarations'  => (array) An array of property/value pairs representing parsed CSS declarations.
+    'classnames'    => (string) Classnames separated by a space.
+);
+```
+
+It will return compiled CSS declarations for inline styles, or, where a selector is provided, a complete CSS rule.
+
+To enqueue a style for rendering in the site's frontend, the `$options` array requires the following:
+
+1.  **selector (string)** - this is the CSS selector for your block style CSS declarations.
+2.  **context (string)** - this tells the style engine where to store the styles. Styles in the same context will be
+    stored together.
+
+`wp_style_engine_get_styles` will return the compiled CSS and CSS declarations array.
+
+#### Usage
+
+```php
+$block_styles =  array(
+     'spacing' => array( 'padding' => '100px' )
+);
+$styles = wp_style_engine_get_styles(
+    $block_styles,
+    array(
+        'selector' => '.a-selector',
+        'context'  => 'block-supports',
+    )
+);
+print_r( $styles );
+
+/*
+array(
+    'css'                 => '.a-selector{padding:10px}'
+    'declarations'  => array( 'padding' => '100px' )
+)
+*/
+```
+
+### wp_style_engine_get_stylesheet_from_css_rules()
+
+Use this function to compile and return a stylesheet for any CSS rules. The style engine will automatically merge declarations and combine selectors.
+
+This function acts as a CSS compiler, but will also enqueue styles for rendering where `enqueue` and `context` strings are passed in the options.
+
+_Parameters_
+
+-   _$css_rules_ `array<array>`
+-   _$options_ `array<string|boolean>` An array of options to determine the output.
+    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
+        global-styles'. When set, the style engine will store the CSS rules using the `context` value as a key.
+
+_Returns_
+`string` A compiled CSS string based on `$css_rules`.
+
+#### Usage
+
+```php
+$styles = array(
+    array(
+        'selector'.       => '.wp-pumpkin',
+        'declarations' => array( 'color' => 'orange' )
+    ),
+    array(
+        'selector'.       => '.wp-tomato',
+        'declarations' => array( 'color' => 'red' )
+    ),
+    array(
+        'selector'.       => '.wp-tomato',
+        'declarations' => array( 'padding' => '100px' )
+    ),
+    array(
+        'selector'.       => '.wp-kumquat',
+        'declarations' => array( 'color' => 'orange' )
+    ),
+);
+
+$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.
+    )
+);
+print_r( $stylesheet ); // .wp-pumpkin, .wp-kumquat {color:orange}.wp-tomato{color:red;padding:100px}
+```
+
+### wp_style_engine_get_stylesheet_from_store()
+
+Returns compiled CSS from a store, if found.
+
+_Parameters_
+
+-   _$store_name_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
+
+_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(
+    array(
+        'selector'.       => '.wp-apple',
+        'declarations' => array( 'color' => 'green' )
+    ),
+);
+
+$stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+    $styles,
+    array(
+        'context'  => 'fruit-styles',
+        'enqueue'  => true,
+    )
+);
+
+// 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)
+
+Install the module
+
+```bash
+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._
 
 ## Usage
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
-### generate
+### compileCSS
 
 Generates a stylesheet for a given style object and selector.
 
 _Parameters_
 
--   _style_ `Style`: Style object.
+-   _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_
@@ -82,7 +213,7 @@ Returns a JSON representation of the generated CSS rules.
 
 _Parameters_
 
--   _style_ `Style`: Style object.
+-   _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_
@@ -91,4 +222,37 @@ _Returns_
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
+## Glossary
+
+A guide to the terms and variable names referenced by the Style Engine package.
+
+<dl>
+  <dt>Block style (Gutenberg internal)</dt>
+  <dd>An object comprising a block's style attribute that contains a block's style values. E.g., <code>{ spacing: { margin: '10px' }, color: { ... }, ...  }</code></dd>
+  <dt>CSS declaration or (CSS property declaration)</dt>
+  <dd>A CSS property paired with a CSS value. E.g., <code>color: pink</code> </dd>
+  <dt>CSS declarations block</dt>
+  <dd>A set of CSS declarations usually paired with a CSS selector to create a CSS rule.</dd>
+  <dt>CSS property</dt>
+  <dd>Identifiers that describe stylistic, modifiable features of an HTML element. E.g., <code>border</code>, <code>font-size</code>, <code>width</code>...</dd>
+  <dt>CSS rule</dt>
+  <dd>A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.</dd>
+  <dt>CSS selector</dt>
+   <dd>The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule&rsquo;s CSS definitions apply. E.g., <code>p.my-cool-classname > span</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS selectors article</a>.</dd>
+  <dt>CSS stylesheet</dt>
+  <dd>A collection of CSS rules contained within a file or within an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank">HTML style tag</a>.</dd>
+  <dt>CSS value</dt>
+  <dd>The value of a CSS property. The value determines how the property is modified. E.g., the <code>10vw</code> in <code>height: 10vw</code>.</dd>
+  <dt>CSS variables (vars) or CSS custom properties</dt>
+  <dd>Properties, whose values can be reused in other CSS declarations. Set using custom property notation (e.g., <code>--wp--preset--olive: #808000;</code>) and  accessed using the <code>var()</code> function (e.g., <code>color: var( --wp--preset--olive );</code>). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">MDN article on CSS custom properties</a>.</dd>
+  <dt>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>
+
 <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/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/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.
  */