@wordpress/style-engine 2.48.0 → 2.49.1-next.v.202606191442.0

package/CHANGELOG.md

@@ -2,7 +2,19 @@
 
 ## Unreleased
 
-## 2.48.0 (2026-06-04)
+## 2.49.0-next.0 (2026-06-19)
+
+### Enhancements
+
+-   Export the `Style`, `StyleOptions`, and `GeneratedCSSRule` TypeScript types so that consumers of the public API can type their usage of `compileCSS` and `getCSSRules`.
+
+## 2.48.1 (2026-06-16)
+
+## 2.48.0 (2026-06-10)
+
+### Code Quality
+
+-   Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).
 
 ## 2.47.0 (2026-05-27)
 

package/README.md

@@ -228,6 +228,23 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 Generates a stylesheet for a given style object and selector.
 
+_Usage_
+
+```js
+import { compileCSS } from '@wordpress/style-engine';
+
+// With a selector, a full stylesheet string is returned.
+compileCSS(
+	{ spacing: { padding: '10px', margin: '12px' } },
+	{ selector: '.my-block' }
+);
+// '.my-block { margin: 12px; padding: 10px; }'
+
+// Without a selector, inline declarations are returned.
+compileCSS( { spacing: { padding: '10px', margin: '12px' } } );
+// 'margin: 12px; padding: 10px;'
+```
+
 _Parameters_
 
 -   _style_ `Style`: Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
@@ -241,10 +258,29 @@ _Changelog_
 
 `6.1.0` Introduced in WordPress core.
 
+### GeneratedCSSRule
+
+A single CSS rule produced by `getCSSRules`.
+
 ### getCSSRules
 
 Returns a JSON representation of the generated CSS rules.
 
+_Usage_
+
+```js
+import { getCSSRules } from '@wordpress/style-engine';
+
+getCSSRules(
+	{ spacing: { padding: '10px', margin: '12px' } },
+	{ selector: '.my-block' }
+);
+// [
+//   { selector: '.my-block', key: 'margin', value: '12px' },
+//   { selector: '.my-block', key: 'padding', value: '10px' },
+// ]
+```
+
 _Parameters_
 
 -   _style_ `Style`: Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
@@ -276,6 +312,14 @@ _Returns_
 
 -   `StyleValue`: A CSS custom var value if the incoming style value is a preset value.
 
+### Style
+
+A block or theme style object accepted by `compileCSS` and `getCSSRules`.
+
+### StyleOptions
+
+Options for `compileCSS` and `getCSSRules`.
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Glossary

package/build/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = rules.reduce(\n\t\t( acc: Record< string, GeneratedCSSRule[] >, rule ) => {\n\t\t\tconst { selector } = rule;\n\t\t\tif ( ! selector ) {\n\t\t\t\treturn acc;\n\t\t\t}\n\t\t\tif ( ! acc[ selector ] ) {\n\t\t\t\tacc[ selector ] = [];\n\t\t\t}\n\t\t\tacc[ selector ].push( rule );\n\t\t\treturn acc;\n\t\t},\n\t\t{}\n\t);\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n\n// Export style utils.\nexport { getCSSValueFromRawStyle } from './styles/utils';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAuC;AAWvC,oBAAiC;AAiFjC,mBAAwC;AArEjC,SAAS,WAAY,OAAc,UAAwB,CAAC,GAAY;AAC9E,QAAM,QAAQ,YAAa,OAAO,OAAQ;AAG1C,MAAK,CAAE,SAAS,UAAW;AAC1B,UAAM,cAAwB,CAAC;AAC/B,UAAM,QAAS,CAAE,SAAU;AAC1B,kBAAY,KAAM,OAAI,mBAAAA,WAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM,GAAI;AAAA,IAClE,CAAE;AACF,WAAO,YAAY,KAAM,GAAI;AAAA,EAC9B;AAEA,QAAM,eAAe,MAAM;AAAA,IAC1B,CAAE,KAA2C,SAAU;AACtD,YAAM,EAAE,SAAS,IAAI;AACrB,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,UAAK,CAAE,IAAK,QAAS,GAAI;AACxB,YAAK,QAAS,IAAI,CAAC;AAAA,MACpB;AACA,UAAK,QAAS,EAAE,KAAM,IAAK;AAC3B,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACA,QAAM,gBAAgB,OAAO,KAAM,YAAa,EAAE;AAAA,IACjD,CAAE,KAAe,gBAAyB;AACzC,UAAI;AAAA,QACH,GAAI,WAAY,MAAO,aAAc,WAAY,EAC/C;AAAA,UACA,CAAE,SACD,OAAI,mBAAAA,WAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM;AAAA,QAC7C,EACC,KAAM,GAAI,CAAE;AAAA,MACf;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SAAO,cAAc,KAAM,IAAK;AACjC;AAYO,SAAS,YACf,OACA,UAAwB,CAAC,GACJ;AACrB,QAAM,QAA4B,CAAC;AACnC,iCAAiB,QAAS,CAAE,eAAiC;AAC5D,QAAK,OAAO,WAAW,aAAa,YAAa;AAChD,YAAM,KAAM,GAAG,WAAW,SAAU,OAAO,OAAQ,CAAE;AAAA,IACtD;AAAA,EACD,CAAE;AAEF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * A block or theme style object accepted by `compileCSS` and `getCSSRules`.\n */\nexport type { Style } from './types';\n\n/**\n * Options for `compileCSS` and `getCSSRules`.\n */\nexport type { StyleOptions } from './types';\n\n/**\n * A single CSS rule produced by `getCSSRules`.\n */\nexport type { GeneratedCSSRule } from './types';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @example\n * ```js\n * import { compileCSS } from '@wordpress/style-engine';\n *\n * // With a selector, a full stylesheet string is returned.\n * compileCSS(\n * \t{ spacing: { padding: '10px', margin: '12px' } },\n * \t{ selector: '.my-block' }\n * );\n * // '.my-block { margin: 12px; padding: 10px; }'\n *\n * // Without a selector, inline declarations are returned.\n * compileCSS( { spacing: { padding: '10px', margin: '12px' } } );\n * // 'margin: 12px; padding: 10px;'\n * ```\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = rules.reduce(\n\t\t( acc: Record< string, GeneratedCSSRule[] >, rule ) => {\n\t\t\tconst { selector } = rule;\n\t\t\tif ( ! selector ) {\n\t\t\t\treturn acc;\n\t\t\t}\n\t\t\tif ( ! acc[ selector ] ) {\n\t\t\t\tacc[ selector ] = [];\n\t\t\t}\n\t\t\tacc[ selector ].push( rule );\n\t\t\treturn acc;\n\t\t},\n\t\t{}\n\t);\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @example\n * ```js\n * import { getCSSRules } from '@wordpress/style-engine';\n *\n * getCSSRules(\n * \t{ spacing: { padding: '10px', margin: '12px' } },\n * \t{ selector: '.my-block' }\n * );\n * // [\n * //   { selector: '.my-block', key: 'margin', value: '12px' },\n * //   { selector: '.my-block', key: 'padding', value: '10px' },\n * // ]\n * ```\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n\n// Export style utils.\nexport { getCSSValueFromRawStyle } from './styles/utils';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,yBAAuC;AAWvC,oBAAiC;AA8HjC,mBAAwC;AAnFjC,SAAS,WAAY,OAAc,UAAwB,CAAC,GAAY;AAC9E,QAAM,QAAQ,YAAa,OAAO,OAAQ;AAG1C,MAAK,CAAE,SAAS,UAAW;AAC1B,UAAM,cAAwB,CAAC;AAC/B,UAAM,QAAS,CAAE,SAAU;AAC1B,kBAAY,KAAM,OAAI,mBAAAA,WAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM,GAAI;AAAA,IAClE,CAAE;AACF,WAAO,YAAY,KAAM,GAAI;AAAA,EAC9B;AAEA,QAAM,eAAe,MAAM;AAAA,IAC1B,CAAE,KAA2C,SAAU;AACtD,YAAM,EAAE,SAAS,IAAI;AACrB,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,UAAK,CAAE,IAAK,QAAS,GAAI;AACxB,YAAK,QAAS,IAAI,CAAC;AAAA,MACpB;AACA,UAAK,QAAS,EAAE,KAAM,IAAK;AAC3B,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACA,QAAM,gBAAgB,OAAO,KAAM,YAAa,EAAE;AAAA,IACjD,CAAE,KAAe,gBAAyB;AACzC,UAAI;AAAA,QACH,GAAI,WAAY,MAAO,aAAc,WAAY,EAC/C;AAAA,UACA,CAAE,SACD,OAAI,mBAAAA,WAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM;AAAA,QAC7C,EACC,KAAM,GAAI,CAAE;AAAA,MACf;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SAAO,cAAc,KAAM,IAAK;AACjC;AA0BO,SAAS,YACf,OACA,UAAwB,CAAC,GACJ;AACrB,QAAM,QAA4B,CAAC;AACnC,iCAAiB,QAAS,CAAE,eAAiC;AAC5D,QAAK,OAAO,WAAW,aAAa,YAAa;AAChD,YAAM,KAAM,GAAG,WAAW,SAAU,OAAO,OAAQ,CAAE;AAAA,IACtD;AAAA,EACD,CAAE;AAEF,SAAO;AACR;",
   "names": ["kebabCase"]
 }

package/build/styles/dimensions/index.cjs

@@ -79,5 +79,16 @@ var width = {
     );
   }
 };
-var dimensions_default = [height, minHeight, minWidth, aspectRatio, width];
+var objectFit = {
+  name: "objectFit",
+  generate: (style, options) => {
+    return (0, import_utils.generateRule)(
+      style,
+      options,
+      ["dimensions", "objectFit"],
+      "objectFit"
+    );
+  }
+};
+var dimensions_default = [height, minHeight, minWidth, aspectRatio, width, objectFit];
 //# sourceMappingURL=index.cjs.map

package/build/styles/dimensions/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/dimensions/index.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst height = {\n\tname: 'height',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'height' ],\n\t\t\t'height'\n\t\t);\n\t},\n};\n\nconst minHeight = {\n\tname: 'minHeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minHeight' ],\n\t\t\t'minHeight'\n\t\t);\n\t},\n};\n\nconst minWidth = {\n\tname: 'minWidth',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minWidth' ],\n\t\t\t'minWidth'\n\t\t);\n\t},\n};\n\nconst aspectRatio = {\n\tname: 'aspectRatio',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'aspectRatio' ],\n\t\t\t'aspectRatio'\n\t\t);\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'width' ],\n\t\t\t'width'\n\t\t);\n\t},\n};\n\nexport default [ height, minHeight, minWidth, aspectRatio, width ];\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAA6B;AAE7B,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,QAAS;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,UAAW;AAAA,MAC3B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,cAAc;AAAA,EACnB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,aAAc;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,QAAQ;AAAA,EACb,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,OAAQ;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ,CAAE,QAAQ,WAAW,UAAU,aAAa,KAAM;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst height = {\n\tname: 'height',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'height' ],\n\t\t\t'height'\n\t\t);\n\t},\n};\n\nconst minHeight = {\n\tname: 'minHeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minHeight' ],\n\t\t\t'minHeight'\n\t\t);\n\t},\n};\n\nconst minWidth = {\n\tname: 'minWidth',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minWidth' ],\n\t\t\t'minWidth'\n\t\t);\n\t},\n};\n\nconst aspectRatio = {\n\tname: 'aspectRatio',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'aspectRatio' ],\n\t\t\t'aspectRatio'\n\t\t);\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'width' ],\n\t\t\t'width'\n\t\t);\n\t},\n};\n\nconst objectFit = {\n\tname: 'objectFit',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'objectFit' ],\n\t\t\t'objectFit'\n\t\t);\n\t},\n};\n\nexport default [ height, minHeight, minWidth, aspectRatio, width, objectFit ];\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAA6B;AAE7B,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,QAAS;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,UAAW;AAAA,MAC3B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,cAAc;AAAA,EACnB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,aAAc;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,QAAQ;AAAA,EACb,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,OAAQ;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ,CAAE,QAAQ,WAAW,UAAU,aAAa,OAAO,SAAU;",
   "names": []
 }

package/build/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t\tgradient?: CSSProperties[ 'backgroundImage' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t  };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\tminWidth?: CSSProperties[ 'minWidth' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\n/**\n * A style object — for example a block's `attributes.style` or the top-level\n * styles in `theme.json`. Groups visual style properties such as color,\n * typography, spacing, dimensions, borders, backgrounds and element styles,\n * and is the input `compileCSS` and `getCSSRules` turn into CSS.\n */\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t\tgradient?: CSSProperties[ 'backgroundImage' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t  };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\tminWidth?: CSSProperties[ 'minWidth' ];\n\t\tobjectFit?: CSSProperties[ 'objectFit' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\n/**\n * Options that adjust how styles are generated — notably the CSS `selector` to\n * scope the output to. With no selector, declarations are returned inline.\n */\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\n/**\n * A single generated CSS rule: an optional `selector`, the `value`, and the\n * `key` in React/JS style-attribute format (e.g. `paddingTop` rather than\n * `padding-top`).\n */\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build-module/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = rules.reduce(\n\t\t( acc: Record< string, GeneratedCSSRule[] >, rule ) => {\n\t\t\tconst { selector } = rule;\n\t\t\tif ( ! selector ) {\n\t\t\t\treturn acc;\n\t\t\t}\n\t\t\tif ( ! acc[ selector ] ) {\n\t\t\t\tacc[ selector ] = [];\n\t\t\t}\n\t\t\tacc[ selector ].push( rule );\n\t\t\treturn acc;\n\t\t},\n\t\t{}\n\t);\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n\n// Export style utils.\nexport { getCSSValueFromRawStyle } from './styles/utils';\n"],
-  "mappings": ";AAGA,SAAS,aAAa,iBAAiB;AAWvC,SAAS,wBAAwB;AAiFjC,SAAS,+BAA+B;AArEjC,SAAS,WAAY,OAAc,UAAwB,CAAC,GAAY;AAC9E,QAAM,QAAQ,YAAa,OAAO,OAAQ;AAG1C,MAAK,CAAE,SAAS,UAAW;AAC1B,UAAM,cAAwB,CAAC;AAC/B,UAAM,QAAS,CAAE,SAAU;AAC1B,kBAAY,KAAM,GAAI,UAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM,GAAI;AAAA,IAClE,CAAE;AACF,WAAO,YAAY,KAAM,GAAI;AAAA,EAC9B;AAEA,QAAM,eAAe,MAAM;AAAA,IAC1B,CAAE,KAA2C,SAAU;AACtD,YAAM,EAAE,SAAS,IAAI;AACrB,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,UAAK,CAAE,IAAK,QAAS,GAAI;AACxB,YAAK,QAAS,IAAI,CAAC;AAAA,MACpB;AACA,UAAK,QAAS,EAAE,KAAM,IAAK;AAC3B,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACA,QAAM,gBAAgB,OAAO,KAAM,YAAa,EAAE;AAAA,IACjD,CAAE,KAAe,gBAAyB;AACzC,UAAI;AAAA,QACH,GAAI,WAAY,MAAO,aAAc,WAAY,EAC/C;AAAA,UACA,CAAE,SACD,GAAI,UAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM;AAAA,QAC7C,EACC,KAAM,GAAI,CAAE;AAAA,MACf;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SAAO,cAAc,KAAM,IAAK;AACjC;AAYO,SAAS,YACf,OACA,UAAwB,CAAC,GACJ;AACrB,QAAM,QAA4B,CAAC;AACnC,mBAAiB,QAAS,CAAE,eAAiC;AAC5D,QAAK,OAAO,WAAW,aAAa,YAAa;AAChD,YAAM,KAAM,GAAG,WAAW,SAAU,OAAO,OAAQ,CAAE;AAAA,IACtD;AAAA,EACD,CAAE;AAEF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * A block or theme style object accepted by `compileCSS` and `getCSSRules`.\n */\nexport type { Style } from './types';\n\n/**\n * Options for `compileCSS` and `getCSSRules`.\n */\nexport type { StyleOptions } from './types';\n\n/**\n * A single CSS rule produced by `getCSSRules`.\n */\nexport type { GeneratedCSSRule } from './types';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @example\n * ```js\n * import { compileCSS } from '@wordpress/style-engine';\n *\n * // With a selector, a full stylesheet string is returned.\n * compileCSS(\n * \t{ spacing: { padding: '10px', margin: '12px' } },\n * \t{ selector: '.my-block' }\n * );\n * // '.my-block { margin: 12px; padding: 10px; }'\n *\n * // Without a selector, inline declarations are returned.\n * compileCSS( { spacing: { padding: '10px', margin: '12px' } } );\n * // 'margin: 12px; padding: 10px;'\n * ```\n *\n * @return A generated stylesheet or inline style declarations.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = rules.reduce(\n\t\t( acc: Record< string, GeneratedCSSRule[] >, rule ) => {\n\t\t\tconst { selector } = rule;\n\t\t\tif ( ! selector ) {\n\t\t\t\treturn acc;\n\t\t\t}\n\t\t\tif ( ! acc[ selector ] ) {\n\t\t\t\tacc[ selector ] = [];\n\t\t\t}\n\t\t\tacc[ selector ].push( rule );\n\t\t\treturn acc;\n\t\t},\n\t\t{}\n\t);\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @since 6.1.0 Introduced in WordPress core.\n *\n * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @example\n * ```js\n * import { getCSSRules } from '@wordpress/style-engine';\n *\n * getCSSRules(\n * \t{ spacing: { padding: '10px', margin: '12px' } },\n * \t{ selector: '.my-block' }\n * );\n * // [\n * //   { selector: '.my-block', key: 'margin', value: '12px' },\n * //   { selector: '.my-block', key: 'padding', value: '10px' },\n * // ]\n * ```\n *\n * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n\n// Export style utils.\nexport { getCSSValueFromRawStyle } from './styles/utils';\n"],
+  "mappings": ";AAGA,SAAS,aAAa,iBAAiB;AAWvC,SAAS,wBAAwB;AA8HjC,SAAS,+BAA+B;AAnFjC,SAAS,WAAY,OAAc,UAAwB,CAAC,GAAY;AAC9E,QAAM,QAAQ,YAAa,OAAO,OAAQ;AAG1C,MAAK,CAAE,SAAS,UAAW;AAC1B,UAAM,cAAwB,CAAC;AAC/B,UAAM,QAAS,CAAE,SAAU;AAC1B,kBAAY,KAAM,GAAI,UAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM,GAAI;AAAA,IAClE,CAAE;AACF,WAAO,YAAY,KAAM,GAAI;AAAA,EAC9B;AAEA,QAAM,eAAe,MAAM;AAAA,IAC1B,CAAE,KAA2C,SAAU;AACtD,YAAM,EAAE,SAAS,IAAI;AACrB,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,UAAK,CAAE,IAAK,QAAS,GAAI;AACxB,YAAK,QAAS,IAAI,CAAC;AAAA,MACpB;AACA,UAAK,QAAS,EAAE,KAAM,IAAK;AAC3B,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACA,QAAM,gBAAgB,OAAO,KAAM,YAAa,EAAE;AAAA,IACjD,CAAE,KAAe,gBAAyB;AACzC,UAAI;AAAA,QACH,GAAI,WAAY,MAAO,aAAc,WAAY,EAC/C;AAAA,UACA,CAAE,SACD,GAAI,UAAW,KAAK,GAAI,CAAE,KAAM,KAAK,KAAM;AAAA,QAC7C,EACC,KAAM,GAAI,CAAE;AAAA,MACf;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SAAO,cAAc,KAAM,IAAK;AACjC;AA0BO,SAAS,YACf,OACA,UAAwB,CAAC,GACJ;AACrB,QAAM,QAA4B,CAAC;AACnC,mBAAiB,QAAS,CAAE,eAAiC;AAC5D,QAAK,OAAO,WAAW,aAAa,YAAa;AAChD,YAAM,KAAM,GAAG,WAAW,SAAU,OAAO,OAAQ,CAAE;AAAA,IACtD;AAAA,EACD,CAAE;AAEF,SAAO;AACR;",
   "names": []
 }

package/build-module/styles/dimensions/index.mjs

@@ -55,7 +55,18 @@ var width = {
     );
   }
 };
-var dimensions_default = [height, minHeight, minWidth, aspectRatio, width];
+var objectFit = {
+  name: "objectFit",
+  generate: (style, options) => {
+    return generateRule(
+      style,
+      options,
+      ["dimensions", "objectFit"],
+      "objectFit"
+    );
+  }
+};
+var dimensions_default = [height, minHeight, minWidth, aspectRatio, width, objectFit];
 export {
   dimensions_default as default
 };

package/build-module/styles/dimensions/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/dimensions/index.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst height = {\n\tname: 'height',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'height' ],\n\t\t\t'height'\n\t\t);\n\t},\n};\n\nconst minHeight = {\n\tname: 'minHeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minHeight' ],\n\t\t\t'minHeight'\n\t\t);\n\t},\n};\n\nconst minWidth = {\n\tname: 'minWidth',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minWidth' ],\n\t\t\t'minWidth'\n\t\t);\n\t},\n};\n\nconst aspectRatio = {\n\tname: 'aspectRatio',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'aspectRatio' ],\n\t\t\t'aspectRatio'\n\t\t);\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'width' ],\n\t\t\t'width'\n\t\t);\n\t},\n};\n\nexport default [ height, minHeight, minWidth, aspectRatio, width ];\n"],
-  "mappings": ";AAIA,SAAS,oBAAoB;AAE7B,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,QAAS;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,UAAW;AAAA,MAC3B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,cAAc;AAAA,EACnB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,aAAc;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,QAAQ;AAAA,EACb,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,OAAQ;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ,CAAE,QAAQ,WAAW,UAAU,aAAa,KAAM;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst height = {\n\tname: 'height',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'height' ],\n\t\t\t'height'\n\t\t);\n\t},\n};\n\nconst minHeight = {\n\tname: 'minHeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minHeight' ],\n\t\t\t'minHeight'\n\t\t);\n\t},\n};\n\nconst minWidth = {\n\tname: 'minWidth',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minWidth' ],\n\t\t\t'minWidth'\n\t\t);\n\t},\n};\n\nconst aspectRatio = {\n\tname: 'aspectRatio',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'aspectRatio' ],\n\t\t\t'aspectRatio'\n\t\t);\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'width' ],\n\t\t\t'width'\n\t\t);\n\t},\n};\n\nconst objectFit = {\n\tname: 'objectFit',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'objectFit' ],\n\t\t\t'objectFit'\n\t\t);\n\t},\n};\n\nexport default [ height, minHeight, minWidth, aspectRatio, width, objectFit ];\n"],
+  "mappings": ";AAIA,SAAS,oBAAoB;AAE7B,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,QAAS;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,UAAW;AAAA,MAC3B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,cAAc;AAAA,EACnB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,aAAc;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,QAAQ;AAAA,EACb,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,OAAQ;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ,CAAE,QAAQ,WAAW,UAAU,aAAa,OAAO,SAAU;",
   "names": []
 }

package/build-types/index.d.ts

@@ -2,6 +2,18 @@
  * Internal dependencies
  */
 import type { Style, StyleOptions, GeneratedCSSRule } from './types';
+/**
+ * A block or theme style object accepted by `compileCSS` and `getCSSRules`.
+ */
+export type { Style } from './types';
+/**
+ * Options for `compileCSS` and `getCSSRules`.
+ */
+export type { StyleOptions } from './types';
+/**
+ * A single CSS rule produced by `getCSSRules`.
+ */
+export type { GeneratedCSSRule } from './types';
 /**
  * Generates a stylesheet for a given style object and selector.
  *
@@ -10,6 +22,22 @@ import type { Style, StyleOptions, GeneratedCSSRule } from './types';
  * @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.
  *
+ * @example
+ * ```js
+ * import { compileCSS } from '@wordpress/style-engine';
+ *
+ * // With a selector, a full stylesheet string is returned.
+ * compileCSS(
+ * 	{ spacing: { padding: '10px', margin: '12px' } },
+ * 	{ selector: '.my-block' }
+ * );
+ * // '.my-block { margin: 12px; padding: 10px; }'
+ *
+ * // Without a selector, inline declarations are returned.
+ * compileCSS( { spacing: { padding: '10px', margin: '12px' } } );
+ * // 'margin: 12px; padding: 10px;'
+ * ```
+ *
  * @return A generated stylesheet or inline style declarations.
  */
 export declare function compileCSS(style: Style, options?: StyleOptions): string;
@@ -21,6 +49,20 @@ export declare function compileCSS(style: Style, options?: StyleOptions): string
  * @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.
  *
+ * @example
+ * ```js
+ * import { getCSSRules } from '@wordpress/style-engine';
+ *
+ * getCSSRules(
+ * 	{ spacing: { padding: '10px', margin: '12px' } },
+ * 	{ selector: '.my-block' }
+ * );
+ * // [
+ * //   { selector: '.my-block', key: 'margin', value: '12px' },
+ * //   { selector: '.my-block', key: 'padding', value: '10px' },
+ * // ]
+ * ```
+ *
  * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  */
 export declare function getCSSRules(style: Style, options?: StyleOptions): GeneratedCSSRule[];

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

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

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

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/color/background.d.ts

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const background: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 };
 export default background;
 //# sourceMappingURL=background.d.ts.map

package/build-types/styles/color/gradient.d.ts

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const gradient: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 };
 export default gradient;
 //# sourceMappingURL=gradient.d.ts.map

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

@@ -1,6 +1,6 @@
 declare const _default: {
     name: string;
-    generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: import("../..").Style, options: import("../..").StyleOptions) => import("../..").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/color/text.d.ts

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const text: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 };
 export default text;
 //# sourceMappingURL=text.d.ts.map

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

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,6 +1,6 @@
 declare const _default: {
     name: string;
-    generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: import("../..").Style, options: import("../..").StyleOptions) => import("../..").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/spacing/margin.d.ts

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const margin: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 };
 export default margin;
 //# sourceMappingURL=margin.d.ts.map

package/build-types/styles/spacing/padding.d.ts

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const padding: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 };
 export default padding;
 //# sourceMappingURL=padding.d.ts.map

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

@@ -4,7 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
+    generate: (style: Style, options: StyleOptions) => import("../..").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build-types/types.d.ts

@@ -15,6 +15,12 @@ export interface BorderIndividualStyles<T extends BoxEdge> {
     style?: CSSProperties[`border${Capitalize<T>}Style`];
     width?: CSSProperties[`border${Capitalize<T>}Width`];
 }
+/**
+ * A style object — for example a block's `attributes.style` or the top-level
+ * styles in `theme.json`. Groups visual style properties such as color,
+ * typography, spacing, dimensions, borders, backgrounds and element styles,
+ * and is the input `compileCSS` and `getCSSRules` turn into CSS.
+ */
 export interface Style {
     background?: {
         backgroundImage?: {
@@ -46,6 +52,7 @@ export interface Style {
         height?: CSSProperties['height'];
         minHeight?: CSSProperties['minHeight'];
         minWidth?: CSSProperties['minWidth'];
+        objectFit?: CSSProperties['objectFit'];
         width?: CSSProperties['width'];
     };
     spacing?: {
@@ -81,12 +88,21 @@ export interface CssRulesKeys {
     default: string;
     individual: string;
 }
+/**
+ * Options that adjust how styles are generated — notably the CSS `selector` to
+ * scope the output to. With no selector, declarations are returned inline.
+ */
 export interface StyleOptions {
     /**
      * CSS selector for the generated style.
      */
     selector?: string;
 }
+/**
+ * A single generated CSS rule: an optional `selector`, the `value`, and the
+ * `key` in React/JS style-attribute format (e.g. `paddingTop` rather than
+ * `padding-top`).
+ */
 export interface GeneratedCSSRule {
     selector?: string;
     value: string | unknown;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AACvC,MAAM,WAAW,GAAG,CAAE,CAAC,SAAS,UAAU,GAAG,SAAS,GAAG,SAAS;IACjE,GAAG,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,GAAI,CAAE,KAAK,CAAE,CAAC;IACjE,KAAK,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,OAAO,GAAG,GAAI,CAAE,OAAO,CAAE,CAAC;IACvE,MAAM,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,QAAQ,GAAG,GAAI,CAAE,QAAQ,CAAE,CAAC;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,MAAM,GAAG,GAAI,CAAE,MAAM,CAAE,CAAC;CACpE;AAED,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAG1D,MAAM,WAAW,sBAAsB,CAAE,CAAC,SAAS,OAAO;IACzD,KAAK,CAAC,EAAE,aAAa,CAAE,SAAU,UAAU,CAAE,CAAC,CAAG,OAAO,CAAE,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAE,SAAU,UAAU,CAAE,CAAC,CAAG,OAAO,CAAE,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAE,SAAU,UAAU,CAAE,CAAC,CAAG,OAAO,CAAE,CAAC;CAC3D;AAED;;;;;GAKG;AACH,MAAM,WAAW,KAAK;IACrB,UAAU,CAAC,EAAE;QACZ,eAAe,CAAC,EACb;YAAE,GAAG,CAAC,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,GAC7D,aAAa,CAAE,iBAAiB,CAAE,CAAC;QACtC,kBAAkB,CAAC,EAAE,aAAa,CAAE,oBAAoB,CAAE,CAAC;QAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;QACvD,cAAc,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;QACnD,QAAQ,CAAC,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;KAC9C,CAAC;IACF,MAAM,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;QACvC,MAAM,CAAC,EACJ,aAAa,CAAE,cAAc,CAAE,GAC/B;YACA,OAAO,CAAC,EAAE,aAAa,CAAE,qBAAqB,CAAE,CAAC;YACjD,QAAQ,CAAC,EAAE,aAAa,CAAE,sBAAsB,CAAE,CAAC;YACnD,UAAU,CAAC,EAAE,aAAa,CAAE,wBAAwB,CAAE,CAAC;YACvD,WAAW,CAAC,EAAE,aAAa,CAAE,wBAAwB,CAAE,CAAC;SACvD,CAAC;QACL,KAAK,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;QACvC,KAAK,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;QACvC,GAAG,CAAC,EAAE,sBAAsB,CAAE,KAAK,CAAE,CAAC;QACtC,KAAK,CAAC,EAAE,sBAAsB,CAAE,OAAO,CAAE,CAAC;QAC1C,MAAM,CAAC,EAAE,sBAAsB,CAAE,QAAQ,CAAE,CAAC;QAC5C,IAAI,CAAC,EAAE,sBAAsB,CAAE,MAAM,CAAE,CAAC;KACxC,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;QAC7C,MAAM,CAAC,EAAE,aAAa,CAAE,QAAQ,CAAE,CAAC;QACnC,SAAS,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;QACzC,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;QACvC,SAAS,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;QACzC,KAAK,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;KACjC,CAAC;IACF,OAAO,CAAC,EAAE;QACT,MAAM,CAAC,EAAE,aAAa,CAAE,QAAQ,CAAE,GAAG,GAAG,CAAE,QAAQ,CAAE,CAAC;QACrD,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,GAAG,GAAG,CAAE,SAAS,CAAE,CAAC;KACxD,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;QACvC,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,SAAS,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;QACzC,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;QACjD,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,WAAW,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;QAC7C,cAAc,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;QACnD,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;QACjD,WAAW,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;KAC7C,CAAC;IACF,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;QAChC,UAAU,CAAC,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;QAChD,QAAQ,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;KACzC,CAAC;IACF,QAAQ,CAAC,EAAE;QACV,IAAI,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACP,IAAI,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;aAChC,CAAC;SACF,CAAC;KACF,CAAC;CACF;AAED,MAAM,WAAW,YAAY;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,gBAAgB;IAChC,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,GAAI,gBAAgB,EAAE,CAAC;CAC5D;AAED,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.48.0",
+	"version": "2.49.1-next.v.202606191442.0+17fe7db8a",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,7 +41,6 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"wpCopyFiles": {
 		"files": [
@@ -67,8 +66,16 @@
 	"dependencies": {
 		"change-case": "^4.1.2"
 	},
+	"peerDependencies": {
+		"@types/react": "^18.3.27"
+	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

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

@@ -237,6 +237,12 @@ if ( ! class_exists( 'WP_Style_Engine' ) ) {
 						'dimension' => '--wp--preset--dimension--$slug',
 					),
 				),
+				'objectFit'   => array(
+					'property_keys' => array(
+						'default' => 'object-fit',
+					),
+					'path'          => array( 'dimensions', 'objectFit' ),
+				),
 				'width'       => array(
 					'property_keys' => array(
 						'default' => 'width',

package/src/index.ts

@@ -14,6 +14,21 @@ import type {
 } from './types';
 import { styleDefinitions } from './styles';
 
+/**
+ * A block or theme style object accepted by `compileCSS` and `getCSSRules`.
+ */
+export type { Style } from './types';
+
+/**
+ * Options for `compileCSS` and `getCSSRules`.
+ */
+export type { StyleOptions } from './types';
+
+/**
+ * A single CSS rule produced by `getCSSRules`.
+ */
+export type { GeneratedCSSRule } from './types';
+
 /**
  * Generates a stylesheet for a given style object and selector.
  *
@@ -22,6 +37,22 @@ import { styleDefinitions } from './styles';
  * @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.
  *
+ * @example
+ * ```js
+ * import { compileCSS } from '@wordpress/style-engine';
+ *
+ * // With a selector, a full stylesheet string is returned.
+ * compileCSS(
+ * 	{ spacing: { padding: '10px', margin: '12px' } },
+ * 	{ selector: '.my-block' }
+ * );
+ * // '.my-block { margin: 12px; padding: 10px; }'
+ *
+ * // Without a selector, inline declarations are returned.
+ * compileCSS( { spacing: { padding: '10px', margin: '12px' } } );
+ * // 'margin: 12px; padding: 10px;'
+ * ```
+ *
  * @return A generated stylesheet or inline style declarations.
  */
 export function compileCSS( style: Style, options: StyleOptions = {} ): string {
@@ -76,6 +107,20 @@ export function compileCSS( style: Style, options: StyleOptions = {} ): string {
  * @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.
  *
+ * @example
+ * ```js
+ * import { getCSSRules } from '@wordpress/style-engine';
+ *
+ * getCSSRules(
+ * 	{ spacing: { padding: '10px', margin: '12px' } },
+ * 	{ selector: '.my-block' }
+ * );
+ * // [
+ * //   { selector: '.my-block', key: 'margin', value: '12px' },
+ * //   { selector: '.my-block', key: 'padding', value: '10px' },
+ * // ]
+ * ```
+ *
  * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  */
 export function getCSSRules(

package/src/styles/dimensions/index.ts

@@ -64,4 +64,16 @@ const width = {
 	},
 };
 
-export default [ height, minHeight, minWidth, aspectRatio, width ];
+const objectFit = {
+	name: 'objectFit',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'dimensions', 'objectFit' ],
+			'objectFit'
+		);
+	},
+};
+
+export default [ height, minHeight, minWidth, aspectRatio, width, objectFit ];

package/src/test/index.js

@@ -57,6 +57,7 @@ describe( 'generate', () => {
 					dimensions: {
 						minHeight: '50vh',
 						minWidth: '25vw',
+						objectFit: 'cover',
 					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
@@ -90,7 +91,7 @@ describe( 'generate', () => {
 				}
 			)
 		).toEqual(
-			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; min-width: 25vw; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; column-count: 2; text-decoration: line-through; text-transform: uppercase; }"
+			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; min-width: 25vw; object-fit: cover; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; column-count: 2; text-decoration: line-through; text-transform: uppercase; }"
 		);
 	} );
 

package/src/types.ts

@@ -20,6 +20,12 @@ export interface BorderIndividualStyles< T extends BoxEdge > {
 	width?: CSSProperties[ `border${ Capitalize< T > }Width` ];
 }
 
+/**
+ * A style object — for example a block's `attributes.style` or the top-level
+ * styles in `theme.json`. Groups visual style properties such as color,
+ * typography, spacing, dimensions, borders, backgrounds and element styles,
+ * and is the input `compileCSS` and `getCSSRules` turn into CSS.
+ */
 export interface Style {
 	background?: {
 		backgroundImage?:
@@ -52,6 +58,7 @@ export interface Style {
 		height?: CSSProperties[ 'height' ];
 		minHeight?: CSSProperties[ 'minHeight' ];
 		minWidth?: CSSProperties[ 'minWidth' ];
+		objectFit?: CSSProperties[ 'objectFit' ];
 		width?: CSSProperties[ 'width' ];
 	};
 	spacing?: {
@@ -89,6 +96,10 @@ export interface CssRulesKeys {
 	individual: string;
 }
 
+/**
+ * Options that adjust how styles are generated — notably the CSS `selector` to
+ * scope the output to. With no selector, declarations are returned inline.
+ */
 export interface StyleOptions {
 	/**
 	 * CSS selector for the generated style.
@@ -96,6 +107,11 @@ export interface StyleOptions {
 	selector?: string;
 }
 
+/**
+ * A single generated CSS rule: an optional `selector`, the `value`, and the
+ * `key` in React/JS style-attribute format (e.g. `paddingTop` rather than
+ * `padding-top`).
+ */
 export interface GeneratedCSSRule {
 	selector?: string;
 	value: string | unknown;