@wordpress/style-engine 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.12.0 (2022-07-13)
+
 ## 0.11.0 (2022-06-29)
 
 ## 0.10.0 (2022-06-15)

package/build/styles/utils.js

@@ -65,7 +65,7 @@ function generateBoxRules(style, options, path, ruleKeys) {
     });
   } else {
     const sideRules = individualProperties.reduce((acc, side) => {
-      const value = (0, _lodash.get)(boxStyle, [side]);
+      const value = getCSSVarFromStyleValue((0, _lodash.get)(boxStyle, [side]));
 
       if (value) {
         acc.push({

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,GAAG,iBAAKK,QAAL,EAAe,CAAEO,IAAF,CAAf,CAAlC;;AACA,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,KAdgB,EAejB,EAfiB,CAAlB;AAiBAL,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 = get( boxStyle, [ side ] );\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/styles/utils.js

@@ -56,7 +56,7 @@ export function generateBoxRules(style, options, path, ruleKeys) {
     });
   } else {
     const sideRules = individualProperties.reduce((acc, side) => {
-      const value = get(boxStyle, [side]);
+      const value = getCSSVarFromStyleValue(get(boxStyle, [side]));
 
       if (value) {
         acc.push({

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","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","slice","length","split","join","firstLetter","rest","toUpperCase"],"mappings":"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","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 = get( boxStyle, [ side ] );\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":["get","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","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","slice","length","split","join","firstLetter","rest","toUpperCase"],"mappings":"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","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-types/styles/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAmCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,CAAE,WAAW,EAAE,GAAG,IAAI,CAAE,EAAE,MAAM,UAE3D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAqCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,CAAE,WAAW,EAAE,GAAG,IAAI,CAAE,EAAE,MAAM,UAE3D"}

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

@@ -0,0 +1,119 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Declarations
+ *
+ * Holds, sanitizes and prints CSS rules declarations
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Declarations {
+
+	/**
+	 * An array of CSS declarations (property => value pairs).
+	 *
+	 * @var array
+	 */
+	protected $declarations = array();
+
+	/**
+	 * Constructor for this object.
+	 *
+	 * If a `$declarations` array is passed, it will be used to populate
+	 * the initial $declarations prop of the object by calling add_declarations().
+	 *
+	 * @param array $declarations An array of declarations (property => value pairs).
+	 */
+	public function __construct( $declarations = array() ) {
+		if ( empty( $declarations ) ) {
+			return;
+		}
+		$this->add_declarations( $declarations );
+	}
+
+	/**
+	 * Add a single declaration.
+	 *
+	 * @param string $property The CSS property.
+	 * @param string $value    The CSS value.
+	 *
+	 * @return void
+	 */
+	public function add_declaration( $property, $value ) {
+
+		// Sanitize the property.
+		$property = $this->sanitize_property( $property );
+		// Bail early if the property is empty.
+		if ( empty( $property ) ) {
+			return;
+		}
+
+		// Trim the value. If empty, bail early.
+		$value = trim( $value );
+		if ( '' === $value ) {
+			return;
+		}
+
+		// Add the declaration property/value pair.
+		$this->declarations[ $property ] = $value;
+	}
+
+	/**
+	 * Add multiple declarations.
+	 *
+	 * @param array $declarations An array of declarations.
+	 *
+	 * @return void
+	 */
+	public function add_declarations( $declarations ) {
+		foreach ( $declarations as $property => $value ) {
+			$this->add_declaration( $property, $value );
+		}
+	}
+
+	/**
+	 * Get the declarations array.
+	 *
+	 * @return array
+	 */
+	public function get_declarations() {
+		return $this->declarations;
+	}
+
+	/**
+	 * Filters and compiles the CSS declarations.
+	 *
+	 * @return string The CSS declarations.
+	 */
+	public function get_declarations_string() {
+		$declarations_array  = $this->get_declarations();
+		$declarations_output = '';
+		foreach ( $declarations_array as $property => $value ) {
+			$filtered_declaration = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
+			if ( $filtered_declaration ) {
+				$declarations_output .= $filtered_declaration . '; ';
+			}
+		}
+		return rtrim( $declarations_output );
+	}
+
+	/**
+	 * Sanitize property names.
+	 *
+	 * @param string $property The CSS property.
+	 *
+	 * @return string The sanitized property name.
+	 */
+	protected function sanitize_property( $property ) {
+		return sanitize_key( $property );
+	}
+}

package/class-wp-style-engine.php

@@ -51,7 +51,7 @@ class WP_Style_Engine {
 				),
 				'path'          => array( 'color', 'text' ),
 				'css_vars'      => array(
-					'--wp--preset--color--$slug' => 'color',
+					'color' => '--wp--preset--color--$slug',
 				),
 				'classnames'    => array(
 					'has-text-color'  => true,
@@ -148,6 +148,9 @@ class WP_Style_Engine {
 					'individual' => 'padding-%s',
 				),
 				'path'          => array( 'spacing', 'padding' ),
+				'css_vars'      => array(
+					'spacing' => '--wp--preset--spacing--$slug',
+				),
 			),
 			'margin'  => array(
 				'property_keys' => array(
@@ -155,6 +158,9 @@ class WP_Style_Engine {
 					'individual' => 'margin-%s',
 				),
 				'path'          => array( 'spacing', 'margin' ),
+				'css_vars'      => array(
+					'spacing' => '--wp--preset--spacing--$slug',
+				),
 			),
 		),
 		'typography' => array(
@@ -246,6 +252,28 @@ class WP_Style_Engine {
 		return null;
 	}
 
+	/**
+	 * Generates a css var string, eg var(--wp--preset--color--background) from a preset string, eg. `var:preset|space|50`.
+	 *
+	 * @param string $style_value  A single css preset value.
+	 * @param array  $css_vars The css var patterns used to generate the var string.
+	 *
+	 * @return string|null The css var, or null if no match for slug found.
+	 */
+	protected static function get_css_var_value( $style_value, $css_vars ) {
+		foreach ( $css_vars as  $property_key => $css_var_pattern ) {
+			$slug = static::get_slug_from_preset_value( $style_value, $property_key );
+			if ( $slug ) {
+				$var = strtr(
+					$css_var_pattern,
+					array( '$slug' => $slug )
+				);
+				return "var($var)";
+			}
+		}
+		return null;
+	}
+
 	/**
 	 * Checks whether an incoming block style value is valid.
 	 *
@@ -304,18 +332,18 @@ class WP_Style_Engine {
 	/**
 	 * Returns an array of CSS declarations based on valid block style values.
 	 *
-	 * @param array         $style_value      A single raw style value from the generate() $block_styles array.
-	 * @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param boolean       $should_return_css_vars Whether to try to build and return CSS var values.
+	 * @param array         $style_value          A single raw style value from the generate() $block_styles array.
+	 * @param array<string> $style_definition     A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * @param boolean       $should_skip_css_vars Whether to skip compiling CSS var values.
 	 *
 	 * @return array        An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) {
+	protected static function get_css_declarations( $style_value, $style_definition, $should_skip_css_vars = false ) {
 		if (
 			isset( $style_definition['value_func'] ) &&
 			is_callable( $style_definition['value_func'] )
 		) {
-			return call_user_func( $style_definition['value_func'], $style_value, $style_definition );
+			return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $should_skip_css_vars );
 		}
 
 		$css_declarations    = array();
@@ -324,16 +352,10 @@ class WP_Style_Engine {
 		// Build CSS var values from var:? values, e.g, `var(--wp--css--rule-slug )`
 		// Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
 		if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) {
-			if ( $should_return_css_vars && ! empty( $style_definition['css_vars'] ) ) {
-				foreach ( $style_definition['css_vars'] as $css_var_pattern => $property_key ) {
-					$slug = static::get_slug_from_preset_value( $style_value, $property_key );
-					if ( $slug ) {
-						$css_var = strtr(
-							$css_var_pattern,
-							array( '$slug' => $slug )
-						);
-						$css_declarations[ $style_property_keys['default'] ] = "var($css_var)";
-					}
+			if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+				$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
+				if ( $css_var ) {
+					$css_declarations[ $style_property_keys['default'] ] = $css_var;
 				}
 			}
 			return $css_declarations;
@@ -344,8 +366,13 @@ class WP_Style_Engine {
 		// for styles such as margins and padding.
 		if ( is_array( $style_value ) ) {
 			foreach ( $style_value as $key => $value ) {
-				$individual_property                      = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
-				$css_declarations[ $individual_property ] = $value;
+				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+					$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
+				}
+				$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
+				if ( static::is_valid_style_value( $style_value ) ) {
+					$css_declarations[ $individual_property ] = $value;
+				}
 			}
 		} else {
 			$css_declarations[ $style_property_keys['default'] ] = $style_value;
@@ -355,13 +382,13 @@ class WP_Style_Engine {
 	}
 
 	/**
-	 * Returns classname and CSS from a block styles object.
+	 * Returns classnames and CSS based on the values in a block attributes.styles object.
 	 * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
 	 *
-	 * @param array $block_styles An array of styles from a block's attributes.
-	 * @param array $options array(
-	 *     'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
-	 *     'css_vars' => (boolean) Whether to covert CSS values to var() values. If `true` the style engine will try to parse var:? values and output var( --wp--preset--* ) rules. Default is `false`.
+	 * @param array $block_styles Styles from a block's attributes object.
+	 * @param array $options      array(
+	 *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
 	 * );.
 	 *
 	 * @return array|null array(
@@ -369,17 +396,17 @@ class WP_Style_Engine {
 	 *     'classnames' => (string) Classnames separated by a space.
 	 * );
 	 */
-	public function generate( $block_styles, $options ) {
+	public function get_block_supports_styles( $block_styles, $options ) {
 		if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
 			return null;
 		}
 
-		$css_declarations       = array();
-		$classnames             = array();
-		$should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars'];
+		$css_declarations     = array();
+		$classnames           = array();
+		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
 
 		// Collect CSS and classnames.
-		foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
+		foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
 			if ( empty( $block_styles[ $definition_group_key ] ) ) {
 				continue;
 			}
@@ -391,37 +418,25 @@ class WP_Style_Engine {
 				}
 
 				$classnames       = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
-				$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) );
+				$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) );
 			}
 		}
 
 		// Build CSS rules output.
-		$css_selector              = isset( $options['selector'] ) ? $options['selector'] : null;
-		$filtered_css_declarations = array();
-
-		if ( ! empty( $css_declarations ) ) {
-			// Generate inline style declarations.
-			foreach ( $css_declarations as $css_property => $css_value ) {
-				$filtered_css_declaration = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) );
-				if ( ! empty( $filtered_css_declaration ) ) {
-					$filtered_css_declarations[] = $filtered_css_declaration . ';';
-				}
-			}
-		}
+		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
+		$style_rules  = new WP_Style_Engine_CSS_Declarations( $css_declarations );
 
 		// The return object.
 		$styles_output = array();
+		$css           = $style_rules->get_declarations_string();
 
 		// Return css, if any.
-		if ( ! empty( $filtered_css_declarations ) ) {
+		if ( ! empty( $css ) ) {
+			$styles_output['css']          = $css;
+			$styles_output['declarations'] = $style_rules->get_declarations();
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
-				$css_rule             = "$css_selector { ";
-				$css_rule            .= implode( ' ', $filtered_css_declarations );
-				$css_rule            .= ' }';
-				$styles_output['css'] = $css_rule;
-			} else {
-				$styles_output['css'] = implode( ' ', $filtered_css_declarations );
+				$styles_output['css'] = $css_selector . ' { ' . $css . ' }';
 			}
 		}
 
@@ -433,7 +448,6 @@ class WP_Style_Engine {
 		return $styles_output;
 	}
 
-
 	/**
 	 * Style value parser that returns a CSS definition array comprising style properties
 	 * that have keys representing individual style properties, otherwise known as longhand CSS properties.
@@ -441,12 +455,13 @@ class WP_Style_Engine {
 	 * "border-{top|right|bottom|left}-{color|width|style}: {value};" or,
 	 * "border-image-{outset|source|width|repeat|slice}: {value};"
 	 *
-	 * @param array $style_value                    A single raw Gutenberg style attributes value for a CSS property.
-	 * @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * @param array   $style_value                    A single raw Gutenberg style attributes value for a CSS property.
+	 * @param array   $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * @param boolean $should_skip_css_vars           Whether to skip compiling CSS var values.
 	 *
 	 * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition ) {
+	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_skip_css_vars ) {
 		$css_declarations = array();
 
 		if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
@@ -466,17 +481,12 @@ class WP_Style_Engine {
 
 			// Build a path to the individual rules in definitions.
 			$style_definition_path = array( $definition_group_key, $css_property );
-			$style_definition      = _wp_array_get( self::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
+			$style_definition      = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
 
 			if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
 				// Set a CSS var if there is a valid preset value.
-				$slug = isset( $individual_property_definition['css_vars'][ $css_property ] ) ? static::get_slug_from_preset_value( $value, $css_property ) : null;
-				if ( $slug ) {
-					$css_var = strtr(
-						$individual_property_definition['css_vars'][ $css_property ],
-						array( '$slug' => $slug )
-					);
-					$value   = "var($css_var)";
+				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
+					$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
 				}
 				$individual_css_property                      = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
 				$css_declarations[ $individual_css_property ] = $value;
@@ -487,30 +497,28 @@ class WP_Style_Engine {
 }
 
 /**
- * Global public interface method to WP_Style_Engine->generate.
- *
- * Returns an CSS ruleset.
- * Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
+ * Global public interface method to WP_Style_Engine->get_block_supports_styles to generate block styles from a single block style object.
+ * See: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/
  *
  * Example usage:
  *
- * $styles = wp_style_engine_generate( array( 'color' => array( 'text' => '#cccccc' ) ) );
- * // Returns `'color: #cccccc'`.
+ * $styles = wp_style_engine_get_block_supports_styles( array( 'color' => array( 'text' => '#cccccc' ) ) );
+ * // Returns `array( 'css' => 'color: #cccccc', 'classnames' => 'has-color' )`.
  *
  * @access public
  *
- * @param array $block_styles An array of styles from a block's attributes.
- * @param array $options An array of options to determine the output.
+ * @param array         $block_styles The value of a block's attributes.style.
+ * @param array<string> $options      An array of options to determine the output.
  *
- * @return array|null array(
+ * @return array<string>|null array(
  *     'styles'     => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag.
  *     'classnames' => (string) Classnames separated by a space.
  * );
  */
-function wp_style_engine_generate( $block_styles, $options = array() ) {
+function wp_style_engine_get_block_supports_styles( $block_styles, $options = array() ) {
 	if ( class_exists( 'WP_Style_Engine' ) ) {
 		$style_engine = WP_Style_Engine::get_instance();
-		return $style_engine->generate( $block_styles, $options );
+		return $style_engine->get_block_supports_styles( $block_styles, $options );
 	}
 	return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"description": "WordPress Style engine.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,5 +34,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }

package/phpunit/class-wp-style-engine-css-declarations-test.php

@@ -0,0 +1,108 @@
+<?php
+/**
+ * Tests the Style Engine CSS declarations class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+
+/**
+ * Tests for registering, storing and generating CSS declarations.
+ */
+class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
+	/**
+	 * Should set declarations on instantiation.
+	 */
+	public function test_instantiate_with_declarations() {
+		$input_declarations = array(
+			'margin-top' => '10px',
+			'font-size'  => '2rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$this->assertSame( $input_declarations, $css_declarations->get_declarations() );
+	}
+
+	/**
+	 * Should add declarations.
+	 */
+	public function test_add_declarations() {
+		$input_declarations = array(
+			'padding' => '20px',
+			'color'   => 'var(--wp--preset--elbow-patches)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations();
+		$css_declarations->add_declarations( $input_declarations );
+		$this->assertSame( $input_declarations, $css_declarations->get_declarations() );
+	}
+
+	/**
+	 * Should add declarations.
+	 */
+	public function test_add_a_single_declaration() {
+		$input_declarations = array(
+			'border-width'     => '1%',
+			'background-color' => 'var(--wp--preset--english-mustard)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$extra_declaration  = array(
+			'letter-spacing' => '1.5px',
+		);
+		$css_declarations->add_declarations( $extra_declaration );
+		$this->assertSame( array_merge( $input_declarations, $extra_declaration ), $css_declarations->get_declarations() );
+	}
+
+	/**
+	 * Should sanitize properties before storing.
+	 */
+	public function test_sanitize_properties() {
+		$input_declarations = array(
+			'^--wp--style--sleepy-potato$' => '40px',
+			'<background-//color>'         => 'var(--wp--preset--english-mustard)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			array(
+				'--wp--style--sleepy-potato' => '40px',
+				'background-color'           => 'var(--wp--preset--english-mustard)',
+			),
+			$css_declarations->get_declarations()
+		);
+	}
+
+	/**
+	 * Should compile css declarations into a css declarations block string.
+	 */
+	public function test_generate_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: red; border-top-left-radius: 99px; text-decoration: underline;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+
+	/**
+	 * Should escape values and run the CSS through safecss_filter_attr.
+	 */
+	public function test_remove_unsafe_properties_and_values() {
+		$input_declarations = array(
+			'color'        => '<red/>',
+			'margin-right' => '10em',
+			'potato'       => 'uppercase',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: &lt;red/&gt;; margin-right: 10em;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+}

package/phpunit/class-wp-style-engine-test.php

@@ -6,6 +6,7 @@
  * @subpackage style-engine
  */
 
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
 require __DIR__ . '/../class-wp-style-engine.php';
 
 /**
@@ -13,12 +14,16 @@ require __DIR__ . '/../class-wp-style-engine.php';
  */
 class WP_Style_Engine_Test extends WP_UnitTestCase {
 	/**
-	 * Tests generating styles and classnames based on various manifestations of the $block_styles argument.
+	 * Tests generating block styles and classnames based on various manifestations of the $block_styles argument.
 	 *
-	 * @dataProvider data_generate_styles_fixtures
+	 * @dataProvider data_generate_block_supports_styles_fixtures
+	 *
+	 * @param array  $block_styles    The incoming block styles object.
+	 * @param array  $options         Style engine options.
+	 * @param string $expected_output The expected output.
 	 */
-	function test_generate_styles( $block_styles, $options, $expected_output ) {
-		$generated_styles = wp_style_engine_generate( $block_styles, $options );
+	public function test_generate_block_supports_styles( $block_styles, $options, $expected_output ) {
+		$generated_styles = wp_style_engine_get_block_supports_styles( $block_styles, $options );
 		$this->assertSame( $expected_output, $generated_styles );
 	}
 
@@ -27,7 +32,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 	 *
 	 * @return array
 	 */
-	public function data_generate_styles_fixtures() {
+	public function data_generate_block_supports_styles_fixtures() {
 		return array(
 			'default_return_value'                         => array(
 				'block_styles'    => array(),
@@ -82,10 +87,16 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'style' => 'dotted',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
-					'css'        => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
-					'classnames' => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color',
+					'css'          => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
+					'declarations' => array(
+						'border-style' => 'dotted',
+						'border-width' => '2rem',
+						'padding'      => '0',
+						'margin'       => '111px',
+					),
+					'classnames'   => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color',
 				),
 			),
 
@@ -116,7 +127,21 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css' => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
+					'css'          => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
+					'declarations' => array(
+						'border-top-left-radius'     => '99px',
+						'border-top-right-radius'    => '98px',
+						'border-bottom-left-radius'  => '97px',
+						'border-bottom-right-radius' => '96px',
+						'padding-top'                => '42px',
+						'padding-left'               => '2%',
+						'padding-bottom'             => '44px',
+						'padding-right'              => '5rem',
+						'margin-top'                 => '12rem',
+						'margin-left'                => '2vh',
+						'margin-bottom'              => '2px',
+						'margin-right'               => '10em',
+					),
 				),
 			),
 
@@ -135,7 +160,17 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css' => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
+					'css'          => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
+					'declarations' => array(
+						'font-size'       => 'clamp(2em, 2vw, 4em)',
+						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
+						'font-style'      => 'italic',
+						'font-weight'     => '800',
+						'line-height'     => '1.3',
+						'text-decoration' => 'underline',
+						'text-transform'  => 'uppercase',
+						'letter-spacing'  => '2',
+					),
 				),
 			),
 
@@ -152,7 +187,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array( 'selector' => '.wp-selector > p' ),
 				'expected_output' => array(
-					'css' => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
+					'css'          => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
+					'declarations' => array(
+						'padding-top'    => '42px',
+						'padding-left'   => '2%',
+						'padding-bottom' => '44px',
+						'padding-right'  => '5rem',
+					),
 				),
 			),
 
@@ -164,11 +205,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(
 					'selector' => '.wp-selector',
-					'css_vars' => true,
 				),
 				'expected_output' => array(
-					'css'        => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
-					'classnames' => 'has-text-color has-my-little-pony-color',
+					'css'          => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
+					'declarations' => array(
+						'color' => 'var(--wp--preset--color--my-little-pony)',
+					),
+					'classnames'   => 'has-text-color has-my-little-pony-color',
 				),
 			),
 
@@ -196,7 +239,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'fontFamily' => 'var:preset|font-family|totally-awesome',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-copper-socks-color has-background has-splendid-carrot-background-color has-like-wow-dude-gradient-background has-fantastic-font-size has-totally-awesome-font-family',
 				),
@@ -208,10 +251,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'text' => 'var:preset|color|teal-independents',
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
-					'css'        => 'color: var(--wp--preset--color--teal-independents);',
-					'classnames' => 'has-text-color has-teal-independents-color',
+					'css'          => 'color: var(--wp--preset--color--teal-independents);',
+					'declarations' => array(
+						'color' => 'var(--wp--preset--color--teal-independents)',
+					),
+					'classnames'   => 'has-text-color has-teal-independents-color',
 				),
 			),
 
@@ -224,8 +270,11 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'        => 'color: #fff;',
-					'classnames' => 'has-text-color',
+					'css'          => 'color: #fff;',
+					'declarations' => array(
+						'color' => '#fff',
+					),
+					'classnames'   => 'has-text-color',
 				),
 			),
 
@@ -240,12 +289,83 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'padding' => 'var:preset|spacing|padding',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-background',
 				),
 			),
 
+			'valid_spacing_single_preset_values'           => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin'  => 'var:preset|spacing|10',
+						'padding' => 'var:preset|spacing|20',
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
+					'declarations' => array(
+						'padding' => 'var(--wp--preset--spacing--20)',
+						'margin'  => 'var(--wp--preset--spacing--10)',
+					),
+				),
+			),
+
+			'valid_spacing_multi_preset_values'            => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin'  => array(
+							'left'   => 'var:preset|spacing|10',
+							'right'  => 'var:preset|spacing|20',
+							'top'    => '1rem',
+							'bottom' => '1rem',
+						),
+						'padding' => array(
+							'left'   => 'var:preset|spacing|30',
+							'right'  => 'var:preset|spacing|40',
+							'top'    => '14px',
+							'bottom' => '14px',
+						),
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
+					'declarations' => array(
+						'padding-left'   => 'var(--wp--preset--spacing--30)',
+						'padding-right'  => 'var(--wp--preset--spacing--40)',
+						'padding-top'    => '14px',
+						'padding-bottom' => '14px',
+						'margin-left'    => 'var(--wp--preset--spacing--10)',
+						'margin-right'   => 'var(--wp--preset--spacing--20)',
+						'margin-top'     => '1rem',
+						'margin-bottom'  => '1rem',
+					),
+				),
+			),
+
+			'invalid_spacing_multi_preset_values'          => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin' => array(
+							'left'   => 'var:preset|spaceman|10',
+							'right'  => 'var:preset|spaceman|20',
+							'top'    => '1rem',
+							'bottom' => '0',
+						),
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => 'margin-top: 1rem; margin-bottom: 0;',
+					'declarations' => array(
+						'margin-top'    => '1rem',
+						'margin-bottom' => '0',
+					),
+				),
+			),
+
 			'invalid_classnames_options'                   => array(
 				'block_styles'    => array(
 					'typography' => array(
@@ -287,7 +407,20 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
+					'css'          => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
+					'declarations' => array(
+						'border-top-color'    => '#fe1',
+						'border-top-width'    => '1.5rem',
+						'border-top-style'    => 'dashed',
+						'border-right-color'  => '#fe2',
+						'border-right-width'  => '1.4rem',
+						'border-right-style'  => 'solid',
+						'border-bottom-color' => '#fe3',
+						'border-bottom-width' => '1.3rem',
+						'border-left-color'   => 'var(--wp--preset--color--swampy-yellow)',
+						'border-left-width'   => '0.5rem',
+						'border-left-style'   => 'dotted',
+					),
 				),
 			),
 
@@ -317,7 +450,10 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'css'          => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'declarations' => array(
+						'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)',
+					),
 				),
 			),
 		);

package/src/styles/utils.ts

@@ -81,7 +81,9 @@ export function generateBoxRules(
 	} else {
 		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
-				const value: string | undefined = get( boxStyle, [ side ] );
+				const value: string | undefined = getCSSVarFromStyleValue(
+					get( boxStyle, [ side ] )
+				);
 				if ( value ) {
 					acc.push( {
 						selector: options?.selector,

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/lodash/common/common.d.ts","../../node_modules/@types/lodash/common/array.d.ts","../../node_modules/@types/lodash/common/collection.d.ts","../../node_modules/@types/lodash/common/date.d.ts","../../node_modules/@types/lodash/common/function.d.ts","../../node_modules/@types/lodash/common/lang.d.ts","../../node_modules/@types/lodash/common/math.d.ts","../../node_modules/@types/lodash/common/number.d.ts","../../node_modules/@types/lodash/common/object.d.ts","../../node_modules/@types/lodash/common/seq.d.ts","../../node_modules/@types/lodash/common/string.d.ts","../../node_modules/@types/lodash/common/util.d.ts","../../node_modules/@types/lodash/index.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/@types/react/node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","./src/types.ts","./src/styles/constants.ts","./src/styles/utils.ts","./src/styles/border/index.ts","./src/styles/color/background.ts","./src/styles/color/gradient.ts","./src/styles/color/text.ts","./src/styles/color/index.ts","./src/styles/spacing/padding.ts","./src/styles/spacing/margin.ts","./src/styles/spacing/index.ts","./src/styles/typography/index.ts","./src/styles/index.ts","./src/index.ts"],"fileInfos":[{"version":"aa9fb4c70f369237c2f45f9d969c9a59e0eae9a192962eb48581fe864aa609db","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","eb75e89d63b3b72dd9ca8b0cac801cecae5be352307c004adeaa60bc9d6df51f","2cc028cd0bdb35b1b5eb723d84666a255933fffbea607f72cbd0c7c7b4bee144",{"version":"e54c8715a4954cfdc66cd69489f2b725c09ebf37492dbd91cff0a1688b1159e8","affectsGlobalScope":true},{"version":"51b8b27c21c066bf877646e320bf6a722b80d1ade65e686923cd9d4494aef1ca","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"2c8c5ee58f30e7c944e04ab1fb5506fdbb4dd507c9efa6972cf4b91cec90c503","affectsGlobalScope":true},{"version":"2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"9f1817f7c3f02f6d56e0f403b927e90bb133f371dcebc36fa7d6d208ef6899da","affectsGlobalScope":true},{"version":"cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"4632665b87204bb1caa8b44d165bce0c50dfab177df5b561b345a567cabacf9a","affectsGlobalScope":true},"675e702f2032766a91eeadee64f51014c64688525da99dccd8178f0c599f13a8","438284c7c455a29b9c0e2d1e72abc62ee93d9a163029ffe918a34c5db3b92da2","0c75b204aed9cf6ff1c7b4bed87a3ece0d9d6fc857a6350c0c95ed0c38c814e8","187119ff4f9553676a884e296089e131e8cc01691c546273b1d0089c3533ce42","c24ad9be9adf28f0927e3d9d9e9cec1c677022356f241ccbbfb97bfe8fb3d1a1","0ec0998e2d085e8ea54266f547976ae152c9dd6cdb9ac4d8a520a230f5ebae84","9364c7566b0be2f7b70ff5285eb34686f83ccb01bda529b82d23b2a844653bfb","00baffbe8a2f2e4875367479489b5d43b5fc1429ecb4a4cc98cfc3009095f52a","82251920b05f30981c9a4109cb5f3169dce4b477effc845c6d781044a30e7672","3c92b6dfd43cc1c2485d9eba5ff0b74a19bb8725b692773ef1d66dac48cda4bd","3e59f00ab03c33717b3130066d4debb272da90eeded4935ff0604c2bc25a5cae","9fa6b83a35e897f340858995ca5d77e901d89fd18644cd4c9e8a4afe0b2e6363",{"version":"0714e2046df66c0e93c3330d30dbc0565b3e8cd3ee302cf99e4ede6220e5fec8","affectsGlobalScope":true},{"version":"ecf78e637f710f340ec08d5d92b3f31b134a46a4fcf2e758690d8c46ce62cba6","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"1bc82f5b3bb93df76d19730c84467b0b346187198537135d63a672956f323720","affectsGlobalScope":true},"7056e1cdbbef99f39e40c5ec905694798183fb116ecc14135a399be237ef9a72","301543eebfdd2fc5e5d6d928c5ed3f65bd377e95d184eb1351df5fe38ef9eac0","98cd2800ce6e9c4b61e21d579dcbd52b11116df2c8ddef0e97c56fccbd353cfc","1fa9eb4c782532dc5d216edc97194d451e75bbdc6cf0b7ec2fad623e453bb6e3","49dec6685c69b84a795d1e2c2a8d7ac8953efb4a7dadb9b1b04c836053e0ea21","8cbcd8c85fe3627d4c9e75ccf2784b7e4d0082396600e9d432f1cd61009a7933","f303eb9a884f47802f08d6b1d376c737856c29783532a44116bfc7e4929a7204","e8dc9f16ad89ba54f1e7202369a69a265ccd5eec0df39cf429ff1a941603d4da","caa45d96bc56c4f2ea6dfbe715413636f0d8b74121a8820b70526a3ae1bfd9b9","3d0705f37a3de49d9210d2656cd697ae0cd93476a7e60f7b099797166e4d78b0","b7003bd91d5a0b8bf84a3ef07a0cf5a4b8e0cef58d9e6404f54f05fd4ed6f0b2","7d3a2faeadcffe42977d40ad9ca2e742fa9b4517873bbf7271c955daaee2ac1e","5a85946608d80c1c4c68b2534c416e500984385a9b0e67e7f3c1ad208bcf5126","c900cd7223ce5ca14e0c9a4ddb07aa17b668ad33cba4d775c1480fbb27bf1960"],"options":{"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"declarationDir":"./build-types","declarationMap":true,"emitDeclarationOnly":true,"esModuleInterop":false,"importsNotUsedAsValues":2,"jsx":1,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noUnusedLocals":true,"noUnusedParameters":true,"rootDir":"./src","strict":true,"target":99},"fileIdsList":[[45,47,48,49,50,51,52,53,54,55,56,57],[45,46,48,49,50,51,52,53,54,55,56,57],[46,47,48,49,50,51,52,53,54,55,56,57],[45,46,47,49,50,51,52,53,54,55,56,57],[45,46,47,48,50,51,52,53,54,55,56,57],[45,46,47,48,49,51,52,53,54,55,56,57],[45,46,47,48,49,50,52,53,54,55,56,57],[45,46,47,48,49,50,51,53,54,55,56,57],[45,46,47,48,49,50,51,52,54,55,56,57],[45,46,47,48,49,50,51,52,53,55,56,57],[45,46,47,48,49,50,51,52,53,54,56,57],[45,46,47,48,49,50,51,52,53,54,55,57],[45,46,47,48,49,50,51,52,53,54,55,56],[58,59,60,61],[57,63,75],[63,65],[67,68,69],[66,70,73,74],[71,72],[57,63,64],[62]],"referencedMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[76,15],[66,16],[67,16],[68,16],[70,17],[69,16],[75,18],[73,19],[72,16],[71,16],[74,16],[65,20],[63,21]],"exportedModulesMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[76,15],[66,16],[67,16],[68,16],[70,17],[69,16],[75,18],[73,19],[72,16],[71,16],[74,16],[65,20],[63,21]],"semanticDiagnosticsPerFile":[46,47,45,48,49,50,51,52,53,54,55,56,57,60,58,62,59,61,10,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,32,33,34,35,7,40,36,37,38,39,8,41,42,43,1,9,44,76,66,67,68,70,69,64,75,73,72,71,74,65,63]},"version":"4.4.2"}
+{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/lodash/common/common.d.ts","../../node_modules/@types/lodash/common/array.d.ts","../../node_modules/@types/lodash/common/collection.d.ts","../../node_modules/@types/lodash/common/date.d.ts","../../node_modules/@types/lodash/common/function.d.ts","../../node_modules/@types/lodash/common/lang.d.ts","../../node_modules/@types/lodash/common/math.d.ts","../../node_modules/@types/lodash/common/number.d.ts","../../node_modules/@types/lodash/common/object.d.ts","../../node_modules/@types/lodash/common/seq.d.ts","../../node_modules/@types/lodash/common/string.d.ts","../../node_modules/@types/lodash/common/util.d.ts","../../node_modules/@types/lodash/index.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/@types/react/node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","./src/types.ts","./src/styles/constants.ts","./src/styles/utils.ts","./src/styles/border/index.ts","./src/styles/color/background.ts","./src/styles/color/gradient.ts","./src/styles/color/text.ts","./src/styles/color/index.ts","./src/styles/spacing/padding.ts","./src/styles/spacing/margin.ts","./src/styles/spacing/index.ts","./src/styles/typography/index.ts","./src/styles/index.ts","./src/index.ts"],"fileInfos":[{"version":"aa9fb4c70f369237c2f45f9d969c9a59e0eae9a192962eb48581fe864aa609db","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","eb75e89d63b3b72dd9ca8b0cac801cecae5be352307c004adeaa60bc9d6df51f","2cc028cd0bdb35b1b5eb723d84666a255933fffbea607f72cbd0c7c7b4bee144",{"version":"e54c8715a4954cfdc66cd69489f2b725c09ebf37492dbd91cff0a1688b1159e8","affectsGlobalScope":true},{"version":"51b8b27c21c066bf877646e320bf6a722b80d1ade65e686923cd9d4494aef1ca","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"2c8c5ee58f30e7c944e04ab1fb5506fdbb4dd507c9efa6972cf4b91cec90c503","affectsGlobalScope":true},{"version":"2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"9f1817f7c3f02f6d56e0f403b927e90bb133f371dcebc36fa7d6d208ef6899da","affectsGlobalScope":true},{"version":"cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"4632665b87204bb1caa8b44d165bce0c50dfab177df5b561b345a567cabacf9a","affectsGlobalScope":true},"675e702f2032766a91eeadee64f51014c64688525da99dccd8178f0c599f13a8","438284c7c455a29b9c0e2d1e72abc62ee93d9a163029ffe918a34c5db3b92da2","0c75b204aed9cf6ff1c7b4bed87a3ece0d9d6fc857a6350c0c95ed0c38c814e8","187119ff4f9553676a884e296089e131e8cc01691c546273b1d0089c3533ce42","c24ad9be9adf28f0927e3d9d9e9cec1c677022356f241ccbbfb97bfe8fb3d1a1","0ec0998e2d085e8ea54266f547976ae152c9dd6cdb9ac4d8a520a230f5ebae84","9364c7566b0be2f7b70ff5285eb34686f83ccb01bda529b82d23b2a844653bfb","00baffbe8a2f2e4875367479489b5d43b5fc1429ecb4a4cc98cfc3009095f52a","82251920b05f30981c9a4109cb5f3169dce4b477effc845c6d781044a30e7672","3c92b6dfd43cc1c2485d9eba5ff0b74a19bb8725b692773ef1d66dac48cda4bd","3e59f00ab03c33717b3130066d4debb272da90eeded4935ff0604c2bc25a5cae","9fa6b83a35e897f340858995ca5d77e901d89fd18644cd4c9e8a4afe0b2e6363",{"version":"0714e2046df66c0e93c3330d30dbc0565b3e8cd3ee302cf99e4ede6220e5fec8","affectsGlobalScope":true},{"version":"ecf78e637f710f340ec08d5d92b3f31b134a46a4fcf2e758690d8c46ce62cba6","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"1bc82f5b3bb93df76d19730c84467b0b346187198537135d63a672956f323720","affectsGlobalScope":true},"7056e1cdbbef99f39e40c5ec905694798183fb116ecc14135a399be237ef9a72","301543eebfdd2fc5e5d6d928c5ed3f65bd377e95d184eb1351df5fe38ef9eac0","41d8c0bb25e23a35c64c1839a11f5f9f82a638261dd7a682c629f492c092c86f","1fa9eb4c782532dc5d216edc97194d451e75bbdc6cf0b7ec2fad623e453bb6e3","49dec6685c69b84a795d1e2c2a8d7ac8953efb4a7dadb9b1b04c836053e0ea21","8cbcd8c85fe3627d4c9e75ccf2784b7e4d0082396600e9d432f1cd61009a7933","f303eb9a884f47802f08d6b1d376c737856c29783532a44116bfc7e4929a7204","e8dc9f16ad89ba54f1e7202369a69a265ccd5eec0df39cf429ff1a941603d4da","caa45d96bc56c4f2ea6dfbe715413636f0d8b74121a8820b70526a3ae1bfd9b9","3d0705f37a3de49d9210d2656cd697ae0cd93476a7e60f7b099797166e4d78b0","b7003bd91d5a0b8bf84a3ef07a0cf5a4b8e0cef58d9e6404f54f05fd4ed6f0b2","7d3a2faeadcffe42977d40ad9ca2e742fa9b4517873bbf7271c955daaee2ac1e","5a85946608d80c1c4c68b2534c416e500984385a9b0e67e7f3c1ad208bcf5126","c900cd7223ce5ca14e0c9a4ddb07aa17b668ad33cba4d775c1480fbb27bf1960"],"options":{"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"declarationDir":"./build-types","declarationMap":true,"emitDeclarationOnly":true,"esModuleInterop":false,"importsNotUsedAsValues":2,"jsx":1,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noUnusedLocals":true,"noUnusedParameters":true,"rootDir":"./src","strict":true,"target":99},"fileIdsList":[[45,47,48,49,50,51,52,53,54,55,56,57],[45,46,48,49,50,51,52,53,54,55,56,57],[46,47,48,49,50,51,52,53,54,55,56,57],[45,46,47,49,50,51,52,53,54,55,56,57],[45,46,47,48,50,51,52,53,54,55,56,57],[45,46,47,48,49,51,52,53,54,55,56,57],[45,46,47,48,49,50,52,53,54,55,56,57],[45,46,47,48,49,50,51,53,54,55,56,57],[45,46,47,48,49,50,51,52,54,55,56,57],[45,46,47,48,49,50,51,52,53,55,56,57],[45,46,47,48,49,50,51,52,53,54,56,57],[45,46,47,48,49,50,51,52,53,54,55,57],[45,46,47,48,49,50,51,52,53,54,55,56],[58,59,60,61],[57,63,75],[63,65],[67,68,69],[66,70,73,74],[71,72],[57,63,64],[62]],"referencedMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[76,15],[66,16],[67,16],[68,16],[70,17],[69,16],[75,18],[73,19],[72,16],[71,16],[74,16],[65,20],[63,21]],"exportedModulesMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[76,15],[66,16],[67,16],[68,16],[70,17],[69,16],[75,18],[73,19],[72,16],[71,16],[74,16],[65,20],[63,21]],"semanticDiagnosticsPerFile":[46,47,45,48,49,50,51,52,53,54,55,56,57,60,58,62,59,61,10,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,32,33,34,35,7,40,36,37,38,39,8,41,42,43,1,9,44,76,66,67,68,70,69,64,75,73,72,71,74,65,63]},"version":"4.4.2"}