@wordpress/style-engine 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 1.2.0 (2022-10-05)
6
+
5
7
  ## 1.1.0 (2022-09-21)
6
8
 
7
9
  ### Enhancement
package/README.md CHANGED
@@ -4,7 +4,7 @@ The Style Engine aims to provide a consistent API for rendering styling for bloc
4
4
 
5
5
  Initially, it will offer a single, centralized agent responsible for generating block styles, and, in later phases, it will also assume the responsibility of processing and rendering optimized frontend CSS.
6
6
 
7
- ## Important
7
+ ## Please note
8
8
 
9
9
  This package is new as of WordPress 6.1 and therefore in its infancy.
10
10
 
@@ -23,23 +23,17 @@ For more information about the roadmap, please refer to [Block editor styles: in
23
23
 
24
24
  ### wp_style_engine_get_styles()
25
25
 
26
- Global public function to generate styles from a single style object, e.g., the value of
27
- a [block's attributes.style object](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#styles)
28
- or
29
- the [top level styles in theme.json](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/).
26
+ Global public function to generate styles from a single style object, e.g., the value of a [block's attributes.style object](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#styles) or the [top level styles in theme.json](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/).
30
27
 
31
- See also [Using the Style Engine to generate block supports styles](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/using-the-style-engine-with-block-supports).
28
+ See also [Using the Style Engine to generate block supports styles](https://github.com/WordPress/gutenberg/tree/HEAD/packages/style-engine/docs/using-the-style-engine-with-block-supports.md).
32
29
 
33
30
  _Parameters_
34
31
 
35
32
  - _$block_styles_ `array` A block's `attributes.style` object or the top level styles in theme.json
36
33
  - _$options_ `array<string|boolean>` An array of options to determine the output.
37
- - _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
38
- global-styles'. Default is 'block-supports'. When both `context` and `selector` are set, the style engine will store the CSS rules using the `context` as a key.
39
- - _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* )
40
- values. Default is `false`.
41
- - _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`,
42
- otherwise a concatenated string of properties and values.
34
+ - _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'. When both `context` and `selector` are set, the Style Engine will store the CSS rules using the `context` as a key.
35
+ - _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* ) values. Default is `false`.
36
+ - _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
43
37
 
44
38
  _Returns_
45
39
  `array<string|array>|null`
@@ -57,19 +51,25 @@ It will return compiled CSS declarations for inline styles, or, where a selector
57
51
  To enqueue a style for rendering in the site's frontend, the `$options` array requires the following:
58
52
 
59
53
  1. **selector (string)** - this is the CSS selector for your block style CSS declarations.
60
- 2. **context (string)** - this tells the style engine where to store the styles. Styles in the same context will be
61
- stored together.
54
+ 2. **context (string)** - this tells the Style Engine where to store the styles. Styles in the same context will be stored together.
62
55
 
63
56
  `wp_style_engine_get_styles` will return the compiled CSS and CSS declarations array.
64
57
 
65
58
  #### Usage
66
59
 
60
+ As mentioned, `wp_style_engine_get_styles()` is useful whenever you wish to generate CSS and/or classnames from a **block's style object**. A good example is [using the Style Engine to generate block supports styles](https://github.com/WordPress/gutenberg/tree/HEAD/packages/style-engine/docs/using-the-style-engine-with-block-supports.md).
61
+
62
+ In the following snippet, we're taking the style object from a block's attributes and passing it to the Style Engine to get the styles. By passing a `context` in the options, the Style Engine will store the styles for later retrieval, for example, should you wish to batch enqueue a set of CSS rules.
63
+
67
64
  ```php
68
- $block_styles = array(
69
- 'spacing' => array( 'padding' => '100px' )
65
+ $block_attributes = array(
66
+ 'style' => array(
67
+ 'spacing' => array( 'padding' => '100px' ),
68
+ ),
70
69
  );
70
+
71
71
  $styles = wp_style_engine_get_styles(
72
- $block_styles,
72
+ $block_attributes['style'],
73
73
  array(
74
74
  'selector' => '.a-selector',
75
75
  'context' => 'block-supports',
@@ -79,46 +79,53 @@ print_r( $styles );
79
79
 
80
80
  /*
81
81
  array(
82
- 'css' => '.a-selector{padding:100px}'
83
- 'declarations' => array( 'padding' => '100px' )
82
+ 'css' => '.a-selector{padding:100px}'
83
+ 'declarations' => array( 'padding' => '100px' )
84
84
  )
85
85
  */
86
86
  ```
87
87
 
88
88
  ### wp_style_engine_get_stylesheet_from_css_rules()
89
89
 
90
- Use this function to compile and return a stylesheet for any CSS rules. The style engine will automatically merge declarations and combine selectors.
90
+ Use this function to compile and return a stylesheet for any CSS rules. The Style Engine will automatically merge declarations and combine selectors.
91
91
 
92
- This function acts as a CSS compiler, but will also enqueue styles for rendering where `enqueue` and `context` strings are passed in the options.
92
+ This function acts as a CSS compiler, but will also register the styles in a store where a `context` string is passed in the options.
93
93
 
94
94
  _Parameters_
95
95
 
96
96
  - _$css_rules_ `array<array>`
97
- - _$options_ `array<string|boolean>` An array of options to determine the output.
98
- - _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
99
- global-styles'. When set, the style engine will store the CSS rules using the `context` value as a key.
97
+ - _$options_ `array<string|bool>` An array of options to determine the output.
98
+ - _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'. When set, the Style Engine will attempt to store the CSS rules.
99
+ - _prettify_ `bool` Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
100
+ - _optimize_ `bool` Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
100
101
 
101
102
  _Returns_
102
103
  `string` A compiled CSS string based on `$css_rules`.
103
104
 
104
105
  #### Usage
105
106
 
107
+ Useful for when you wish to compile a bespoke set of CSS rules from a series of selector + declaration items.
108
+
109
+ The Style Engine will return a sanitized and optimized stylesheet. By passing a `context` identifier in the options, the Style Engine will store the styles for later retrieval, for example, should you wish to batch enqueue a set of CSS rules.
110
+
111
+ You can call `wp_style_engine_get_stylesheet_from_css_rules()` multiple times, and, so long as your styles use the same `context` identifier, they will be stored together.
112
+
106
113
  ```php
107
114
  $styles = array(
108
115
  array(
109
- 'selector'. => '.wp-pumpkin',
116
+ 'selector' => '.wp-pumpkin',
110
117
  'declarations' => array( 'color' => 'orange' )
111
118
  ),
112
119
  array(
113
- 'selector'. => '.wp-tomato',
120
+ 'selector' => '.wp-tomato',
114
121
  'declarations' => array( 'color' => 'red' )
115
122
  ),
116
123
  array(
117
- 'selector'. => '.wp-tomato',
124
+ 'selector' => '.wp-tomato',
118
125
  'declarations' => array( 'padding' => '100px' )
119
126
  ),
120
127
  array(
121
- 'selector'. => '.wp-kumquat',
128
+ 'selector' => '.wp-kumquat',
122
129
  'declarations' => array( 'color' => 'orange' )
123
130
  ),
124
131
  );
@@ -126,7 +133,7 @@ $styles = array(
126
133
  $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
127
134
  $styles,
128
135
  array(
129
- 'context' => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
136
+ 'context' => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
130
137
  )
131
138
  );
132
139
  print_r( $stylesheet ); // .wp-pumpkin,.wp-kumquat{color:orange}.wp-tomato{color:red;padding:100px}
@@ -139,34 +146,40 @@ Returns compiled CSS from a stored context, if found.
139
146
  _Parameters_
140
147
 
141
148
  - _$store_name_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
149
+ - _$options_ `array<bool>` An array of options to determine the output.
150
+ - _prettify_ `bool` Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
151
+ - _optimize_ `bool` Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
142
152
 
143
153
  _Returns_
144
154
  `string` A compiled CSS string from the stored CSS rules.
145
155
 
146
156
  #### Usage
147
157
 
148
- A use case would be to fetch the stylesheet, which contains all the compiled CSS rules from the store, and enqueue it for rendering on the frontend.
158
+ Use this function to generate a stylesheet using all the styles stored under a specific context identifier.
159
+
160
+ A use case would be when you wish to enqueue all stored styles for rendering to the frontend. The Style Engine will merge and deduplicate styles upon retrieval.
149
161
 
150
162
  ```php
151
- // First register some styles.
163
+ // First, let's gather and register our styles.
152
164
  $styles = array(
153
165
  array(
154
- 'selector'. => '.wp-apple',
166
+ 'selector' => '.wp-apple',
155
167
  'declarations' => array( 'color' => 'green' )
156
168
  ),
157
169
  );
158
170
 
159
- $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
171
+ wp_style_engine_get_stylesheet_from_css_rules(
160
172
  $styles,
161
173
  array(
162
- 'context' => 'fruit-styles',
163
- 'enqueue' => true,
174
+ 'context' => 'fruit-styles',
164
175
  )
165
176
  );
166
177
 
167
- // Later, fetch compiled rules from context store.
168
- $stylesheet = gutenberg_style_engine_get_stylesheet_from_context( 'fruit-styles' );
178
+ // Later, we fetch compiled rules from context store.
179
+ $stylesheet = wp_style_engine_get_stylesheet_from_context( 'fruit-styles' );
180
+
169
181
  print_r( $stylesheet ); // .wp-apple{color:green;}
182
+
170
183
  if ( ! empty( $stylesheet ) ) {
171
184
  wp_register_style( 'my-stylesheet', false, array(), true, true );
172
185
  wp_add_inline_style( 'my-stylesheet', $stylesheet );
@@ -242,7 +255,7 @@ A guide to the terms and variable names referenced by the Style Engine package.
242
255
  <dt>CSS rule</dt>
243
256
  <dd>A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.</dd>
244
257
  <dt>CSS selector (or CSS class selector)</dt>
245
- <dd>The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule&rsquo;s CSS definitions apply. E.g., <code>p.my-cool-classname > span</code>. A CSS selector matches HTML elements based on the contents of the "class" attribute. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS selectors article</a>.</dd>
258
+ <dd>The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule&rsquo;s CSS definitions apply. E.g., <code>p.my-cool-classname > span</code>. A CSS selector matches HTML elements based on the contents of the "class" attribute. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS selectors article</a>.</dd>
246
259
  <dt>CSS stylesheet</dt>
247
260
  <dd>A collection of CSS rules contained within a file or within an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank">HTML style tag</a>.</dd>
248
261
  <dt>CSS value</dt>
@@ -22,7 +22,7 @@ const offset = {
22
22
  name: 'offset',
23
23
  generate: function (style, options) {
24
24
  let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
25
- let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
25
+ let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
26
26
  return (0, _utils.generateRule)(style, options, path, ruleKey);
27
27
  }
28
28
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;eAYe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}
1
+ {"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,eACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAO,yBAAcH,KAAd,EAAqBC,OAArB,EAA8BC,IAA9B,EAAoCC,OAApC,CAAP;AACA;AATY,CAAd;eAYe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineOffset'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}
@@ -94,7 +94,7 @@ function generateBoxRules(style, options, path, ruleKeys) {
94
94
 
95
95
  function getCSSVarFromStyleValue(styleValue) {
96
96
  if (typeof styleValue === 'string' && styleValue.startsWith(_constants.VARIABLE_REFERENCE_PREFIX)) {
97
- const variable = styleValue.slice(_constants.VARIABLE_REFERENCE_PREFIX.length).split(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
97
+ const variable = styleValue.slice(_constants.VARIABLE_REFERENCE_PREFIX.length).split(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => (0, _lodash.kebabCase)(presetVariable)).join(_constants.VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
98
98
  return `var(--wp--${variable})`;
99
99
  }
100
100
 
@@ -1 +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","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase","map"],"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): GeneratedCSSRule[] {\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 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"]}
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","map","presetVariable","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, kebabCase } 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): GeneratedCSSRule[] {\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.map( ( presetVariable ) => kebabCase( presetVariable ) )\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 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"]}
@@ -14,7 +14,7 @@ const offset = {
14
14
  name: 'offset',
15
15
  generate: function (style, options) {
16
16
  let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
17
- let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
17
+ let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
18
18
  return generateRule(style, options, path, ruleKey);
19
19
  }
20
20
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["generateRule","color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,eAAe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}
1
+ {"version":3,"sources":["@wordpress/style-engine/src/styles/outline/index.ts"],"names":["generateRule","color","name","generate","style","options","path","ruleKey","offset","outlineStyle","width"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,KAAK,GAAG;AACbC,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,MAAMC,MAAM,GAAG;AACdN,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,QAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,eACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATa,CAAf;AAYA,MAAME,YAAY,GAAG;AACpBP,EAAAA,IAAI,EAAE,OADc;AAEpBC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATmB,CAArB;AAYA,MAAMG,KAAK,GAAG;AACbR,EAAAA,IAAI,EAAE,OADO;AAEbC,EAAAA,QAAQ,EAAE,UACTC,KADS,EAETC,OAFS,EAKe;AAAA,QAFxBC,IAEwB,uEAFP,CAAE,SAAF,EAAa,OAAb,CAEO;AAAA,QADxBC,OACwB,uEADN,cACM;AACxB,WAAOP,YAAY,CAAEI,KAAF,EAASC,OAAT,EAAkBC,IAAlB,EAAwBC,OAAxB,CAAnB;AACA;AATY,CAAd;AAYA,eAAe,CAAEN,KAAF,EAASQ,YAAT,EAAuBD,MAAvB,EAA+BE,KAA/B,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'color' ],\n\t\truleKey: string = 'outlineColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst offset = {\n\tname: 'offset',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'offset' ],\n\t\truleKey: string = 'outlineOffset'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst outlineStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'style' ],\n\t\truleKey: string = 'outlineStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'outline', 'width' ],\n\t\truleKey: string = 'outlineWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nexport default [ color, outlineStyle, offset, width ];\n"]}
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import { get } from 'lodash';
4
+ import { get, kebabCase } from 'lodash';
5
5
  /**
6
6
  * Internal dependencies
7
7
  */
@@ -83,7 +83,7 @@ export function generateBoxRules(style, options, path, ruleKeys) {
83
83
 
84
84
  export function getCSSVarFromStyleValue(styleValue) {
85
85
  if (typeof styleValue === 'string' && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
86
- const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
86
+ const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => kebabCase(presetVariable)).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
87
87
  return `var(--wp--${variable})`;
88
88
  }
89
89
 
@@ -1 +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","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase","map"],"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): GeneratedCSSRule[] {\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 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"]}
1
+ {"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","kebabCase","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","map","presetVariable","join","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, kebabCase } 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): GeneratedCSSRule[] {\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.map( ( presetVariable ) => kebabCase( presetVariable ) )\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 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"]}
@@ -1 +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,GACb,gBAAgB,EAAE,CAYpB;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,MAAM,EAAE,MAAM,GAAI,MAAM,CAGnD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAE,OAAO,EAAE,MAAM,EAAE,GAAI,MAAM,CAGzD"}
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,GACb,gBAAgB,EAAE,CAYpB;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,CAapE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,CAGnD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAE,OAAO,EAAE,MAAM,EAAE,GAAI,MAAM,CAGzD"}
@@ -12,7 +12,7 @@ if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
12
12
  }
13
13
 
14
14
  /**
15
- * Holds, sanitizes, processes and prints CSS declarations for the style engine.
15
+ * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
16
16
  *
17
17
  * @access private
18
18
  */
@@ -12,7 +12,7 @@ if ( class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
12
12
  }
13
13
 
14
14
  /**
15
- * Holds, sanitizes, processes and prints CSS declarations for the style engine.
15
+ * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
16
16
  *
17
17
  * @access private
18
18
  */
@@ -12,7 +12,7 @@ if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
12
12
  }
13
13
 
14
14
  /**
15
- * Holds, sanitizes, processes and prints CSS declarations for the style engine.
15
+ * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
16
16
  *
17
17
  * @access private
18
18
  */
@@ -85,7 +85,7 @@ class WP_Style_Engine_Processor {
85
85
  * Optional. An array of options. Default empty array.
86
86
  *
87
87
  * @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
88
- * @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
88
+ * @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
89
89
  * }
90
90
  *
91
91
  * @return string The computed CSS.
@@ -17,11 +17,12 @@ if ( class_exists( 'WP_Style_Engine' ) ) {
17
17
  * The Style Engine aims to provide a consistent API for rendering styling for blocks across both client-side and server-side applications.
18
18
  *
19
19
  * This class is for internal Core usage and is not supposed to be used by extenders (plugins and/or themes).
20
+ * This class is final and should not be extended.
20
21
  * This is a low-level API that may need to do breaking changes. Please, use wp_style_engine_get_styles instead.
21
22
  *
22
23
  * @access private
23
24
  */
24
- class WP_Style_Engine {
25
+ final class WP_Style_Engine {
25
26
  /**
26
27
  * Style definitions that contain the instructions to
27
28
  * parse/output valid Gutenberg styles from a block's attributes.
@@ -107,28 +108,28 @@ class WP_Style_Engine {
107
108
  'path' => array( 'border', 'width' ),
108
109
  ),
109
110
  'top' => array(
110
- 'value_func' => 'static::get_individual_property_css_declarations',
111
+ 'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
111
112
  'path' => array( 'border', 'top' ),
112
113
  'css_vars' => array(
113
114
  'color' => '--wp--preset--color--$slug',
114
115
  ),
115
116
  ),
116
117
  'right' => array(
117
- 'value_func' => 'static::get_individual_property_css_declarations',
118
+ 'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
118
119
  'path' => array( 'border', 'right' ),
119
120
  'css_vars' => array(
120
121
  'color' => '--wp--preset--color--$slug',
121
122
  ),
122
123
  ),
123
124
  'bottom' => array(
124
- 'value_func' => 'static::get_individual_property_css_declarations',
125
+ 'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
125
126
  'path' => array( 'border', 'bottom' ),
126
127
  'css_vars' => array(
127
128
  'color' => '--wp--preset--color--$slug',
128
129
  ),
129
130
  ),
130
131
  'left' => array(
131
- 'value_func' => 'static::get_individual_property_css_declarations',
132
+ 'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
132
133
  'path' => array( 'border', 'left' ),
133
134
  'css_vars' => array(
134
135
  'color' => '--wp--preset--color--$slug',
package/docs/toc.json ADDED
@@ -0,0 +1,8 @@
1
+ [
2
+ {
3
+ "title": "@wordpress/style-engine Using the Style Engine to generate block supports styles",
4
+ "slug": "using-the-style-engine-with-block-supports",
5
+ "markdown_source": "../packages/style-engine/docs/using-the-style-engine-with-block-supports.md",
6
+ "parent": "packages-style-engine"
7
+ }
8
+ ]
@@ -46,45 +46,105 @@ array(
46
46
  */
47
47
  ```
48
48
 
49
+ ## Use case
50
+ When [registering a block support](https://developer.wordpress.org/reference/classes/wp_block_supports/register/), it is possible to pass an 'apply' callback in the block support config array to add or extend block support attributes with "class" or "style" properties.
51
+
52
+ If a block has opted into the block support, the values of "class" and "style" will be applied to the block element's "class" and "style" attributes accordingly when rendered in the frontend HTML. Note, this applies only to server-side rendered blocks, for example, the [Site Title block](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#site-title).
53
+
54
+ The callback receives `$block_type` and `$block_attributes` as arguments. The `style` attribute within `$block_attributes` only contains the raw style object, if any styles have been set for the block, and not any CSS or classnames to be applied to the block's HTML elements.
55
+
56
+ Here is where `wp_style_engine_get_styles` comes in handy: it will generate CSS and, if appropriate, classnames to be added to the "style" and "class" HTML attributes in the final rendered block markup.
57
+
58
+ Here is a _very_ simplified version of how the [color block support](https://github.com/WordPress/gutenberg/tree/HEAD/lib/block-supports/color.php) works:
59
+
60
+ ```php
61
+ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
62
+ // Get the color styles from the style object.
63
+ $block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;
64
+
65
+ // Since we only want the color styles, pass the color styles only to the Style Engine.
66
+ $styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );
67
+
68
+ // Return the generated styles to be applied to the block's HTML element.
69
+ return array(
70
+ 'style' => $styles['css'],
71
+ 'class' => $styles['classnames']
72
+ );
73
+ }
74
+
75
+ // Register the block support.
76
+ WP_Block_Supports::get_instance()->register(
77
+ 'colors',
78
+ array(
79
+ 'register_attribute' => 'gutenberg_register_colors_support',
80
+ 'apply' => 'gutenberg_apply_colors_support',
81
+ )
82
+ );
83
+ ```
84
+
85
+ It's important to note that, for now, the Style Engine will only generate styles for the following, core block supports:
86
+
87
+ - border
88
+ - color
89
+ - spacing
90
+ - typography
91
+
92
+ In future releases, it will be possible to extend this list.
93
+
49
94
  ## Checking for block support and skip serialization
50
95
 
51
- Before passing the block style object to the Style Engine, it's important to take into account:
96
+ Before passing the block style object to the Style Engine, you'll need to take into account:
52
97
 
53
98
  1. whether the theme has elected to support a particular block style, and
54
99
  2. whether a block has elected to "skip serialization" of that particular block style, that is, opt-out of automatic application of styles to the block's element (usually in order to do it via the block's internals). See the [block API documentation](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#block-supports-api) for further information.
55
100
 
56
101
  If a block either:
57
102
 
58
- - has no support for a specific style, or
103
+ - has no support for a style, or
59
104
  - skips serialization of that style
60
105
 
61
- it's likely that you'll want to remove those style values from the style object.
62
-
63
- For example:
64
-
65
- ```php
66
- // Check if a block has support using block_has_support (https://developer.wordpress.org/reference/functions/block_has_support/)
67
- $has_padding_support = block_has_support( $block_type, array( 'spacing', 'padding' ), false ); // Returns true.
68
- $has_margin_support = block_has_support( $block_type, array( 'spacing', 'margin' ), false ); // Returns false.
69
-
70
- // Check skipping of serialization.
71
- $should_skip_padding = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' ); // Returns true.
72
- $should_skip_margin = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' ); // Returns false.
106
+ it's likely that you'll want to remove those style values from the style object before passing it to the Style Engine with help of two functions:
73
107
 
74
- // Now build the styles object.
75
- $spacing_block_styles = array();
76
- $spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_attributes['style'], array( 'spacing', 'padding' ), null ) : null;
77
- $spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_attributes['style'], array( 'spacing', 'margin' ), null ) : null;
108
+ - wp_should_skip_block_supports_serialization()
109
+ - block_has_support()
78
110
 
79
- // Now get the styles.
80
- $styles = wp_style_engine_get_styles( array( 'spacing' => $spacing_block_styles ) );
111
+ We can now update the apply callback code above so that we'll only return "style" and "class", where a block has support and it doesn't skip serialization:
81
112
 
82
- print_r( $styles );
83
-
84
- /*
85
- // Nothing, because there's no support for margin and the block skip's serialization for padding.
86
- array()
87
- */
113
+ ```php
114
+ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
115
+ // The return value.
116
+ $attributes = array();
117
+
118
+ // Return early if the block skips all serialization for block supports.
119
+ if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'color' ) ) {
120
+ return $attributes;
121
+ }
122
+
123
+ // Checks for support and skip serialization.
124
+ $has_text_support = block_has_support( $block_type, array( 'color', 'text' ), false );
125
+ $has_background_support = block_has_support( $block_type, array( 'color', 'background' ), false );
126
+ $skips_serialization_of_color_text = wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' );
127
+ $skips_serialization_of_color_background = wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' );
128
+
129
+ // Get the color styles from the style object.
130
+ $block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;
131
+
132
+ // The mutated styles object we're going to pass to wp_style_engine_get_styles().
133
+ $color_block_styles = array();
134
+
135
+ // Set the color style values according to whether the block has support and does not skip serialization.
136
+ $spacing_block_styles['text'] = $has_text_support && ! $skips_serialization_of_color_text ? _wp_array_get( $block_color_styles, array( 'text' ), null ) : null;
137
+ $spacing_block_styles['background'] = $has_background_support && ! $skips_serialization_of_color_background ? _wp_array_get( $block_color_styles, array( 'background' ), null ) : null;
138
+
139
+ // Pass the color styles, excluding those that have no support or skip serialization, to the Style Engine.
140
+ $styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );
141
+
142
+ // Return the generated styles to be applied to the block's HTML element.
143
+ return array(
144
+ 'style' => $styles['css'],
145
+ 'class' => $styles['classnames']
146
+ );
147
+ }
88
148
  ```
89
149
 
90
150
  ## Generating classnames and CSS custom selectors from presets
@@ -110,8 +170,8 @@ $preset_font_size = "var:preset|font-size|{$block_attributes['fontSize']}
110
170
  $preset_background_color = "var:preset|color|{$block_attributes['backgroundColor']}";
111
171
 
112
172
  $block_styles = array(
113
- 'typography' => array( 'fontSize' => $preset_font_size ),
114
- 'color' => array( 'background' => $preset_background_color )
173
+ 'typography' => array( 'fontSize' => $preset_font_size ),
174
+ 'color' => array( 'background' => $preset_background_color )
115
175
  );
116
176
 
117
177
  $styles = wp_style_engine_get_styles(
@@ -131,12 +191,12 @@ If you don't want the Style Engine to output the CSS custom vars as well, which
131
191
 
132
192
  ```php
133
193
  $options = array(
134
- // Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
135
- 'convert_vars_to_classnames' => 'true',
194
+ // Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
195
+ 'convert_vars_to_classnames' => 'true',
136
196
  );
137
197
  $styles = wp_style_engine_get_styles(
138
- $block_styles,
139
- $options
198
+ $block_styles,
199
+ $options
140
200
  );
141
201
  print_r( $styles );
142
202
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/style-engine",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "A suite of parsers and compilers for WordPress styles.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
38
+ "gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
39
39
  }
@@ -60,7 +60,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
60
60
  * An array of options to pass to `wp_style_engine_get_styles()`.
61
61
  *
62
62
  * @type string|null $context An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is `null`.
63
- * When set, the style engine will attempt to store the CSS rules, where a selector is also passed.
63
+ * When set, the Style Engine will attempt to store the CSS rules, where a selector is also passed.
64
64
  * @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
65
65
  * @type string $selector Optional. When a selector is passed, the value of `$css` in the return value will comprise a full CSS rule `$selector { ...$css_declarations }`,
66
66
  * otherwise, the value will be a concatenated string of CSS declarations.
@@ -363,13 +363,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
363
363
  'spacing' => array(
364
364
  'margin' => array(
365
365
  'left' => 'var:preset|spacing|10',
366
- 'right' => 'var:preset|spacing|20',
366
+ 'right' => 'var:preset|spacing|3XL',
367
367
  'top' => '1rem',
368
368
  'bottom' => '1rem',
369
369
  ),
370
370
  'padding' => array(
371
371
  'left' => 'var:preset|spacing|30',
372
- 'right' => 'var:preset|spacing|40',
372
+ 'right' => 'var:preset|spacing|3XL',
373
373
  'top' => '14px',
374
374
  'bottom' => '14px',
375
375
  ),
@@ -377,14 +377,14 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
377
377
  ),
378
378
  'options' => array(),
379
379
  'expected_output' => array(
380
- '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;',
380
+ 'css' => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--3-xl);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--3-xl);margin-top:1rem;margin-bottom:1rem;',
381
381
  'declarations' => array(
382
382
  'padding-left' => 'var(--wp--preset--spacing--30)',
383
- 'padding-right' => 'var(--wp--preset--spacing--40)',
383
+ 'padding-right' => 'var(--wp--preset--spacing--3-xl)',
384
384
  'padding-top' => '14px',
385
385
  'padding-bottom' => '14px',
386
386
  'margin-left' => 'var(--wp--preset--spacing--10)',
387
- 'margin-right' => 'var(--wp--preset--spacing--20)',
387
+ 'margin-right' => 'var(--wp--preset--spacing--3-xl)',
388
388
  'margin-top' => '1rem',
389
389
  'margin-bottom' => '1rem',
390
390
  ),
@@ -22,7 +22,7 @@ const offset = {
22
22
  style: Style,
23
23
  options: StyleOptions,
24
24
  path: string[] = [ 'outline', 'offset' ],
25
- ruleKey: string = 'outlineColor'
25
+ ruleKey: string = 'outlineOffset'
26
26
  ): GeneratedCSSRule[] => {
27
27
  return generateRule( style, options, path, ruleKey );
28
28
  },
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import { get } from 'lodash';
4
+ import { get, kebabCase } from 'lodash';
5
5
 
6
6
  /**
7
7
  * Internal dependencies
@@ -119,6 +119,7 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
119
119
  const variable = styleValue
120
120
  .slice( VARIABLE_REFERENCE_PREFIX.length )
121
121
  .split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
122
+ .map( ( presetVariable ) => kebabCase( presetVariable ) )
122
123
  .join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
123
124
  return `var(--wp--${ variable })`;
124
125
  }
package/src/test/index.js CHANGED
@@ -73,13 +73,19 @@ describe( 'generate', () => {
73
73
  letterSpacing: '12px',
74
74
  textTransform: 'uppercase',
75
75
  },
76
+ outline: {
77
+ offset: '2px',
78
+ width: '4px',
79
+ style: 'dashed',
80
+ color: 'red',
81
+ },
76
82
  },
77
83
  {
78
84
  selector: '.some-selector',
79
85
  }
80
86
  )
81
87
  ).toEqual(
82
- ".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
88
+ ".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
83
89
  );
84
90
  } );
85
91
 
@@ -96,6 +102,19 @@ describe( 'generate', () => {
96
102
  );
97
103
  } );
98
104
 
105
+ it( 'should parse preset values and kebab-case the slug', () => {
106
+ expect(
107
+ compileCSS( {
108
+ color: {
109
+ text: 'var:preset|font-size|h1',
110
+ },
111
+ spacing: { margin: { top: 'var:preset|spacing|3XL' } },
112
+ } )
113
+ ).toEqual(
114
+ 'color: var(--wp--preset--font-size--h-1); margin-top: var(--wp--preset--spacing--3-xl);'
115
+ );
116
+ } );
117
+
99
118
  it( 'should parse border rules', () => {
100
119
  expect(
101
120
  compileCSS( {
@@ -221,6 +240,13 @@ describe( 'getCSSRules', () => {
221
240
  letterSpacing: '12px',
222
241
  textTransform: 'uppercase',
223
242
  },
243
+ outline: {
244
+ offset: '2px',
245
+ width: '4px',
246
+ style: 'dashed',
247
+ color: 'red',
248
+ },
249
+ shadow: '10px 10px red',
224
250
  },
225
251
  {
226
252
  selector: '.some-selector',
@@ -242,6 +268,26 @@ describe( 'getCSSRules', () => {
242
268
  key: 'backgroundColor',
243
269
  value: '#555555',
244
270
  },
271
+ {
272
+ selector: '.some-selector',
273
+ key: 'outlineColor',
274
+ value: 'red',
275
+ },
276
+ {
277
+ selector: '.some-selector',
278
+ key: 'outlineStyle',
279
+ value: 'dashed',
280
+ },
281
+ {
282
+ selector: '.some-selector',
283
+ key: 'outlineOffset',
284
+ value: '2px',
285
+ },
286
+ {
287
+ selector: '.some-selector',
288
+ key: 'outlineWidth',
289
+ value: '4px',
290
+ },
245
291
  {
246
292
  selector: '.some-selector',
247
293
  key: 'marginRight',
@@ -263,45 +309,50 @@ describe( 'getCSSRules', () => {
263
309
  value: '5px',
264
310
  },
265
311
  {
266
- key: 'fontFamily',
267
312
  selector: '.some-selector',
313
+ key: 'fontFamily',
268
314
  value: "'Helvetica Neue',sans-serif",
269
315
  },
270
316
  {
271
- key: 'fontSize',
272
317
  selector: '.some-selector',
318
+ key: 'fontSize',
273
319
  value: '2.2rem',
274
320
  },
275
321
  {
276
- key: 'fontStyle',
277
322
  selector: '.some-selector',
323
+ key: 'fontStyle',
278
324
  value: 'italic',
279
325
  },
280
326
  {
281
- key: 'fontWeight',
282
327
  selector: '.some-selector',
328
+ key: 'fontWeight',
283
329
  value: '800',
284
330
  },
285
331
  {
286
- key: 'letterSpacing',
287
332
  selector: '.some-selector',
333
+ key: 'letterSpacing',
288
334
  value: '12px',
289
335
  },
290
336
  {
291
- key: 'lineHeight',
292
337
  selector: '.some-selector',
338
+ key: 'lineHeight',
293
339
  value: '3.3',
294
340
  },
295
341
  {
296
- key: 'textDecoration',
297
342
  selector: '.some-selector',
343
+ key: 'textDecoration',
298
344
  value: 'line-through',
299
345
  },
300
346
  {
301
- key: 'textTransform',
302
347
  selector: '.some-selector',
348
+ key: 'textTransform',
303
349
  value: 'uppercase',
304
350
  },
351
+ {
352
+ selector: '.some-selector',
353
+ key: 'boxShadow',
354
+ value: '10px 10px red',
355
+ },
305
356
  ] );
306
357
  } );
307
358
 
package/src/test/utils.js CHANGED
@@ -1,7 +1,11 @@
1
1
  /**
2
2
  * Internal dependencies
3
3
  */
4
- import { camelCaseJoin, upperFirst } from '../styles/utils';
4
+ import {
5
+ camelCaseJoin,
6
+ getCSSVarFromStyleValue,
7
+ upperFirst,
8
+ } from '../styles/utils';
5
9
 
6
10
  describe( 'utils', () => {
7
11
  describe( 'upperFirst()', () => {
@@ -9,9 +13,30 @@ describe( 'utils', () => {
9
13
  expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
10
14
  } );
11
15
  } );
16
+
12
17
  describe( 'camelCaseJoin()', () => {
13
18
  it( 'should return a camelCase string', () => {
14
19
  expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
15
20
  } );
16
21
  } );
22
+
23
+ describe( 'getCSSVarFromStyleValue()', () => {
24
+ it( 'should return a compiled CSS var', () => {
25
+ expect(
26
+ getCSSVarFromStyleValue( 'var:preset|color|yellow-bun' )
27
+ ).toEqual( 'var(--wp--preset--color--yellow-bun)' );
28
+ } );
29
+
30
+ it( 'should kebab case numbers', () => {
31
+ expect(
32
+ getCSSVarFromStyleValue( 'var:preset|font-size|h1' )
33
+ ).toEqual( 'var(--wp--preset--font-size--h-1)' );
34
+ } );
35
+
36
+ it( 'should kebab case camel case', () => {
37
+ expect(
38
+ getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )
39
+ ).toEqual( 'var(--wp--preset--color--heavenly-blue)' );
40
+ } );
41
+ } );
17
42
  } );
package/style-engine.php CHANGED
@@ -26,7 +26,7 @@
26
26
  * Optional. An array of options. Default empty array.
27
27
  *
28
28
  * @type string|null $context An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is `null`.
29
- * When set, the style engine will attempt to store the CSS rules, where a selector is also passed.
29
+ * When set, the Style Engine will attempt to store the CSS rules, where a selector is also passed.
30
30
  * @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
31
31
  * @type string $selector Optional. When a selector is passed, the value of `$css` in the return value will comprise a full CSS rule `$selector { ...$css_declarations }`,
32
32
  * otherwise, the value will be a concatenated string of CSS declarations.
@@ -91,9 +91,9 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
91
91
  * Optional. An array of options. Default empty array.
92
92
  *
93
93
  * @type string|null $context An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
94
- * When set, the style engine will attempt to store the CSS rules.
94
+ * When set, the Style Engine will attempt to store the CSS rules.
95
95
  * @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
96
- * @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
96
+ * @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
97
97
  * }
98
98
  *
99
99
  * @return string A string of compiled CSS declarations, or empty string.
@@ -140,7 +140,7 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
140
140
  * Optional. An array of options. Default empty array.
141
141
  *
142
142
  * @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
143
- * @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
143
+ * @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
144
144
  * }
145
145
  *
146
146
  * @return string A compiled CSS string.
@@ -1 +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/shadow/index.ts","./src/styles/outline/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},"055acd3f486e8f2a4cb9d6a252b254ec0988065b222425e90258bdd3b80c2248","301543eebfdd2fc5e5d6d928c5ed3f65bd377e95d184eb1351df5fe38ef9eac0","01b162605d4d103e9a902768b8db3b7c64c3d50afef3056905c4f66c50e8685a","6a47ab963c0de27ca91c40b8a8370d4c368f51bbcfeb70ca028fa3679afa56f9","49dec6685c69b84a795d1e2c2a8d7ac8953efb4a7dadb9b1b04c836053e0ea21","8cbcd8c85fe3627d4c9e75ccf2784b7e4d0082396600e9d432f1cd61009a7933","f303eb9a884f47802f08d6b1d376c737856c29783532a44116bfc7e4929a7204","e8dc9f16ad89ba54f1e7202369a69a265ccd5eec0df39cf429ff1a941603d4da","51f25b3291c4ca38c72cb150453eb2961bb0ca2891102719064e2a695c47a55a","b9494715addecd488c8424333bdcb21390262ce9e7a5c244009e2ea21328181a","caa45d96bc56c4f2ea6dfbe715413636f0d8b74121a8820b70526a3ae1bfd9b9","3d0705f37a3de49d9210d2656cd697ae0cd93476a7e60f7b099797166e4d78b0","b7003bd91d5a0b8bf84a3ef07a0cf5a4b8e0cef58d9e6404f54f05fd4ed6f0b2","f663bea39fe633f8875848f18196303c24fe9d039549ae750c0d6e3bd9571032","1d74aab11e4f2e9bf4eff69b158bff07261a20cd45606cad289852365eb1c23a","32464ebe97607450c6960c489338d41d381ebe1a465b6c5b59aad285bbd64e0b"],"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,77],[63,65],[67,68,69],[66,70,71,72,75,76],[73,74],[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],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,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],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,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,78,66,67,68,70,69,64,77,72,71,75,74,73,76,65,63]},"version":"4.4.2"}
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/shadow/index.ts","./src/styles/outline/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},"055acd3f486e8f2a4cb9d6a252b254ec0988065b222425e90258bdd3b80c2248","301543eebfdd2fc5e5d6d928c5ed3f65bd377e95d184eb1351df5fe38ef9eac0","3fc8ed5a57e9a0e6831895b3d20ae8fc6e69ded33fdd39922287867e2df6c47e","6a47ab963c0de27ca91c40b8a8370d4c368f51bbcfeb70ca028fa3679afa56f9","49dec6685c69b84a795d1e2c2a8d7ac8953efb4a7dadb9b1b04c836053e0ea21","8cbcd8c85fe3627d4c9e75ccf2784b7e4d0082396600e9d432f1cd61009a7933","f303eb9a884f47802f08d6b1d376c737856c29783532a44116bfc7e4929a7204","e8dc9f16ad89ba54f1e7202369a69a265ccd5eec0df39cf429ff1a941603d4da","51f25b3291c4ca38c72cb150453eb2961bb0ca2891102719064e2a695c47a55a","697ce73163b0e4ac9fe325a666e48b76b0754eff4b3fe7906369894a76cd860f","caa45d96bc56c4f2ea6dfbe715413636f0d8b74121a8820b70526a3ae1bfd9b9","3d0705f37a3de49d9210d2656cd697ae0cd93476a7e60f7b099797166e4d78b0","b7003bd91d5a0b8bf84a3ef07a0cf5a4b8e0cef58d9e6404f54f05fd4ed6f0b2","f663bea39fe633f8875848f18196303c24fe9d039549ae750c0d6e3bd9571032","1d74aab11e4f2e9bf4eff69b158bff07261a20cd45606cad289852365eb1c23a","32464ebe97607450c6960c489338d41d381ebe1a465b6c5b59aad285bbd64e0b"],"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,77],[63,65],[67,68,69],[66,70,71,72,75,76],[73,74],[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],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,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],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,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,78,66,67,68,70,69,64,77,72,71,75,74,73,76,65,63]},"version":"4.4.2"}