Gutenberg / 15.1.1

Gutenberg v15.1.1

gutenberg / build / style-engine / index.js

index.js in Gutenberg 15.1.1, at build/style-engine/index.js

534 lines 16.6 KB

Raw Download Zip

1	/******/ (function() { // webpackBootstrap
2	/******/ "use strict";
3	/******/ // The require scope
4	/******/ var __webpack_require__ = {};
5	/******/
6	/************************************************************************/
7	/*****/ / webpack/runtime/define property getters */
8	/******/ !function() {
9	/******/ // define getter functions for harmony exports
10	/******/ __webpack_require__.d = function(exports, definition) {
11	/******/ for(var key in definition) {
12	/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
13	/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
14	/******/ }
15	/******/ }
16	/******/ };
17	/******/ }();
18	/******/
19	/*****/ / webpack/runtime/hasOwnProperty shorthand */
20	/******/ !function() {
21	/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
22	/******/ }();
23	/******/
24	/*****/ / webpack/runtime/make namespace object */
25	/******/ !function() {
26	/******/ // define __esModule on exports
27	/******/ __webpack_require__.r = function(exports) {
28	/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
29	/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
30	/******/ }
31	/******/ Object.defineProperty(exports, '__esModule', { value: true });
32	/******/ };
33	/******/ }();
34	/******/
35	/************************************************************************/
36	var __webpack_exports__ = {};
37	// ESM COMPAT FLAG
38	__webpack_require__.r(__webpack_exports__);
39
40	// EXPORTS
41	__webpack_require__.d(__webpack_exports__, {
42	"compileCSS": function() { return /* binding */ compileCSS; },
43	"getCSSRules": function() { return /* binding */ getCSSRules; }
44	});
45
46	;// CONCATENATED MODULE: external "lodash"
47	var external_lodash_namespaceObject = window["lodash"];
48	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/constants.js
49	const VARIABLE_REFERENCE_PREFIX = 'var:';
50	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '\|';
51	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
52
53	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/utils.js
54	/**
55	* External dependencies
56	*/
57
58	/**
59	* Internal dependencies
60	*/
61
62
63	/**
64	* Returns a JSON representation of the generated CSS rules.
65	*
66	* @param style Style object.
67	* @param options Options object with settings to adjust how the styles are generated.
68	* @param path An array of strings representing the path to the style value in the style object.
69	* @param ruleKey A CSS property key.
70	*
71	* @return GeneratedCSSRule[] CSS rules.
72	*/
73
74	function generateRule(style, options, path, ruleKey) {
75	const styleValue = (0,external_lodash_namespaceObject.get)(style, path);
76	return styleValue ? [{
77	selector: options === null \|\| options === void 0 ? void 0 : options.selector,
78	key: ruleKey,
79	value: getCSSVarFromStyleValue(styleValue)
80	}] : [];
81	}
82	/**
83	* Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
84	*
85	* @param style Style object.
86	* @param options Options object with settings to adjust how the styles are generated.
87	* @param path An array of strings representing the path to the style value in the style object.
88	* @param ruleKeys An array of CSS property keys and patterns.
89	* @param individualProperties The "sides" or individual properties for which to generate rules.
90	*
91	* @return GeneratedCSSRule[] CSS rules.
92	*/
93
94	function generateBoxRules(style, options, path, ruleKeys) {
95	let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
96	const boxStyle = (0,external_lodash_namespaceObject.get)(style, path);
97
98	if (!boxStyle) {
99	return [];
100	}
101
102	const rules = [];
103
104	if (typeof boxStyle === 'string') {
105	rules.push({
106	selector: options === null \|\| options === void 0 ? void 0 : options.selector,
107	key: ruleKeys.default,
108	value: boxStyle
109	});
110	} else {
111	const sideRules = individualProperties.reduce((acc, side) => {
112	const value = getCSSVarFromStyleValue((0,external_lodash_namespaceObject.get)(boxStyle, [side]));
113
114	if (value) {
115	acc.push({
116	selector: options === null \|\| options === void 0 ? void 0 : options.selector,
117	key: ruleKeys === null \|\| ruleKeys === void 0 ? void 0 : ruleKeys.individual.replace('%s', upperFirst(side)),
118	value
119	});
120	}
121
122	return acc;
123	}, []);
124	rules.push(...sideRules);
125	}
126
127	return rules;
128	}
129	/**
130	* Returns a CSS var value from incoming style value following the pattern `var:description\|context\|slug`.
131	*
132	* @param styleValue A raw style value.
133	*
134	* @return string A CSS var value.
135	*/
136
137	function getCSSVarFromStyleValue(styleValue) {
138	if (typeof styleValue === 'string' && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
139	const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => (0,external_lodash_namespaceObject.kebabCase)(presetVariable)).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
140	return `var(--wp--${variable})`;
141	}
142
143	return styleValue;
144	}
145	/**
146	* Capitalizes the first letter in a string.
147	*
148	* @param string The string whose first letter the function will capitalize.
149	*
150	* @return String with the first letter capitalized.
151	*/
152
153	function upperFirst(string) {
154	const [firstLetter, ...rest] = string;
155	return firstLetter.toUpperCase() + rest.join('');
156	}
157	/**
158	* Converts an array of strings into a camelCase string.
159	*
160	* @param strings The strings to join into a camelCase string.
161	*
162	* @return camelCase string.
163	*/
164
165	function camelCaseJoin(strings) {
166	const [firstItem, ...rest] = strings;
167	return firstItem.toLowerCase() + rest.map(upperFirst).join('');
168	}
169
170	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/border/index.js
171	/**
172	* Internal dependencies
173	*/
174
175	/**
176	* Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
177	*
178	* @param path An array of strings representing the path to the style value in the style object.
179	*
180	* @return A function that generates CSS rules.
181	*/
182
183	function createBorderGenerateFunction(path) {
184	return (style, options) => generateRule(style, options, path, camelCaseJoin(path));
185	}
186	/**
187	* Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
188	*
189	* @param edge The edge to create CSS rules for.
190	*
191	* @return A function that generates CSS rules.
192	*/
193
194
195	function createBorderEdgeGenerateFunction(edge) {
196	return (style, options) => {
197	return ['color', 'style', 'width'].flatMap(key => {
198	const path = ['border', edge, key];
199	return createBorderGenerateFunction(path)(style, options);
200	});
201	};
202	}
203
204	const color = {
205	name: 'color',
206	generate: createBorderGenerateFunction(['border', 'color'])
207	};
208	const radius = {
209	name: 'radius',
210	generate: (style, options) => {
211	return generateBoxRules(style, options, ['border', 'radius'], {
212	default: 'borderRadius',
213	individual: 'border%sRadius'
214	}, ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']);
215	}
216	};
217	const borderStyle = {
218	name: 'style',
219	generate: createBorderGenerateFunction(['border', 'style'])
220	};
221	const width = {
222	name: 'width',
223	generate: createBorderGenerateFunction(['border', 'width'])
224	};
225	const borderTop = {
226	name: 'borderTop',
227	generate: createBorderEdgeGenerateFunction('top')
228	};
229	const borderRight = {
230	name: 'borderRight',
231	generate: createBorderEdgeGenerateFunction('right')
232	};
233	const borderBottom = {
234	name: 'borderBottom',
235	generate: createBorderEdgeGenerateFunction('bottom')
236	};
237	const borderLeft = {
238	name: 'borderLeft',
239	generate: createBorderEdgeGenerateFunction('left')
240	};
241	/* harmony default export */ var border = ([color, borderStyle, width, radius, borderTop, borderRight, borderBottom, borderLeft]);
242
243	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/color/background.js
244	/**
245	* Internal dependencies
246	*/
247
248	const background = {
249	name: 'background',
250	generate: (style, options) => {
251	return generateRule(style, options, ['color', 'background'], 'backgroundColor');
252	}
253	};
254	/* harmony default export */ var color_background = (background);
255
256	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/color/gradient.js
257	/**
258	* Internal dependencies
259	*/
260
261	const gradient = {
262	name: 'gradient',
263	generate: (style, options) => {
264	return generateRule(style, options, ['color', 'gradient'], 'background');
265	}
266	};
267	/* harmony default export */ var color_gradient = (gradient);
268
269	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/color/text.js
270	/**
271	* Internal dependencies
272	*/
273
274	const text_text = {
275	name: 'text',
276	generate: (style, options) => {
277	return generateRule(style, options, ['color', 'text'], 'color');
278	}
279	};
280	/* harmony default export */ var color_text = (text_text);
281
282	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/color/index.js
283	/**
284	* Internal dependencies
285	*/
286
287
288
289	/* harmony default export */ var styles_color = ([color_text, color_gradient, color_background]);
290
291	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/dimensions/index.js
292	/**
293	* Internal dependencies
294	*/
295
296	const minHeight = {
297	name: 'minHeight',
298	generate: (style, options) => {
299	return generateRule(style, options, ['dimensions', 'minHeight'], 'minHeight');
300	}
301	};
302	/* harmony default export */ var dimensions = ([minHeight]);
303
304	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/shadow/index.js
305	/**
306	* Internal dependencies
307	*/
308
309	const shadow = {
310	name: 'shadow',
311	generate: (style, options) => {
312	return generateRule(style, options, ['shadow'], 'boxShadow');
313	}
314	};
315	/* harmony default export */ var styles_shadow = ([shadow]);
316
317	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/outline/index.js
318	/**
319	* Internal dependencies
320	*/
321
322	const outline_color = {
323	name: 'color',
324	generate: function (style, options) {
325	let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'color'];
326	let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
327	return generateRule(style, options, path, ruleKey);
328	}
329	};
330	const offset = {
331	name: 'offset',
332	generate: function (style, options) {
333	let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
334	let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
335	return generateRule(style, options, path, ruleKey);
336	}
337	};
338	const outlineStyle = {
339	name: 'style',
340	generate: function (style, options) {
341	let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
342	let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
343	return generateRule(style, options, path, ruleKey);
344	}
345	};
346	const outline_width = {
347	name: 'width',
348	generate: function (style, options) {
349	let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'width'];
350	let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
351	return generateRule(style, options, path, ruleKey);
352	}
353	};
354	/* harmony default export */ var outline = ([outline_color, outlineStyle, offset, outline_width]);
355
356	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/spacing/padding.js
357	/**
358	* Internal dependencies
359	*/
360
361	const padding = {
362	name: 'padding',
363	generate: (style, options) => {
364	return generateBoxRules(style, options, ['spacing', 'padding'], {
365	default: 'padding',
366	individual: 'padding%s'
367	});
368	}
369	};
370	/* harmony default export */ var spacing_padding = (padding);
371
372	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/spacing/margin.js
373	/**
374	* Internal dependencies
375	*/
376
377	const margin = {
378	name: 'margin',
379	generate: (style, options) => {
380	return generateBoxRules(style, options, ['spacing', 'margin'], {
381	default: 'margin',
382	individual: 'margin%s'
383	});
384	}
385	};
386	/* harmony default export */ var spacing_margin = (margin);
387
388	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/spacing/index.js
389	/**
390	* Internal dependencies
391	*/
392
393
394	/* harmony default export */ var spacing = ([spacing_margin, spacing_padding]);
395
396	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/typography/index.js
397	/**
398	* Internal dependencies
399	*/
400
401	const fontSize = {
402	name: 'fontSize',
403	generate: (style, options) => {
404	return generateRule(style, options, ['typography', 'fontSize'], 'fontSize');
405	}
406	};
407	const fontStyle = {
408	name: 'fontStyle',
409	generate: (style, options) => {
410	return generateRule(style, options, ['typography', 'fontStyle'], 'fontStyle');
411	}
412	};
413	const fontWeight = {
414	name: 'fontWeight',
415	generate: (style, options) => {
416	return generateRule(style, options, ['typography', 'fontWeight'], 'fontWeight');
417	}
418	};
419	const fontFamily = {
420	name: 'fontFamily',
421	generate: (style, options) => {
422	return generateRule(style, options, ['typography', 'fontFamily'], 'fontFamily');
423	}
424	};
425	const letterSpacing = {
426	name: 'letterSpacing',
427	generate: (style, options) => {
428	return generateRule(style, options, ['typography', 'letterSpacing'], 'letterSpacing');
429	}
430	};
431	const lineHeight = {
432	name: 'letterSpacing',
433	generate: (style, options) => {
434	return generateRule(style, options, ['typography', 'lineHeight'], 'lineHeight');
435	}
436	};
437	const textColumns = {
438	name: 'textColumns',
439	generate: (style, options) => {
440	return generateRule(style, options, ['typography', 'textColumns'], 'columnCount');
441	}
442	};
443	const textDecoration = {
444	name: 'textDecoration',
445	generate: (style, options) => {
446	return generateRule(style, options, ['typography', 'textDecoration'], 'textDecoration');
447	}
448	};
449	const textTransform = {
450	name: 'textTransform',
451	generate: (style, options) => {
452	return generateRule(style, options, ['typography', 'textTransform'], 'textTransform');
453	}
454	};
455	/* harmony default export */ var typography = ([fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textColumns, textDecoration, textTransform]);
456
457	;// CONCATENATED MODULE: ./packages/style-engine/build-module/styles/index.js
458	/**
459	* Internal dependencies
460	*/
461
462
463
464
465
466
467
468	const styleDefinitions = [...border, ...styles_color, ...dimensions, ...outline, ...spacing, ...typography, ...styles_shadow];
469
470	;// CONCATENATED MODULE: ./packages/style-engine/build-module/index.js
471	/**
472	* External dependencies
473	*/
474
475	/**
476	* Internal dependencies
477	*/
478
479
480	/**
481	* Generates a stylesheet for a given style object and selector.
482	*
483	* @since 6.1.0 Introduced in WordPress core.
484	*
485	* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
486	* @param options Options object with settings to adjust how the styles are generated.
487	*
488	* @return A generated stylesheet or inline style declarations.
489	*/
490
491	function compileCSS(style) {
492	let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
493	const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
494
495	if (!(options !== null && options !== void 0 && options.selector)) {
496	const inlineRules = [];
497	rules.forEach(rule => {
498	inlineRules.push(`${(0,external_lodash_namespaceObject.kebabCase)(rule.key)}: ${rule.value};`);
499	});
500	return inlineRules.join(' ');
501	}
502
503	const groupedRules = (0,external_lodash_namespaceObject.groupBy)(rules, 'selector');
504	const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
505	acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${(0,external_lodash_namespaceObject.kebabCase)(rule.key)}: ${rule.value};`).join(' ')} }`);
506	return acc;
507	}, []);
508	return selectorRules.join('\n');
509	}
510	/**
511	* Returns a JSON representation of the generated CSS rules.
512	*
513	* @since 6.1.0 Introduced in WordPress core.
514	*
515	* @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
516	* @param options Options object with settings to adjust how the styles are generated.
517	*
518	* @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
519	*/
520
521	function getCSSRules(style) {
522	let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
523	const rules = [];
524	styleDefinitions.forEach(definition => {
525	if (typeof definition.generate === 'function') {
526	rules.push(...definition.generate(style, options));
527	}
528	});
529	return rules;
530	}
531
532	(window.wp = window.wp \|\| {}).styleEngine = __webpack_exports__;
533	/******/ })()
534	;