@wordpress/style-engine 0.14.0 → 0.14.1-next.d6164808d3.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/README.md +64 -58
- package/build/index.js +7 -5
- package/build/index.js.map +1 -1
- package/build/styles/typography/index.js +7 -1
- package/build/styles/typography/index.js.map +1 -1
- package/build/styles/utils.js +5 -5
- package/build/styles/utils.js.map +1 -1
- package/build-module/index.js +6 -4
- package/build-module/index.js.map +1 -1
- package/build-module/styles/typography/index.js +7 -1
- package/build-module/styles/typography/index.js.map +1 -1
- package/build-module/styles/utils.js +5 -5
- package/build-module/styles/utils.js.map +1 -1
- package/build-types/index.d.ts +23 -0
- package/build-types/index.d.ts.map +1 -0
- package/build-types/styles/border/index.d.ts +10 -0
- package/build-types/styles/border/index.d.ts.map +1 -0
- package/build-types/styles/color/background.d.ts +14 -0
- package/build-types/styles/color/background.d.ts.map +1 -0
- package/build-types/styles/color/gradient.d.ts +14 -0
- package/build-types/styles/color/gradient.d.ts.map +1 -0
- package/build-types/styles/color/index.d.ts +10 -0
- package/build-types/styles/color/index.d.ts.map +1 -0
- package/build-types/styles/color/text.d.ts +14 -0
- package/build-types/styles/color/text.d.ts.map +1 -0
- package/build-types/styles/constants.d.ts +4 -0
- package/build-types/styles/constants.d.ts.map +1 -0
- package/build-types/styles/index.d.ts +5 -0
- package/build-types/styles/index.d.ts.map +1 -0
- package/build-types/styles/spacing/index.d.ts +6 -0
- package/build-types/styles/spacing/index.d.ts.map +1 -0
- package/build-types/styles/spacing/margin.d.ts +10 -0
- package/build-types/styles/spacing/margin.d.ts.map +1 -0
- package/build-types/styles/spacing/padding.d.ts +10 -0
- package/build-types/styles/spacing/padding.d.ts.map +1 -0
- package/build-types/styles/typography/index.d.ts +14 -0
- package/build-types/styles/typography/index.d.ts.map +1 -0
- package/build-types/styles/utils.d.ts +48 -0
- package/build-types/styles/utils.d.ts.map +1 -0
- package/build-types/types.d.ts +85 -0
- package/build-types/types.d.ts.map +1 -0
- package/class-wp-style-engine-css-declarations.php +18 -15
- package/class-wp-style-engine-css-rule.php +5 -9
- package/class-wp-style-engine-css-rules-store.php +5 -4
- package/class-wp-style-engine-processor.php +9 -1
- package/class-wp-style-engine.php +83 -92
- package/package.json +2 -2
- package/phpunit/class-wp-style-engine-css-declarations-test.php +2 -0
- package/phpunit/class-wp-style-engine-css-rules-store-test.php +14 -0
- package/phpunit/class-wp-style-engine-test.php +23 -19
- package/src/index.ts +4 -4
- package/src/styles/typography/index.ts +13 -0
- package/src/styles/utils.ts +5 -5
- package/src/test/index.js +24 -10
- package/src/types.ts +3 -4
- package/tsconfig.tsbuildinfo +1 -0
package/README.md
CHANGED
|
@@ -2,6 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
The Style Engine powering global styles and block customizations.
|
|
4
4
|
|
|
5
|
+
## Important
|
|
6
|
+
|
|
7
|
+
This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a
|
|
8
|
+
style object that is consistent between: backend, frontend, block style object and theme.json.
|
|
9
|
+
|
|
10
|
+
Because this package is experimental and still in development it does not yet generate a `wp.styleEngine` global. To get
|
|
11
|
+
there, the following tasks need to be completed:
|
|
12
|
+
|
|
13
|
+
**TODO List:**
|
|
14
|
+
|
|
15
|
+
- Add style definitions for all the currently supported styles in blocks and theme.json.
|
|
16
|
+
- The CSS variable shortcuts for values (for presets...)
|
|
17
|
+
- Support generating styles in the frontend. (Ongoing)
|
|
18
|
+
- Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing)
|
|
19
|
+
- Refactor all block styles to use the style engine server side. (Ongoing)
|
|
20
|
+
- Consolidate global and block style rendering and enqueuing
|
|
21
|
+
- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific
|
|
22
|
+
attributes).
|
|
23
|
+
|
|
24
|
+
See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
|
|
25
|
+
|
|
5
26
|
## Backend API
|
|
6
27
|
|
|
7
28
|
### wp_style_engine_get_styles()
|
|
@@ -17,8 +38,7 @@ _Parameters_
|
|
|
17
38
|
- _$block_styles_ `array` A block's `attributes.style` object or the top level styles in theme.json
|
|
18
39
|
- _$options_ `array<string|boolean>` An array of options to determine the output.
|
|
19
40
|
- _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
|
|
20
|
-
global-styles'. Default is 'block-supports'.
|
|
21
|
-
- _enqueue_ `boolean` When `true` will attempt to store and enqueue for rendering in a `style` tag on the site frontend.
|
|
41
|
+
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.
|
|
22
42
|
- _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* )
|
|
23
43
|
values. Default is `false`.
|
|
24
44
|
- _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`,
|
|
@@ -41,8 +61,7 @@ To enqueue a style for rendering in the site's frontend, the `$options` array re
|
|
|
41
61
|
|
|
42
62
|
1. **selector (string)** - this is the CSS selector for your block style CSS declarations.
|
|
43
63
|
2. **context (string)** - this tells the style engine where to store the styles. Styles in the same context will be
|
|
44
|
-
|
|
45
|
-
3. **enqueue (boolean)** - tells the style engine to store the styles.
|
|
64
|
+
stored together.
|
|
46
65
|
|
|
47
66
|
`wp_style_engine_get_styles` will return the compiled CSS and CSS declarations array.
|
|
48
67
|
|
|
@@ -57,7 +76,6 @@ $styles = wp_style_engine_get_styles(
|
|
|
57
76
|
array(
|
|
58
77
|
'selector' => '.a-selector',
|
|
59
78
|
'context' => 'block-supports',
|
|
60
|
-
'enqueue' => true,
|
|
61
79
|
)
|
|
62
80
|
);
|
|
63
81
|
print_r( $styles );
|
|
@@ -81,8 +99,7 @@ _Parameters_
|
|
|
81
99
|
- _$css_rules_ `array<array>`
|
|
82
100
|
- _$options_ `array<string|boolean>` An array of options to determine the output.
|
|
83
101
|
- _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
|
|
84
|
-
global-styles'.
|
|
85
|
-
- _enqueue_ `boolean` When `true` will store using the `context` value as a key.
|
|
102
|
+
global-styles'. When set, the style engine will store the CSS rules using the `context` value as a key.
|
|
86
103
|
|
|
87
104
|
_Returns_
|
|
88
105
|
`string` A compiled CSS string based on `$css_rules`.
|
|
@@ -113,7 +130,6 @@ $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
|
|
|
113
130
|
$styles,
|
|
114
131
|
array(
|
|
115
132
|
'context' => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
|
|
116
|
-
'enqueue' => true, // Render the styles for output.
|
|
117
133
|
)
|
|
118
134
|
);
|
|
119
135
|
print_r( $stylesheet ); // .wp-pumpkin, .wp-kumquat {color:orange}.wp-tomato{color:red;padding:100px}
|
|
@@ -125,13 +141,15 @@ Returns compiled CSS from a store, if found.
|
|
|
125
141
|
|
|
126
142
|
_Parameters_
|
|
127
143
|
|
|
128
|
-
- _$
|
|
144
|
+
- _$store_name_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
|
|
129
145
|
|
|
130
146
|
_Returns_
|
|
131
147
|
`string` A compiled CSS string from the stored CSS rules.
|
|
132
148
|
|
|
133
149
|
#### Usage
|
|
134
150
|
|
|
151
|
+
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.
|
|
152
|
+
|
|
135
153
|
```php
|
|
136
154
|
// First register some styles.
|
|
137
155
|
$styles = array(
|
|
@@ -152,6 +170,11 @@ $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
|
|
|
152
170
|
// Later, fetch compiled rules from store.
|
|
153
171
|
$stylesheet = gutenberg_style_engine_get_stylesheet_from_store( 'fruit-styles' );
|
|
154
172
|
print_r( $stylesheet ); // .wp-apple{color:green;}
|
|
173
|
+
if ( ! empty( $stylesheet ) ) {
|
|
174
|
+
wp_register_style( 'my-stylesheet', false, array(), true, true );
|
|
175
|
+
wp_add_inline_style( 'my-stylesheet', $stylesheet );
|
|
176
|
+
wp_enqueue_style( 'my-stylesheet' );
|
|
177
|
+
}
|
|
155
178
|
```
|
|
156
179
|
|
|
157
180
|
## Installation (JS only)
|
|
@@ -167,26 +190,37 @@ limited or no support for such language features and APIs, you should
|
|
|
167
190
|
include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill)
|
|
168
191
|
in your code._
|
|
169
192
|
|
|
170
|
-
##
|
|
193
|
+
## Usage
|
|
171
194
|
|
|
172
|
-
|
|
173
|
-
style object that is consistent between: backend, frontend, block style object and theme.json.
|
|
195
|
+
<!-- START TOKEN(Autogenerated API docs) -->
|
|
174
196
|
|
|
175
|
-
|
|
176
|
-
there, the following tasks need to be completed:
|
|
197
|
+
### compileCSS
|
|
177
198
|
|
|
178
|
-
|
|
199
|
+
Generates a stylesheet for a given style object and selector.
|
|
179
200
|
|
|
180
|
-
|
|
181
|
-
- The CSS variable shortcuts for values (for presets...)
|
|
182
|
-
- Support generating styles in the frontend. (Ongoing)
|
|
183
|
-
- Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing)
|
|
184
|
-
- Refactor all block styles to use the style engine server side. (Ongoing)
|
|
185
|
-
- Consolidate global and block style rendering and enqueuing
|
|
186
|
-
- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific
|
|
187
|
-
attributes).
|
|
201
|
+
_Parameters_
|
|
188
202
|
|
|
189
|
-
|
|
203
|
+
- _style_ `Style`: Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
204
|
+
- _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
|
|
205
|
+
|
|
206
|
+
_Returns_
|
|
207
|
+
|
|
208
|
+
- `string`: generated stylesheet.
|
|
209
|
+
|
|
210
|
+
### getCSSRules
|
|
211
|
+
|
|
212
|
+
Returns a JSON representation of the generated CSS rules.
|
|
213
|
+
|
|
214
|
+
_Parameters_
|
|
215
|
+
|
|
216
|
+
- _style_ `Style`: Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
217
|
+
- _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
|
|
218
|
+
|
|
219
|
+
_Returns_
|
|
220
|
+
|
|
221
|
+
- `GeneratedCSSRule[]`: generated styles.
|
|
222
|
+
|
|
223
|
+
<!-- END TOKEN(Autogenerated API docs) -->
|
|
190
224
|
|
|
191
225
|
## Glossary
|
|
192
226
|
|
|
@@ -195,8 +229,6 @@ A guide to the terms and variable names referenced by the Style Engine package.
|
|
|
195
229
|
<dl>
|
|
196
230
|
<dt>Block style (Gutenberg internal)</dt>
|
|
197
231
|
<dd>An object comprising a block's style attribute that contains a block's style values. E.g., <code>{ spacing: { margin: '10px' }, color: { ... }, ... }</code></dd>
|
|
198
|
-
<dt>Global styles (Gutenberg internal)</dt>
|
|
199
|
-
<dd>A merged block styles object containing values from a theme's theme.json and user styles settings.</dd>
|
|
200
232
|
<dt>CSS declaration or (CSS property declaration)</dt>
|
|
201
233
|
<dd>A CSS property paired with a CSS value. E.g., <code>color: pink</code> </dd>
|
|
202
234
|
<dt>CSS declarations block</dt>
|
|
@@ -213,40 +245,14 @@ A guide to the terms and variable names referenced by the Style Engine package.
|
|
|
213
245
|
<dd>The value of a CSS property. The value determines how the property is modified. E.g., the <code>10vw</code> in <code>height: 10vw</code>.</dd>
|
|
214
246
|
<dt>CSS variables (vars) or CSS custom properties</dt>
|
|
215
247
|
<dd>Properties, whose values can be reused in other CSS declarations. Set using custom property notation (e.g., <code>--wp--preset--olive: #808000;</code>) and accessed using the <code>var()</code> function (e.g., <code>color: var( --wp--preset--olive );</code>). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">MDN article on CSS custom properties</a>.</dd>
|
|
248
|
+
<dt>Global styles (Gutenberg internal)</dt>
|
|
249
|
+
<dd>A merged block styles object containing values from a theme's theme.json and user styles settings.</dd>
|
|
216
250
|
<dt>Inline styles</dt>
|
|
217
251
|
<dd>Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute</dd>
|
|
252
|
+
<dt>Processor</dt>
|
|
253
|
+
<dd>Performs compilation and optimization on stored CSS rules. See the class `WP_Style_Engine_Processor`.</dd>
|
|
254
|
+
<dt>Store</dt>
|
|
255
|
+
<dd>A data object that contains related styles. See the class `WP_Style_Engine_CSS_Rules_Store`.</dd>
|
|
218
256
|
</dl>
|
|
219
257
|
|
|
220
|
-
## Usage
|
|
221
|
-
|
|
222
|
-
<!-- START TOKEN(Autogenerated API docs) -->
|
|
223
|
-
|
|
224
|
-
### generate
|
|
225
|
-
|
|
226
|
-
Generates a stylesheet for a given style object and selector.
|
|
227
|
-
|
|
228
|
-
_Parameters_
|
|
229
|
-
|
|
230
|
-
- _style_ `Style`: Style object.
|
|
231
|
-
- _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
|
|
232
|
-
|
|
233
|
-
_Returns_
|
|
234
|
-
|
|
235
|
-
- `string`: generated stylesheet.
|
|
236
|
-
|
|
237
|
-
### getCSSRules
|
|
238
|
-
|
|
239
|
-
Returns a JSON representation of the generated CSS rules.
|
|
240
|
-
|
|
241
|
-
_Parameters_
|
|
242
|
-
|
|
243
|
-
- _style_ `Style`: Style object.
|
|
244
|
-
- _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
|
|
245
|
-
|
|
246
|
-
_Returns_
|
|
247
|
-
|
|
248
|
-
- `GeneratedCSSRule[]`: generated styles.
|
|
249
|
-
|
|
250
|
-
<!-- END TOKEN(Autogenerated API docs) -->
|
|
251
|
-
|
|
252
258
|
<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
|
package/build/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.compileCSS = compileCSS;
|
|
7
7
|
exports.getCSSRules = getCSSRules;
|
|
8
8
|
|
|
9
9
|
var _lodash = require("lodash");
|
|
@@ -17,12 +17,13 @@ var _styles = require("./styles");
|
|
|
17
17
|
/**
|
|
18
18
|
* Generates a stylesheet for a given style object and selector.
|
|
19
19
|
*
|
|
20
|
-
* @param style Style object.
|
|
20
|
+
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
21
21
|
* @param options Options object with settings to adjust how the styles are generated.
|
|
22
22
|
*
|
|
23
23
|
* @return generated stylesheet.
|
|
24
24
|
*/
|
|
25
|
-
function
|
|
25
|
+
function compileCSS(style) {
|
|
26
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
26
27
|
const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
|
|
27
28
|
|
|
28
29
|
if (!(options !== null && options !== void 0 && options.selector)) {
|
|
@@ -43,14 +44,15 @@ function generate(style, options) {
|
|
|
43
44
|
/**
|
|
44
45
|
* Returns a JSON representation of the generated CSS rules.
|
|
45
46
|
*
|
|
46
|
-
* @param style Style object.
|
|
47
|
+
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
47
48
|
* @param options Options object with settings to adjust how the styles are generated.
|
|
48
49
|
*
|
|
49
50
|
* @return generated styles.
|
|
50
51
|
*/
|
|
51
52
|
|
|
52
53
|
|
|
53
|
-
function getCSSRules(style
|
|
54
|
+
function getCSSRules(style) {
|
|
55
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
54
56
|
const rules = [];
|
|
55
57
|
|
|
56
58
|
_styles.styleDefinitions.forEach(definition => {
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","map","styleDefinitions","definition","generate"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,UAAT,CAAqBC,KAArB,EAAwE;AAAA,MAArCC,OAAqC,uEAAb,EAAa;AAC9E,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CAD8E,CAG9E;;AACA,MAAK,EAAEA,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEG,QAAX,CAAL,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAG,uBAAWD,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAG,qBAASV,KAAT,EAAgB,UAAhB,CAArB;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACT,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACE,GAAhB,CAAuB,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOM,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACF,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASR,WAAT,CACNH,KADM,EAGe;AAAA,MADrBC,OACqB,uEADG,EACH;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAkB,2BAAiBd,OAAjB,CAA4Be,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACC,QAAlB,KAA+B,UAApC,EAAiD;AAChDpB,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGa,UAAU,CAACC,QAAX,CAAqBtB,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}
|
|
@@ -28,6 +28,12 @@ const fontWeight = {
|
|
|
28
28
|
return (0, _utils.generateRule)(style, options, ['typography', 'fontWeight'], 'fontWeight');
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
|
+
const fontFamily = {
|
|
32
|
+
name: 'fontFamily',
|
|
33
|
+
generate: (style, options) => {
|
|
34
|
+
return (0, _utils.generateRule)(style, options, ['typography', 'fontFamily'], 'fontFamily');
|
|
35
|
+
}
|
|
36
|
+
};
|
|
31
37
|
const letterSpacing = {
|
|
32
38
|
name: 'letterSpacing',
|
|
33
39
|
generate: (style, options) => {
|
|
@@ -52,6 +58,6 @@ const textTransform = {
|
|
|
52
58
|
return (0, _utils.generateRule)(style, options, ['typography', 'textTransform'], 'textTransform');
|
|
53
59
|
}
|
|
54
60
|
};
|
|
55
|
-
var _default = [fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
|
|
61
|
+
var _default = [fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
|
|
56
62
|
exports.default = _default;
|
|
57
63
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["fontSize","name","generate","style","options","fontStyle","fontWeight","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,UAAhB,CAHM,EAIN,UAJM,CAAP;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,WAAhB,CAHM,EAIN,WAJM,CAAP;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,YAAhB,CAHM,EAIN,YAJM,CAAP;AAMA;AATiB,CAAnB;AAYA,MAAMG,aAAa,GAAG;
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["fontSize","name","generate","style","options","fontStyle","fontWeight","fontFamily","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,UAAhB,CAHM,EAIN,UAJM,CAAP;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,WAAhB,CAHM,EAIN,WAJM,CAAP;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,YAAhB,CAHM,EAIN,YAJM,CAAP;AAMA;AATiB,CAAnB;AAYA,MAAMG,UAAU,GAAG;AAClBN,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,YAAhB,CAHM,EAIN,YAJM,CAAP;AAMA;AATiB,CAAnB;AAYA,MAAMI,aAAa,GAAG;AACrBP,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,eAAhB,CAHM,EAIN,eAJM,CAAP;AAMA;AAToB,CAAtB;AAYA,MAAMK,UAAU,GAAG;AAClBR,EAAAA,IAAI,EAAE,eADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,YAAhB,CAHM,EAIN,YAJM,CAAP;AAMA;AATiB,CAAnB;AAYA,MAAMM,cAAc,GAAG;AACtBT,EAAAA,IAAI,EAAE,gBADgB;AAEtBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,gBAAhB,CAHM,EAIN,gBAJM,CAAP;AAMA;AATqB,CAAvB;AAYA,MAAMO,aAAa,GAAG;AACrBV,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,yBACND,KADM,EAENC,OAFM,EAGN,CAAE,YAAF,EAAgB,eAAhB,CAHM,EAIN,eAJM,CAAP;AAMA;AAToB,CAAtB;eAYe,CACdG,UADc,EAEdP,QAFc,EAGdK,SAHc,EAIdC,UAJc,EAKdE,aALc,EAMdC,UANc,EAOdC,cAPc,EAQdC,aARc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst fontSize = {\n\tname: 'fontSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t'fontSize'\n\t\t);\n\t},\n};\n\nconst fontStyle = {\n\tname: 'fontStyle',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontStyle' ],\n\t\t\t'fontStyle'\n\t\t);\n\t},\n};\n\nconst fontWeight = {\n\tname: 'fontWeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontWeight' ],\n\t\t\t'fontWeight'\n\t\t);\n\t},\n};\n\nconst fontFamily = {\n\tname: 'fontFamily',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontFamily' ],\n\t\t\t'fontFamily'\n\t\t);\n\t},\n};\n\nconst letterSpacing = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t'letterSpacing'\n\t\t);\n\t},\n};\n\nconst lineHeight = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t'lineHeight'\n\t\t);\n\t},\n};\n\nconst textDecoration = {\n\tname: 'textDecoration',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t'textDecoration'\n\t\t);\n\t},\n};\n\nconst textTransform = {\n\tname: 'textTransform',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t'textTransform'\n\t\t);\n\t},\n};\n\nexport default [\n\tfontFamily,\n\tfontSize,\n\tfontStyle,\n\tfontWeight,\n\tletterSpacing,\n\tlineHeight,\n\ttextDecoration,\n\ttextTransform,\n];\n"]}
|
package/build/styles/utils.js
CHANGED
|
@@ -37,11 +37,11 @@ function generateRule(style, options, path, ruleKey) {
|
|
|
37
37
|
/**
|
|
38
38
|
* Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
|
|
39
39
|
*
|
|
40
|
-
* @param
|
|
41
|
-
* @param
|
|
42
|
-
* @param
|
|
43
|
-
* @param
|
|
44
|
-
* @param
|
|
40
|
+
* @param style Style object.
|
|
41
|
+
* @param options Options object with settings to adjust how the styles are generated.
|
|
42
|
+
* @param path An array of strings representing the path to the style value in the style object.
|
|
43
|
+
* @param ruleKeys An array of CSS property keys and patterns.
|
|
44
|
+
* @param individualProperties The "sides" or individual properties for which to generate rules.
|
|
45
45
|
*
|
|
46
46
|
* @return GeneratedCSSRule[] CSS rules.
|
|
47
47
|
*/
|
|
@@ -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","firstLetter","rest","toUpperCase"],"mappings":";;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKL;AACD,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADpB;AAECC,IAAAA,GAAG,EAAEH,OAFN;AAGCI,IAAAA,KAAK,EAAEC,uBAAuB,CAAEJ,UAAF;AAH/B,GADA,CADc,GAQd,EARH;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINQ,QAJM,EAMe;AAAA,MADrBC,oBACqB,uEADY,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CACZ;AACrB,QAAMC,QAAkC,GAAG,iBAAKZ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEU,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXT,MAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEI,QAAQ,CAACK,OAFH;AAGXR,MAAAA,KAAK,EAAEK;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMI,SAAS,GAAGL,oBAAoB,CAACM,MAArB,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMZ,KAAyB,GAAGC,uBAAuB,CACxD,iBAAKI,QAAL,EAAe,CAAEO,IAAF,CAAf,CADwD,CAAzD;;AAGA,UAAKZ,KAAL,EAAa;AACZW,QAAAA,GAAG,CAACJ,IAAJ,CAAU;AACTT,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEU,UAAV,CAAqBC,OAArB,CACJ,IADI,EAEJC,UAAU,CAAEH,IAAF,CAFN,CAFI;AAMTZ,UAAAA;AANS,SAAV;AAQA;;AACD,aAAOW,GAAP;AACA,KAhBgB,EAiBjB,EAjBiB,CAAlB;AAmBAL,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGE,SAAf;AACA;;AAED,SAAOH,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGrB,UAAU,CACzBsB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,IAHe,CAGTC,8CAHS,CAAjB;AAIA,WAAQ,aAAaN,QAAU,GAA/B;AACA;;AACD,SAAOrB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkB,UAAT,OAAwD;AAAA,MAAnC,CAAEU,WAAF,EAAe,GAAGC,IAAlB,CAAmC;AAC9D,SAAOD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACH,IAAL,CAAW,EAAX,CAAnC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","firstLetter","rest","toUpperCase"],"mappings":";;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKL;AACD,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADpB;AAECC,IAAAA,GAAG,EAAEH,OAFN;AAGCI,IAAAA,KAAK,EAAEC,uBAAuB,CAAEJ,UAAF;AAH/B,GADA,CADc,GAQd,EARH;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINQ,QAJM,EAMe;AAAA,MADrBC,oBACqB,uEADY,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CACZ;AACrB,QAAMC,QAAkC,GAAG,iBAAKZ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEU,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXT,MAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEI,QAAQ,CAACK,OAFH;AAGXR,MAAAA,KAAK,EAAEK;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMI,SAAS,GAAGL,oBAAoB,CAACM,MAArB,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMZ,KAAyB,GAAGC,uBAAuB,CACxD,iBAAKI,QAAL,EAAe,CAAEO,IAAF,CAAf,CADwD,CAAzD;;AAGA,UAAKZ,KAAL,EAAa;AACZW,QAAAA,GAAG,CAACJ,IAAJ,CAAU;AACTT,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEU,UAAV,CAAqBC,OAArB,CACJ,IADI,EAEJC,UAAU,CAAEH,IAAF,CAFN,CAFI;AAMTZ,UAAAA;AANS,SAAV;AAQA;;AACD,aAAOW,GAAP;AACA,KAhBgB,EAiBjB,EAjBiB,CAAlB;AAmBAL,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGE,SAAf;AACA;;AAED,SAAOH,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGrB,UAAU,CACzBsB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,IAHe,CAGTC,8CAHS,CAAjB;AAIA,WAAQ,aAAaN,QAAU,GAA/B;AACA;;AACD,SAAOrB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkB,UAAT,OAAwD;AAAA,MAAnC,CAAEU,WAAF,EAAe,GAAGC,IAAlB,CAAmC;AAC9D,SAAOD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACH,IAAL,CAAW,EAAX,CAAnC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKeys An array of CSS property keys and patterns.\n * @param individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}
|
package/build-module/index.js
CHANGED
|
@@ -10,13 +10,14 @@ import { styleDefinitions } from './styles';
|
|
|
10
10
|
/**
|
|
11
11
|
* Generates a stylesheet for a given style object and selector.
|
|
12
12
|
*
|
|
13
|
-
* @param style Style object.
|
|
13
|
+
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
14
14
|
* @param options Options object with settings to adjust how the styles are generated.
|
|
15
15
|
*
|
|
16
16
|
* @return generated stylesheet.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
export function
|
|
19
|
+
export function compileCSS(style) {
|
|
20
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
20
21
|
const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
|
|
21
22
|
|
|
22
23
|
if (!(options !== null && options !== void 0 && options.selector)) {
|
|
@@ -37,13 +38,14 @@ export function generate(style, options) {
|
|
|
37
38
|
/**
|
|
38
39
|
* Returns a JSON representation of the generated CSS rules.
|
|
39
40
|
*
|
|
40
|
-
* @param style Style object.
|
|
41
|
+
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
41
42
|
* @param options Options object with settings to adjust how the styles are generated.
|
|
42
43
|
*
|
|
43
44
|
* @return generated styles.
|
|
44
45
|
*/
|
|
45
46
|
|
|
46
|
-
export function getCSSRules(style
|
|
47
|
+
export function getCSSRules(style) {
|
|
48
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
47
49
|
const rules = [];
|
|
48
50
|
styleDefinitions.forEach(definition => {
|
|
49
51
|
if (typeof definition.generate === 'function') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["groupBy","kebabCase","styleDefinitions","
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["groupBy","kebabCase","styleDefinitions","compileCSS","style","options","rules","getCSSRules","selector","inlineRules","forEach","rule","push","key","value","join","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","map","definition","generate"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,SAAlB,QAAmC,QAAnC;AAEA;AACA;AACA;;AAOA,SAASC,gBAAT,QAAiC,UAAjC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,UAAT,CAAqBC,KAArB,EAAwE;AAAA,MAArCC,OAAqC,uEAAb,EAAa;AAC9E,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB,CAD8E,CAG9E;;AACA,MAAK,EAAEA,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEG,QAAX,CAAL,EAA2B;AAC1B,UAAMC,WAAqB,GAAG,EAA9B;AACAH,IAAAA,KAAK,CAACI,OAAN,CAAiBC,IAAF,IAAY;AAC1BF,MAAAA,WAAW,CAACG,IAAZ,CAAmB,GAAGX,SAAS,CAAEU,IAAI,CAACE,GAAP,CAAc,KAAKF,IAAI,CAACG,KAAO,GAA9D;AACA,KAFD;AAGA,WAAOL,WAAW,CAACM,IAAZ,CAAkB,GAAlB,CAAP;AACA;;AAED,QAAMC,YAAY,GAAGhB,OAAO,CAAEM,KAAF,EAAS,UAAT,CAA5B;AACA,QAAMW,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACT,IAAJ,CACE,GAAGU,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBC,GADqB,CAEnBZ,IAAF,IACE,GAAGV,SAAS,CAAEU,IAAI,CAACE,GAAP,CAAc,KAAKF,IAAI,CAACG,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOM,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACF,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASR,WAAT,CACNH,KADM,EAGe;AAAA,MADrBC,OACqB,uEADG,EACH;AACrB,QAAMC,KAAyB,GAAG,EAAlC;AACAJ,EAAAA,gBAAgB,CAACQ,OAAjB,CAA4Bc,UAAF,IAAmC;AAC5D,QAAK,OAAOA,UAAU,CAACC,QAAlB,KAA+B,UAApC,EAAiD;AAChDnB,MAAAA,KAAK,CAACM,IAAN,CAAY,GAAGY,UAAU,CAACC,QAAX,CAAqBrB,KAArB,EAA4BC,OAA5B,CAAf;AACA;AACD,GAJD;AAMA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function compileCSS( style: Style, options: StyleOptions = {} ): string {\n\tconst rules = getCSSRules( style, options );\n\n\t// If no selector is provided, treat generated rules as inline styles to be returned as a single string.\n\tif ( ! options?.selector ) {\n\t\tconst inlineRules: string[] = [];\n\t\trules.forEach( ( rule ) => {\n\t\t\tinlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );\n\t\t} );\n\t\treturn inlineRules.join( ' ' );\n\t}\n\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json\n * @param options Options object with settings to adjust how the styles are generated.\n *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions = {}\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\tif ( typeof definition.generate === 'function' ) {\n\t\t\trules.push( ...definition.generate( style, options ) );\n\t\t}\n\t} );\n\n\treturn rules;\n}\n"]}
|
|
@@ -20,6 +20,12 @@ const fontWeight = {
|
|
|
20
20
|
return generateRule(style, options, ['typography', 'fontWeight'], 'fontWeight');
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
+
const fontFamily = {
|
|
24
|
+
name: 'fontFamily',
|
|
25
|
+
generate: (style, options) => {
|
|
26
|
+
return generateRule(style, options, ['typography', 'fontFamily'], 'fontFamily');
|
|
27
|
+
}
|
|
28
|
+
};
|
|
23
29
|
const letterSpacing = {
|
|
24
30
|
name: 'letterSpacing',
|
|
25
31
|
generate: (style, options) => {
|
|
@@ -44,5 +50,5 @@ const textTransform = {
|
|
|
44
50
|
return generateRule(style, options, ['typography', 'textTransform'], 'textTransform');
|
|
45
51
|
}
|
|
46
52
|
};
|
|
47
|
-
export default [fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
|
|
53
|
+
export default [fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform];
|
|
48
54
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["generateRule","fontSize","name","generate","style","options","fontStyle","fontWeight","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,UAAhB,CAHkB,EAIlB,UAJkB,CAAnB;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,WAAhB,CAHkB,EAIlB,WAJkB,CAAnB;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMG,aAAa,GAAG;
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/typography/index.ts"],"names":["generateRule","fontSize","name","generate","style","options","fontStyle","fontWeight","fontFamily","letterSpacing","lineHeight","textDecoration","textTransform"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,UAA7B;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE,UADU;AAEhBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,UAAhB,CAHkB,EAIlB,UAJkB,CAAnB;AAMA;AATe,CAAjB;AAYA,MAAMC,SAAS,GAAG;AACjBJ,EAAAA,IAAI,EAAE,WADW;AAEjBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,WAAhB,CAHkB,EAIlB,WAJkB,CAAnB;AAMA;AATgB,CAAlB;AAYA,MAAME,UAAU,GAAG;AAClBL,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMG,UAAU,GAAG;AAClBN,EAAAA,IAAI,EAAE,YADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMI,aAAa,GAAG;AACrBP,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,eAAhB,CAHkB,EAIlB,eAJkB,CAAnB;AAMA;AAToB,CAAtB;AAYA,MAAMK,UAAU,GAAG;AAClBR,EAAAA,IAAI,EAAE,eADY;AAElBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,YAAhB,CAHkB,EAIlB,YAJkB,CAAnB;AAMA;AATiB,CAAnB;AAYA,MAAMM,cAAc,GAAG;AACtBT,EAAAA,IAAI,EAAE,gBADgB;AAEtBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,gBAAhB,CAHkB,EAIlB,gBAJkB,CAAnB;AAMA;AATqB,CAAvB;AAYA,MAAMO,aAAa,GAAG;AACrBV,EAAAA,IAAI,EAAE,eADe;AAErBC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,YAAY,CAClBI,KADkB,EAElBC,OAFkB,EAGlB,CAAE,YAAF,EAAgB,eAAhB,CAHkB,EAIlB,eAJkB,CAAnB;AAMA;AAToB,CAAtB;AAYA,eAAe,CACdG,UADc,EAEdP,QAFc,EAGdK,SAHc,EAIdC,UAJc,EAKdE,aALc,EAMdC,UANc,EAOdC,cAPc,EAQdC,aARc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst fontSize = {\n\tname: 'fontSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontSize' ],\n\t\t\t'fontSize'\n\t\t);\n\t},\n};\n\nconst fontStyle = {\n\tname: 'fontStyle',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontStyle' ],\n\t\t\t'fontStyle'\n\t\t);\n\t},\n};\n\nconst fontWeight = {\n\tname: 'fontWeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontWeight' ],\n\t\t\t'fontWeight'\n\t\t);\n\t},\n};\n\nconst fontFamily = {\n\tname: 'fontFamily',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'fontFamily' ],\n\t\t\t'fontFamily'\n\t\t);\n\t},\n};\n\nconst letterSpacing = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'letterSpacing' ],\n\t\t\t'letterSpacing'\n\t\t);\n\t},\n};\n\nconst lineHeight = {\n\tname: 'letterSpacing',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'lineHeight' ],\n\t\t\t'lineHeight'\n\t\t);\n\t},\n};\n\nconst textDecoration = {\n\tname: 'textDecoration',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textDecoration' ],\n\t\t\t'textDecoration'\n\t\t);\n\t},\n};\n\nconst textTransform = {\n\tname: 'textTransform',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'typography', 'textTransform' ],\n\t\t\t'textTransform'\n\t\t);\n\t},\n};\n\nexport default [\n\tfontFamily,\n\tfontSize,\n\tfontStyle,\n\tfontWeight,\n\tletterSpacing,\n\tlineHeight,\n\ttextDecoration,\n\ttextTransform,\n];\n"]}
|
|
@@ -29,11 +29,11 @@ export function generateRule(style, options, path, ruleKey) {
|
|
|
29
29
|
/**
|
|
30
30
|
* Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
|
|
31
31
|
*
|
|
32
|
-
* @param
|
|
33
|
-
* @param
|
|
34
|
-
* @param
|
|
35
|
-
* @param
|
|
36
|
-
* @param
|
|
32
|
+
* @param style Style object.
|
|
33
|
+
* @param options Options object with settings to adjust how the styles are generated.
|
|
34
|
+
* @param path An array of strings representing the path to the style value in the style object.
|
|
35
|
+
* @param ruleKeys An array of CSS property keys and patterns.
|
|
36
|
+
* @param individualProperties The "sides" or individual properties for which to generate rules.
|
|
37
37
|
*
|
|
38
38
|
* @return GeneratedCSSRule[] CSS rules.
|
|
39
39
|
*/
|
|
@@ -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","firstLetter","rest","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param
|
|
1
|
+
{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","join","firstLetter","rest","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param style Style object.\n * @param options Options object with settings to adjust how the styles are generated.\n * @param path An array of strings representing the path to the style value in the style object.\n * @param ruleKeys An array of CSS property keys and patterns.\n * @param individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import type { Style, StyleOptions, GeneratedCSSRule } from './types';
|
|
5
|
+
/**
|
|
6
|
+
* Generates a stylesheet for a given style object and selector.
|
|
7
|
+
*
|
|
8
|
+
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
9
|
+
* @param options Options object with settings to adjust how the styles are generated.
|
|
10
|
+
*
|
|
11
|
+
* @return generated stylesheet.
|
|
12
|
+
*/
|
|
13
|
+
export declare function compileCSS(style: Style, options?: StyleOptions): string;
|
|
14
|
+
/**
|
|
15
|
+
* Returns a JSON representation of the generated CSS rules.
|
|
16
|
+
*
|
|
17
|
+
* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
|
|
18
|
+
* @param options Options object with settings to adjust how the styles are generated.
|
|
19
|
+
*
|
|
20
|
+
* @return generated styles.
|
|
21
|
+
*/
|
|
22
|
+
export declare function getCSSRules(style: Style, options?: StyleOptions): GeneratedCSSRule[];
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,KAAK,EACL,YAAY,EACZ,gBAAgB,EAEhB,MAAM,SAAS,CAAC;AAGjB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,YAAiB,GAAI,MAAM,CA6B7E;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAC1B,KAAK,EAAE,KAAK,EACZ,OAAO,GAAE,YAAiB,GACxB,gBAAgB,EAAE,CASpB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import type { GeneratedCSSRule, Style, StyleDefinition, StyleOptions } from '../../types';
|
|
5
|
+
declare const _default: (StyleDefinition | {
|
|
6
|
+
name: string;
|
|
7
|
+
generate: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
|
|
8
|
+
})[];
|
|
9
|
+
export default _default;
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAGX,gBAAgB,EAChB,KAAK,EACL,eAAe,EACf,YAAY,EACZ,MAAM,aAAa,CAAC;;;;;AA+HrB,wBAOE"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import type { Style, StyleOptions } from '../../types';
|
|
5
|
+
declare const background: {
|
|
6
|
+
name: string;
|
|
7
|
+
generate: (style: Style, options: StyleOptions) => {
|
|
8
|
+
selector: string | undefined;
|
|
9
|
+
key: string;
|
|
10
|
+
value: string;
|
|
11
|
+
}[];
|
|
12
|
+
};
|
|
13
|
+
export default background;
|
|
14
|
+
//# sourceMappingURL=background.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/styles/color/background.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,UAAU;;sBAEI,KAAK,WAAW,YAAY;;;;;CAQ/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import type { Style, StyleOptions } from '../../types';
|
|
5
|
+
declare const gradient: {
|
|
6
|
+
name: string;
|
|
7
|
+
generate: (style: Style, options: StyleOptions) => {
|
|
8
|
+
selector: string | undefined;
|
|
9
|
+
key: string;
|
|
10
|
+
value: string;
|
|
11
|
+
}[];
|
|
12
|
+
};
|
|
13
|
+
export default gradient;
|
|
14
|
+
//# sourceMappingURL=gradient.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/styles/color/gradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,QAAQ;;sBAEM,KAAK,WAAW,YAAY;;;;;CAQ/C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
name: string;
|
|
3
|
+
generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => {
|
|
4
|
+
selector: string | undefined;
|
|
5
|
+
key: string;
|
|
6
|
+
value: string;
|
|
7
|
+
}[];
|
|
8
|
+
}[];
|
|
9
|
+
export default _default;
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|