Gutenberg / 23.2.0

Gutenberg v23.2.0

gutenberg / build / scripts / style-engine / index.js

build/scripts/style-engine

class-wp-style-engine-css-declarations-gutenberg.php 4.9 KB 4 months ago class-wp-style-engine-css-rule-gutenberg.php 5.4 KB 4 months ago class-wp-style-engine-css-rules-store-gutenberg.php 3.6 KB 10 months ago class-wp-style-engine-gutenberg.php 27.5 KB 4 months ago class-wp-style-engine-processor-gutenberg.php 5.2 KB 10 months ago index.js 17.9 KB 4 months ago index.js.map 53.9 KB 4 months ago index.min.asset.php 83 B 4 months ago index.min.js 6.5 KB 4 months ago index.min.js.map 56.0 KB 4 months ago style-engine-gutenberg.php 6.6 KB 10 months ago

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

684 lines 17.9 KB Raw Download Zip

1	"use strict";
2	var wp;
3	(wp \|\|= {}).styleEngine = (() => {
4	var __defProp = Object.defineProperty;
5	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6	var __getOwnPropNames = Object.getOwnPropertyNames;
7	var __hasOwnProp = Object.prototype.hasOwnProperty;
8	var __export = (target, all) => {
9	for (var name in all)
10	__defProp(target, name, { get: all[name], enumerable: true });
11	};
12	var __copyProps = (to, from, except, desc) => {
13	if (from && typeof from === "object" \|\| typeof from === "function") {
14	for (let key of __getOwnPropNames(from))
15	if (!__hasOwnProp.call(to, key) && key !== except)
16	__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) \|\| desc.enumerable });
17	}
18	return to;
19	};
20	var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
22	// packages/style-engine/build-module/index.mjs
23	var index_exports = {};
24	__export(index_exports, {
25	compileCSS: () => compileCSS,
26	getCSSRules: () => getCSSRules,
27	getCSSValueFromRawStyle: () => getCSSValueFromRawStyle
28	});
29
30	// node_modules/tslib/tslib.es6.mjs
31	var __assign = function() {
32	__assign = Object.assign \|\| function __assign2(t) {
33	for (var s, i = 1, n = arguments.length; i < n; i++) {
34	s = arguments[i];
35	for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
36	}
37	return t;
38	};
39	return __assign.apply(this, arguments);
40	};
41
42	// node_modules/lower-case/dist.es2015/index.js
43	function lowerCase(str) {
44	return str.toLowerCase();
45	}
46
47	// node_modules/no-case/dist.es2015/index.js
48	var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
49	var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
50	function noCase(input, options) {
51	if (options === void 0) {
52	options = {};
53	}
54	var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
55	var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
56	var start = 0;
57	var end = result.length;
58	while (result.charAt(start) === "\0")
59	start++;
60	while (result.charAt(end - 1) === "\0")
61	end--;
62	return result.slice(start, end).split("\0").map(transform).join(delimiter);
63	}
64	function replace(input, re, value) {
65	if (re instanceof RegExp)
66	return input.replace(re, value);
67	return re.reduce(function(input2, re2) {
68	return input2.replace(re2, value);
69	}, input);
70	}
71
72	// node_modules/dot-case/dist.es2015/index.js
73	function dotCase(input, options) {
74	if (options === void 0) {
75	options = {};
76	}
77	return noCase(input, __assign({ delimiter: "." }, options));
78	}
79
80	// node_modules/param-case/dist.es2015/index.js
81	function paramCase(input, options) {
82	if (options === void 0) {
83	options = {};
84	}
85	return dotCase(input, __assign({ delimiter: "-" }, options));
86	}
87
88	// packages/style-engine/build-module/styles/constants.mjs
89	var VARIABLE_REFERENCE_PREFIX = "var:";
90	var VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = "\|";
91	var VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = "--";
92
93	// packages/style-engine/build-module/styles/utils.mjs
94	var getStyleValueByPath = (object, path) => {
95	let value = object;
96	path.forEach((fieldName) => {
97	value = value?.[fieldName];
98	});
99	return value;
100	};
101	function generateRule(style, options, path, ruleKey) {
102	const styleValue = getStyleValueByPath(style, path);
103	return styleValue ? [
104	{
105	selector: options?.selector,
106	key: ruleKey,
107	value: getCSSValueFromRawStyle(styleValue)
108	}
109	] : [];
110	}
111	function generateBoxRules(style, options, path, ruleKeys, individualProperties = ["top", "right", "bottom", "left"]) {
112	const boxStyle = getStyleValueByPath(
113	style,
114	path
115	);
116	if (!boxStyle) {
117	return [];
118	}
119	const rules = [];
120	if (typeof boxStyle === "string") {
121	rules.push({
122	selector: options?.selector,
123	key: ruleKeys.default,
124	value: getCSSValueFromRawStyle(boxStyle)
125	});
126	} else {
127	const sideRules = individualProperties.reduce(
128	(acc, side) => {
129	const value = getCSSValueFromRawStyle(
130	getStyleValueByPath(boxStyle, [side])
131	);
132	if (value) {
133	acc.push({
134	selector: options?.selector,
135	key: ruleKeys?.individual.replace(
136	"%s",
137	upperFirst(side)
138	),
139	value
140	});
141	}
142	return acc;
143	},
144	[]
145	);
146	rules.push(...sideRules);
147	}
148	return rules;
149	}
150	function getCSSValueFromRawStyle(styleValue) {
151	if (typeof styleValue === "string" && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
152	const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(
153	(presetVariable) => paramCase(presetVariable, {
154	splitRegexp: [
155	/([a-z0-9])([A-Z])/g,
156	// fooBar => foo-bar, 3Bar => 3-bar
157	/([0-9])([a-z])/g,
158	// 3bar => 3-bar
159	/([A-Za-z])([0-9])/g,
160	// Foo3 => foo-3, foo3 => foo-3
161	/([A-Z])([A-Z][a-z])/g
162	// FOOBar => foo-bar
163	]
164	})
165	).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
166	return `var(--wp--${variable})`;
167	}
168	return styleValue;
169	}
170	function upperFirst(string) {
171	const [firstLetter, ...rest] = string;
172	return firstLetter.toUpperCase() + rest.join("");
173	}
174	function camelCaseJoin(strings) {
175	const [firstItem, ...rest] = strings;
176	return firstItem.toLowerCase() + rest.map(upperFirst).join("");
177	}
178	function safeDecodeURI(uri) {
179	try {
180	return decodeURI(uri);
181	} catch {
182	return uri;
183	}
184	}
185
186	// packages/style-engine/build-module/styles/border/index.mjs
187	function createBorderGenerateFunction(path) {
188	return (style, options) => generateRule(style, options, path, camelCaseJoin(path));
189	}
190	function createBorderEdgeGenerateFunction(edge) {
191	return (style, options) => {
192	return ["color", "style", "width"].flatMap((key) => {
193	const path = ["border", edge, key];
194	return createBorderGenerateFunction(path)(style, options);
195	});
196	};
197	}
198	var color = {
199	name: "color",
200	generate: createBorderGenerateFunction(["border", "color"])
201	};
202	var radius = {
203	name: "radius",
204	generate: (style, options) => {
205	return generateBoxRules(
206	style,
207	options,
208	["border", "radius"],
209	{
210	default: "borderRadius",
211	individual: "border%sRadius"
212	},
213	["topLeft", "topRight", "bottomLeft", "bottomRight"]
214	);
215	}
216	};
217	var borderStyle = {
218	name: "style",
219	generate: createBorderGenerateFunction(["border", "style"])
220	};
221	var width = {
222	name: "width",
223	generate: createBorderGenerateFunction(["border", "width"])
224	};
225	var borderTop = {
226	name: "borderTop",
227	generate: createBorderEdgeGenerateFunction("top")
228	};
229	var borderRight = {
230	name: "borderRight",
231	generate: createBorderEdgeGenerateFunction("right")
232	};
233	var borderBottom = {
234	name: "borderBottom",
235	generate: createBorderEdgeGenerateFunction("bottom")
236	};
237	var borderLeft = {
238	name: "borderLeft",
239	generate: createBorderEdgeGenerateFunction("left")
240	};
241	var border_default = [
242	color,
243	borderStyle,
244	width,
245	radius,
246	borderTop,
247	borderRight,
248	borderBottom,
249	borderLeft
250	];
251
252	// packages/style-engine/build-module/styles/color/background.mjs
253	var background = {
254	name: "background",
255	generate: (style, options) => {
256	return generateRule(
257	style,
258	options,
259	["color", "background"],
260	"backgroundColor"
261	);
262	}
263	};
264	var background_default = background;
265
266	// packages/style-engine/build-module/styles/color/gradient.mjs
267	var gradient = {
268	name: "gradient",
269	generate: (style, options) => {
270	return generateRule(
271	style,
272	options,
273	["color", "gradient"],
274	"background"
275	);
276	}
277	};
278	var gradient_default = gradient;
279
280	// packages/style-engine/build-module/styles/color/text.mjs
281	var text = {
282	name: "text",
283	generate: (style, options) => {
284	return generateRule(style, options, ["color", "text"], "color");
285	}
286	};
287	var text_default = text;
288
289	// packages/style-engine/build-module/styles/color/index.mjs
290	var color_default = [text_default, gradient_default, background_default];
291
292	// packages/style-engine/build-module/styles/dimensions/index.mjs
293	var height = {
294	name: "height",
295	generate: (style, options) => {
296	return generateRule(
297	style,
298	options,
299	["dimensions", "height"],
300	"height"
301	);
302	}
303	};
304	var minHeight = {
305	name: "minHeight",
306	generate: (style, options) => {
307	return generateRule(
308	style,
309	options,
310	["dimensions", "minHeight"],
311	"minHeight"
312	);
313	}
314	};
315	var minWidth = {
316	name: "minWidth",
317	generate: (style, options) => {
318	return generateRule(
319	style,
320	options,
321	["dimensions", "minWidth"],
322	"minWidth"
323	);
324	}
325	};
326	var aspectRatio = {
327	name: "aspectRatio",
328	generate: (style, options) => {
329	return generateRule(
330	style,
331	options,
332	["dimensions", "aspectRatio"],
333	"aspectRatio"
334	);
335	}
336	};
337	var width2 = {
338	name: "width",
339	generate: (style, options) => {
340	return generateRule(
341	style,
342	options,
343	["dimensions", "width"],
344	"width"
345	);
346	}
347	};
348	var dimensions_default = [height, minHeight, minWidth, aspectRatio, width2];
349
350	// packages/style-engine/build-module/styles/background/index.mjs
351	var backgroundImage = {
352	name: "backgroundImage",
353	generate: (style, options) => {
354	const _backgroundImage = style?.background?.backgroundImage;
355	const gradient2 = getCSSValueFromRawStyle(style?.background?.gradient) \|\| "";
356	if (!_backgroundImage && !gradient2) {
357	return [];
358	}
359	const backgroundImageValue = typeof _backgroundImage === "object" && _backgroundImage?.url ? `url( '${encodeURI(
360	safeDecodeURI(_backgroundImage.url)
361	)}' )` : getCSSValueFromRawStyle(_backgroundImage);
362	const cssValue = [gradient2, backgroundImageValue].filter(Boolean).join(", ");
363	return !!cssValue ? [
364	{
365	selector: options.selector,
366	key: "backgroundImage",
367	value: cssValue
368	}
369	] : [];
370	}
371	};
372	var backgroundPosition = {
373	name: "backgroundPosition",
374	generate: (style, options) => {
375	return generateRule(
376	style,
377	options,
378	["background", "backgroundPosition"],
379	"backgroundPosition"
380	);
381	}
382	};
383	var backgroundRepeat = {
384	name: "backgroundRepeat",
385	generate: (style, options) => {
386	return generateRule(
387	style,
388	options,
389	["background", "backgroundRepeat"],
390	"backgroundRepeat"
391	);
392	}
393	};
394	var backgroundSize = {
395	name: "backgroundSize",
396	generate: (style, options) => {
397	return generateRule(
398	style,
399	options,
400	["background", "backgroundSize"],
401	"backgroundSize"
402	);
403	}
404	};
405	var backgroundAttachment = {
406	name: "backgroundAttachment",
407	generate: (style, options) => {
408	return generateRule(
409	style,
410	options,
411	["background", "backgroundAttachment"],
412	"backgroundAttachment"
413	);
414	}
415	};
416	var background_default2 = [
417	backgroundImage,
418	backgroundPosition,
419	backgroundRepeat,
420	backgroundSize,
421	backgroundAttachment
422	];
423
424	// packages/style-engine/build-module/styles/shadow/index.mjs
425	var shadow = {
426	name: "shadow",
427	generate: (style, options) => {
428	return generateRule(style, options, ["shadow"], "boxShadow");
429	}
430	};
431	var shadow_default = [shadow];
432
433	// packages/style-engine/build-module/styles/outline/index.mjs
434	var color2 = {
435	name: "color",
436	generate: (style, options, path = ["outline", "color"], ruleKey = "outlineColor") => {
437	return generateRule(style, options, path, ruleKey);
438	}
439	};
440	var offset = {
441	name: "offset",
442	generate: (style, options, path = ["outline", "offset"], ruleKey = "outlineOffset") => {
443	return generateRule(style, options, path, ruleKey);
444	}
445	};
446	var outlineStyle = {
447	name: "style",
448	generate: (style, options, path = ["outline", "style"], ruleKey = "outlineStyle") => {
449	return generateRule(style, options, path, ruleKey);
450	}
451	};
452	var width3 = {
453	name: "width",
454	generate: (style, options, path = ["outline", "width"], ruleKey = "outlineWidth") => {
455	return generateRule(style, options, path, ruleKey);
456	}
457	};
458	var outline_default = [color2, outlineStyle, offset, width3];
459
460	// packages/style-engine/build-module/styles/spacing/padding.mjs
461	var padding = {
462	name: "padding",
463	generate: (style, options) => {
464	return generateBoxRules(style, options, ["spacing", "padding"], {
465	default: "padding",
466	individual: "padding%s"
467	});
468	}
469	};
470	var padding_default = padding;
471
472	// packages/style-engine/build-module/styles/spacing/margin.mjs
473	var margin = {
474	name: "margin",
475	generate: (style, options) => {
476	return generateBoxRules(style, options, ["spacing", "margin"], {
477	default: "margin",
478	individual: "margin%s"
479	});
480	}
481	};
482	var margin_default = margin;
483
484	// packages/style-engine/build-module/styles/spacing/index.mjs
485	var spacing_default = [margin_default, padding_default];
486
487	// packages/style-engine/build-module/styles/typography/index.mjs
488	var fontSize = {
489	name: "fontSize",
490	generate: (style, options) => {
491	return generateRule(
492	style,
493	options,
494	["typography", "fontSize"],
495	"fontSize"
496	);
497	}
498	};
499	var fontStyle = {
500	name: "fontStyle",
501	generate: (style, options) => {
502	return generateRule(
503	style,
504	options,
505	["typography", "fontStyle"],
506	"fontStyle"
507	);
508	}
509	};
510	var fontWeight = {
511	name: "fontWeight",
512	generate: (style, options) => {
513	return generateRule(
514	style,
515	options,
516	["typography", "fontWeight"],
517	"fontWeight"
518	);
519	}
520	};
521	var fontFamily = {
522	name: "fontFamily",
523	generate: (style, options) => {
524	return generateRule(
525	style,
526	options,
527	["typography", "fontFamily"],
528	"fontFamily"
529	);
530	}
531	};
532	var letterSpacing = {
533	name: "letterSpacing",
534	generate: (style, options) => {
535	return generateRule(
536	style,
537	options,
538	["typography", "letterSpacing"],
539	"letterSpacing"
540	);
541	}
542	};
543	var lineHeight = {
544	name: "lineHeight",
545	generate: (style, options) => {
546	return generateRule(
547	style,
548	options,
549	["typography", "lineHeight"],
550	"lineHeight"
551	);
552	}
553	};
554	var textColumns = {
555	name: "textColumns",
556	generate: (style, options) => {
557	return generateRule(
558	style,
559	options,
560	["typography", "textColumns"],
561	"columnCount"
562	);
563	}
564	};
565	var textDecoration = {
566	name: "textDecoration",
567	generate: (style, options) => {
568	return generateRule(
569	style,
570	options,
571	["typography", "textDecoration"],
572	"textDecoration"
573	);
574	}
575	};
576	var textIndent = {
577	name: "textIndent",
578	generate: (style, options) => {
579	return generateRule(
580	style,
581	options,
582	["typography", "textIndent"],
583	"textIndent"
584	);
585	}
586	};
587	var textTransform = {
588	name: "textTransform",
589	generate: (style, options) => {
590	return generateRule(
591	style,
592	options,
593	["typography", "textTransform"],
594	"textTransform"
595	);
596	}
597	};
598	var writingMode = {
599	name: "writingMode",
600	generate: (style, options) => {
601	return generateRule(
602	style,
603	options,
604	["typography", "writingMode"],
605	"writingMode"
606	);
607	}
608	};
609	var typography_default = [
610	fontFamily,
611	fontSize,
612	fontStyle,
613	fontWeight,
614	letterSpacing,
615	lineHeight,
616	textColumns,
617	textDecoration,
618	textIndent,
619	textTransform,
620	writingMode
621	];
622
623	// packages/style-engine/build-module/styles/index.mjs
624	var styleDefinitions = [
625	...border_default,
626	...color_default,
627	...dimensions_default,
628	...outline_default,
629	...spacing_default,
630	...typography_default,
631	...shadow_default,
632	...background_default2
633	];
634
635	// packages/style-engine/build-module/index.mjs
636	function compileCSS(style, options = {}) {
637	const rules = getCSSRules(style, options);
638	if (!options?.selector) {
639	const inlineRules = [];
640	rules.forEach((rule) => {
641	inlineRules.push(`${paramCase(rule.key)}: ${rule.value};`);
642	});
643	return inlineRules.join(" ");
644	}
645	const groupedRules = rules.reduce(
646	(acc, rule) => {
647	const { selector } = rule;
648	if (!selector) {
649	return acc;
650	}
651	if (!acc[selector]) {
652	acc[selector] = [];
653	}
654	acc[selector].push(rule);
655	return acc;
656	},
657	{}
658	);
659	const selectorRules = Object.keys(groupedRules).reduce(
660	(acc, subSelector) => {
661	acc.push(
662	`${subSelector} { ${groupedRules[subSelector].map(
663	(rule) => `${paramCase(rule.key)}: ${rule.value};`
664	).join(" ")} }`
665	);
666	return acc;
667	},
668	[]
669	);
670	return selectorRules.join("\n");
671	}
672	function getCSSRules(style, options = {}) {
673	const rules = [];
674	styleDefinitions.forEach((definition) => {
675	if (typeof definition.generate === "function") {
676	rules.push(...definition.generate(style, options));
677	}
678	});
679	return rules;
680	}
681	return __toCommonJS(index_exports);
682	})();
683	//# sourceMappingURL=index.js.map
684