@wordpress/style-engine 2.32.0 → 2.32.1-next.47f435fc9.0

package/build-module/styles/utils.js

@@ -1,163 +1,107 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-
-/**
- * Internal dependencies
- */
-
-import { VARIABLE_REFERENCE_PREFIX, VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE, VARIABLE_PATH_SEPARATOR_TOKEN_STYLE } from './constants';
-
-/**
- * Helper util to return a value from a certain path of the object.
- * Path is specified as an array of properties, like `[ 'x', 'y' ]`.
- *
- * @param object Input object.
- * @param path   Path to the object property.
- * @return Value of the object property at the specified path.
- */
-export const getStyleValueByPath = (object, path) => {
+import { paramCase as kebabCase } from "change-case";
+import {
+  VARIABLE_REFERENCE_PREFIX,
+  VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
+  VARIABLE_PATH_SEPARATOR_TOKEN_STYLE
+} from "./constants";
+const getStyleValueByPath = (object, path) => {
   let value = object;
-  path.forEach(fieldName => {
+  path.forEach((fieldName) => {
     value = value?.[fieldName];
   });
   return value;
 };
-
-/**
- * Returns a JSON representation of the generated CSS 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 ruleKey A CSS property key.
- *
- * @return GeneratedCSSRule[] CSS rules.
- */
-export function generateRule(style, options, path, ruleKey) {
+function generateRule(style, options, path, ruleKey) {
   const styleValue = getStyleValueByPath(style, path);
-  return styleValue ? [{
-    selector: options?.selector,
-    key: ruleKey,
-    value: getCSSValueFromRawStyle(styleValue)
-  }] : [];
+  return styleValue ? [
+    {
+      selector: options?.selector,
+      key: ruleKey,
+      value: getCSSValueFromRawStyle(styleValue)
+    }
+  ] : [];
 }
-
-/**
- * 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.
- *
- * @return GeneratedCSSRule[]  CSS rules.
- */
-export function generateBoxRules(style, options, path, ruleKeys, individualProperties = ['top', 'right', 'bottom', 'left']) {
-  const boxStyle = getStyleValueByPath(style, path);
+function generateBoxRules(style, options, path, ruleKeys, individualProperties = ["top", "right", "bottom", "left"]) {
+  const boxStyle = getStyleValueByPath(
+    style,
+    path
+  );
   if (!boxStyle) {
     return [];
   }
   const rules = [];
-  if (typeof boxStyle === 'string') {
+  if (typeof boxStyle === "string") {
     rules.push({
       selector: options?.selector,
       key: ruleKeys.default,
       value: getCSSValueFromRawStyle(boxStyle)
     });
   } else {
-    const sideRules = individualProperties.reduce((acc, side) => {
-      const value = getCSSValueFromRawStyle(getStyleValueByPath(boxStyle, [side]));
-      if (value) {
-        acc.push({
-          selector: options?.selector,
-          key: ruleKeys?.individual.replace('%s', upperFirst(side)),
-          value
-        });
-      }
-      return acc;
-    }, []);
+    const sideRules = individualProperties.reduce(
+      (acc, side) => {
+        const value = getCSSValueFromRawStyle(
+          getStyleValueByPath(boxStyle, [side])
+        );
+        if (value) {
+          acc.push({
+            selector: options?.selector,
+            key: ruleKeys?.individual.replace(
+              "%s",
+              upperFirst(side)
+            ),
+            value
+          });
+        }
+        return acc;
+      },
+      []
+    );
     rules.push(...sideRules);
   }
   return rules;
 }
-
-/**
- * Returns a WordPress CSS custom var value from incoming style preset value,
- * if one is detected.
- *
- * The preset value is a string and follows the pattern `var:description|context|slug`.
- *
- * Example:
- *
- * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
- *
- * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.
- *
- * @return A CSS custom var value if the incoming style value is a preset value.
- */
-
-export function getCSSValueFromRawStyle(styleValue) {
-  if (typeof styleValue === 'string' && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
-    const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => kebabCase(presetVariable, {
-      splitRegexp: [/([a-z0-9])([A-Z])/g,
-      // fooBar => foo-bar, 3Bar => 3-bar
-      /([0-9])([a-z])/g,
-      // 3bar => 3-bar
-      /([A-Za-z])([0-9])/g,
-      // Foo3 => foo-3, foo3 => foo-3
-      /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar
-      ]
-    })).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
+function getCSSValueFromRawStyle(styleValue) {
+  if (typeof styleValue === "string" && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
+    const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(
+      (presetVariable) => kebabCase(presetVariable, {
+        splitRegexp: [
+          /([a-z0-9])([A-Z])/g,
+          // fooBar => foo-bar, 3Bar => 3-bar
+          /([0-9])([a-z])/g,
+          // 3bar => 3-bar
+          /([A-Za-z])([0-9])/g,
+          // Foo3 => foo-3, foo3 => foo-3
+          /([A-Z])([A-Z][a-z])/g
+          // FOOBar => foo-bar
+        ]
+      })
+    ).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
     return `var(--wp--${variable})`;
   }
   return styleValue;
 }
-
-/**
- * Capitalizes the first letter in a string.
- *
- * @param string The string whose first letter the function will capitalize.
- *
- * @return String with the first letter capitalized.
- */
-export function upperFirst(string) {
+function upperFirst(string) {
   const [firstLetter, ...rest] = string;
-  return firstLetter.toUpperCase() + rest.join('');
+  return firstLetter.toUpperCase() + rest.join("");
 }
-
-/**
- * Converts an array of strings into a camelCase string.
- *
- * @param strings The strings to join into a camelCase string.
- *
- * @return camelCase string.
- */
-export function camelCaseJoin(strings) {
+function camelCaseJoin(strings) {
   const [firstItem, ...rest] = strings;
-  return firstItem.toLowerCase() + rest.map(upperFirst).join('');
+  return firstItem.toLowerCase() + rest.map(upperFirst).join("");
 }
-
-/**
- * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if
- * `decodeURI` throws an error.
- *
- * @param {string} uri URI to decode.
- *
- * @example
- * ```js
- * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'
- * ```
- *
- * @return {string} Decoded URI if possible.
- */
-export function safeDecodeURI(uri) {
+function safeDecodeURI(uri) {
   try {
     return decodeURI(uri);
   } catch (uriError) {
     return uri;
   }
 }
-//# sourceMappingURL=utils.js.map
+export {
+  camelCaseJoin,
+  generateBoxRules,
+  generateRule,
+  getCSSValueFromRawStyle,
+  getStyleValueByPath,
+  safeDecodeURI,
+  upperFirst
+};
+//# sourceMappingURL=utils.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["paramCase","kebabCase","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","getStyleValueByPath","object","path","value","forEach","fieldName","generateRule","style","options","ruleKey","styleValue","selector","key","getCSSValueFromRawStyle","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","map","presetVariable","splitRegexp","join","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase","safeDecodeURI","uri","decodeURI","uriError"],"sources":["@wordpress/style-engine/src/styles/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * Helper util to return a value from a certain path of the object.\n * Path is specified as an array of properties, like `[ 'x', 'y' ]`.\n *\n * @param object Input object.\n * @param path   Path to the object property.\n * @return Value of the object property at the specified path.\n */\nexport const getStyleValueByPath = (\n\tobject: Record< any, any >,\n\tpath: string[]\n) => {\n\tlet value: any = object;\n\tpath.forEach( ( fieldName: string ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value;\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 * @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): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = getStyleValueByPath( 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: getCSSValueFromRawStyle( 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 = getStyleValueByPath(\n\t\tstyle,\n\t\tpath\n\t);\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: getCSSValueFromRawStyle( 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 = getCSSValueFromRawStyle(\n\t\t\t\t\tgetStyleValueByPath( 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 WordPress CSS custom var value from incoming style preset value,\n * if one is detected.\n *\n * The preset value is a string and follows the pattern `var:description|context|slug`.\n *\n * Example:\n *\n * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'\n *\n * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.\n *\n * @return A CSS custom var value if the incoming style value is a preset value.\n */\n\nexport function getCSSValueFromRawStyle< StyleValue = string >(\n\tstyleValue: StyleValue\n): StyleValue {\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.map( ( presetVariable ) =>\n\t\t\t\tkebabCase( presetVariable, {\n\t\t\t\t\tsplitRegexp: [\n\t\t\t\t\t\t/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t\t\t\t/([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t\t\t\t],\n\t\t\t\t} )\n\t\t\t)\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })` as StyleValue;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n\n/**\n * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if\n * `decodeURI` throws an error.\n *\n * @param {string} uri URI to decode.\n *\n * @example\n * ```js\n * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'\n * ```\n *\n * @return {string} Decoded URI if possible.\n */\nexport function safeDecodeURI( uri: string ): string {\n\ttry {\n\t\treturn decodeURI( uri );\n\t} catch ( uriError ) {\n\t\treturn uri;\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/styles/utils.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\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 * Helper util to return a value from a certain path of the object.\n * Path is specified as an array of properties, like `[ 'x', 'y' ]`.\n *\n * @param object Input object.\n * @param path   Path to the object property.\n * @return Value of the object property at the specified path.\n */\nexport const getStyleValueByPath = (\n\tobject: Record< any, any >,\n\tpath: string[]\n) => {\n\tlet value: any = object;\n\tpath.forEach( ( fieldName: string ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value;\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 * @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): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = getStyleValueByPath( 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: getCSSValueFromRawStyle( 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 = getStyleValueByPath(\n\t\tstyle,\n\t\tpath\n\t);\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: getCSSValueFromRawStyle( 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 = getCSSValueFromRawStyle(\n\t\t\t\t\tgetStyleValueByPath( 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 WordPress CSS custom var value from incoming style preset value,\n * if one is detected.\n *\n * The preset value is a string and follows the pattern `var:description|context|slug`.\n *\n * Example:\n *\n * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'\n *\n * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.\n *\n * @return A CSS custom var value if the incoming style value is a preset value.\n */\n\nexport function getCSSValueFromRawStyle< StyleValue = string >(\n\tstyleValue: StyleValue\n): StyleValue {\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.map( ( presetVariable ) =>\n\t\t\t\tkebabCase( presetVariable, {\n\t\t\t\t\tsplitRegexp: [\n\t\t\t\t\t\t/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t\t\t\t/([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t\t\t\t],\n\t\t\t\t} )\n\t\t\t)\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })` as StyleValue;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n\n/**\n * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if\n * `decodeURI` throws an error.\n *\n * @param {string} uri URI to decode.\n *\n * @example\n * ```js\n * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'\n * ```\n *\n * @return {string} Decoded URI if possible.\n */\nexport function safeDecodeURI( uri: string ): string {\n\ttry {\n\t\treturn decodeURI( uri );\n\t} catch ( uriError ) {\n\t\treturn uri;\n\t}\n}\n"],
+  "mappings": "AAGA,SAAS,aAAa,iBAAiB;AAYvC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAUA,MAAM,sBAAsB,CAClC,QACA,SACI;AACJ,MAAI,QAAa;AACjB,OAAK,QAAS,CAAE,cAAuB;AACtC,YAAQ,QAAS,SAAU;AAAA,EAC5B,CAAE;AACF,SAAO;AACR;AAYO,SAAS,aACf,OACA,SACA,MACA,SACqB;AACrB,QAAM,aAAiC,oBAAqB,OAAO,IAAK;AAExE,SAAO,aACJ;AAAA,IACA;AAAA,MACC,UAAU,SAAS;AAAA,MACnB,KAAK;AAAA,MACL,OAAO,wBAAyB,UAAW;AAAA,IAC5C;AAAA,EACA,IACA,CAAC;AACL;AAaO,SAAS,iBACf,OACA,SACA,MACA,UACA,uBAAiC,CAAE,OAAO,SAAS,UAAU,MAAO,GAC/C;AACrB,QAAM,WAAqC;AAAA,IAC1C;AAAA,IACA;AAAA,EACD;AACA,MAAK,CAAE,UAAW;AACjB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,QAA4B,CAAC;AACnC,MAAK,OAAO,aAAa,UAAW;AACnC,UAAM,KAAM;AAAA,MACX,UAAU,SAAS;AAAA,MACnB,KAAK,SAAS;AAAA,MACd,OAAO,wBAAyB,QAAS;AAAA,IAC1C,CAAE;AAAA,EACH,OAAO;AACN,UAAM,YAAY,qBAAqB;AAAA,MACtC,CAAE,KAAyB,SAAkB;AAC5C,cAAM,QAAQ;AAAA,UACb,oBAAqB,UAAU,CAAE,IAAK,CAAE;AAAA,QACzC;AACA,YAAK,OAAQ;AACZ,cAAI,KAAM;AAAA,YACT,UAAU,SAAS;AAAA,YACnB,KAAK,UAAU,WAAW;AAAA,cACzB;AAAA,cACA,WAAY,IAAK;AAAA,YAClB;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AACA,eAAO;AAAA,MACR;AAAA,MACA,CAAC;AAAA,IACF;AACA,UAAM,KAAM,GAAG,SAAU;AAAA,EAC1B;AAEA,SAAO;AACR;AAiBO,SAAS,wBACf,YACa;AACb,MACC,OAAO,eAAe,YACtB,WAAW,WAAY,yBAA0B,GAChD;AACD,UAAM,WAAW,WACf,MAAO,0BAA0B,MAAO,EACxC,MAAO,uCAAwC,EAC/C;AAAA,MAAK,CAAE,mBACP,UAAW,gBAAgB;AAAA,QAC1B,aAAa;AAAA,UACZ;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,UACA;AAAA;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,EACC,KAAM,mCAAoC;AAC5C,WAAO,aAAc,QAAS;AAAA,EAC/B;AACA,SAAO;AACR;AASO,SAAS,WAAY,QAAyB;AACpD,QAAM,CAAE,aAAa,GAAG,IAAK,IAAI;AACjC,SAAO,YAAY,YAAY,IAAI,KAAK,KAAM,EAAG;AAClD;AASO,SAAS,cAAe,SAA4B;AAC1D,QAAM,CAAE,WAAW,GAAG,IAAK,IAAI;AAC/B,SAAO,UAAU,YAAY,IAAI,KAAK,IAAK,UAAW,EAAE,KAAM,EAAG;AAClE;AAeO,SAAS,cAAe,KAAsB;AACpD,MAAI;AACH,WAAO,UAAW,GAAI;AAAA,EACvB,SAAU,UAAW;AACpB,WAAO;AAAA,EACR;AACD;",
+  "names": []
+}

package/build-module/types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/build-module/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/style-engine/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};\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\tminHeight?: CSSProperties[ 'minHeight' ];\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"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.32.0",
+	"version": "2.32.1-next.47f435fc9.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,16 +26,23 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"require": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "7.25.7",
 		"change-case": "^4.1.2"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
+	"gitHead": "9720f22c138771d2ed1a0522725c3cdf1c242953"
 }