@master/css-compiler 2.0.0-rc.73 → 2.0.0-rc.74
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/LICENSE +21 -0
- package/dist/browser.d.ts +23 -19
- package/dist/browser.js +42 -0
- package/dist/core.d.ts +43 -41
- package/dist/core.js +1639 -0
- package/dist/css-transform.d.ts +10 -6
- package/dist/css-transform.js +17 -0
- package/dist/diagnostics.d.ts +11 -0
- package/dist/diagnostics.js +12 -0
- package/dist/index.d.ts +41 -38
- package/dist/index.js +330 -0
- package/dist/lexer/imports.d.ts +16 -12
- package/dist/lexer/imports.js +38 -0
- package/dist/lexer/source.d.ts +6 -3
- package/dist/lexer/source.js +8 -0
- package/dist/lexer/standalone-master.d.ts +23 -19
- package/dist/lexer/standalone-master.js +219 -0
- package/dist/lower-css-directives.d.ts +18 -13
- package/dist/lower-css-directives.js +753 -0
- package/dist/master-css-manifest.d.ts +18 -12
- package/dist/master-css-manifest.js +546 -0
- package/dist/native-declaration.d.ts +6 -2
- package/dist/native-declaration.js +23 -0
- package/dist/utils/selectors.d.ts +6 -3
- package/dist/utils/selectors.js +49 -0
- package/dist/utils/unquote.d.ts +4 -1
- package/dist/utils/unquote.js +9 -0
- package/dist/utils/wrap-at-rules.d.ts +4 -1
- package/dist/utils/wrap-at-rules.js +11 -0
- package/package.json +69 -1
- package/dist/browser.mjs +0 -47
- package/dist/core.mjs +0 -2146
- package/dist/css-transform.mjs +0 -18
- package/dist/index.mjs +0 -395
- package/dist/lexer/imports.mjs +0 -44
- package/dist/lexer/source.mjs +0 -9
- package/dist/lexer/standalone-master.mjs +0 -233
- package/dist/lower-css-directives.mjs +0 -969
- package/dist/master-css-manifest.mjs +0 -760
- package/dist/native-declaration.mjs +0 -25
- package/dist/utils/selectors.mjs +0 -55
- package/dist/utils/unquote.mjs +0 -10
- package/dist/utils/wrap-at-rules.mjs +0 -10
|
@@ -1,760 +0,0 @@
|
|
|
1
|
-
import UtilityType from '@master/css-schema/utility-type';
|
|
2
|
-
import { groupMasterCSSManifestVariables, flattenMasterCSSManifestVariables } from '@master/css-schema/manifest';
|
|
3
|
-
import { createCompilerCSS, parseSelector, parseAt } from '@master/css-engine/compiler';
|
|
4
|
-
import { builtinNamespaces } from '@master/css-engine';
|
|
5
|
-
import { isNativeCSSShorthandProperty } from '@master/css-schema/native-css-shorthand';
|
|
6
|
-
|
|
7
|
-
const NUMERIC_THEME_NAMESPACES = new Set([
|
|
8
|
-
'font-size',
|
|
9
|
-
'radius',
|
|
10
|
-
'spacing',
|
|
11
|
-
'breakpoint',
|
|
12
|
-
'container'
|
|
13
|
-
]);
|
|
14
|
-
const UNITFUL_NUMERIC_TOKEN = /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(px|rem)?$/;
|
|
15
|
-
function clone(value) {
|
|
16
|
-
if (Array.isArray(value)) return value.map((item)=>clone(item));
|
|
17
|
-
if (value && typeof value === 'object') {
|
|
18
|
-
const result = {};
|
|
19
|
-
for(const key in value){
|
|
20
|
-
result[key] = clone(value[key]);
|
|
21
|
-
}
|
|
22
|
-
return result;
|
|
23
|
-
}
|
|
24
|
-
return value;
|
|
25
|
-
}
|
|
26
|
-
function normalizeZero(value) {
|
|
27
|
-
return Object.is(value, -0) ? 0 : value;
|
|
28
|
-
}
|
|
29
|
-
function addVariableNamespace(namespaces, namespace) {
|
|
30
|
-
if (typeof namespace === 'string' && namespace) namespaces.add(namespace);
|
|
31
|
-
}
|
|
32
|
-
function addVariableAliasRefNamespace(namespaces, ref) {
|
|
33
|
-
if (typeof ref === 'string' && (ref[0] === '=' || ref[0] === '~')) {
|
|
34
|
-
addVariableNamespace(namespaces, ref.slice(1));
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
function addImplicitUtilityNamespace(namespaces, value) {
|
|
38
|
-
if (typeof value !== 'string' || !value || value[0] === '.' || value.includes('()')) return;
|
|
39
|
-
addVariableNamespace(namespaces, value);
|
|
40
|
-
}
|
|
41
|
-
function addUtilityVariableNamespaces(namespaces, utilities) {
|
|
42
|
-
for (const utility of utilities || []){
|
|
43
|
-
for (const namespace of utility.namespaces || []){
|
|
44
|
-
addVariableNamespace(namespaces, namespace);
|
|
45
|
-
}
|
|
46
|
-
for (const ref of utility.variableAliasRefs || []){
|
|
47
|
-
addVariableAliasRefNamespace(namespaces, ref);
|
|
48
|
-
}
|
|
49
|
-
if (utility.implicitNamespace !== false && utility.emit?.type === 'property') {
|
|
50
|
-
addImplicitUtilityNamespace(namespaces, utility.id);
|
|
51
|
-
addImplicitUtilityNamespace(namespaces, utility.name);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
function collectVariableNamespaces(input = {}, options = {}) {
|
|
56
|
-
const namespaces = new Set(builtinNamespaces);
|
|
57
|
-
for (const variable of flattenMasterCSSManifestVariables(options.baseManifest?.variables)){
|
|
58
|
-
addVariableNamespace(namespaces, variable.namespace);
|
|
59
|
-
}
|
|
60
|
-
for (const variable of input.variables || []){
|
|
61
|
-
addVariableNamespace(namespaces, variable.namespace);
|
|
62
|
-
}
|
|
63
|
-
addUtilityVariableNamespaces(namespaces, options.baseManifest?.utilities);
|
|
64
|
-
addUtilityVariableNamespaces(namespaces, input.utilities);
|
|
65
|
-
return [
|
|
66
|
-
...namespaces
|
|
67
|
-
].sort((a, b)=>b.length - a.length || a.localeCompare(b));
|
|
68
|
-
}
|
|
69
|
-
function resolveVariableName(variable, namespaces) {
|
|
70
|
-
const explicitName = variable.name?.replace(/^--/, '');
|
|
71
|
-
if (variable.namespace || variable.key !== undefined) {
|
|
72
|
-
const key = variable.key ?? explicitName ?? '';
|
|
73
|
-
const name = variable.namespace ? `${variable.namespace}${key ? '-' + key : ''}` : key;
|
|
74
|
-
return {
|
|
75
|
-
name,
|
|
76
|
-
key,
|
|
77
|
-
...variable.namespace ? {
|
|
78
|
-
namespace: variable.namespace
|
|
79
|
-
} : {}
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
const name = explicitName || '';
|
|
83
|
-
const namespace = namespaces.find((eachNamespace)=>name.startsWith(eachNamespace + '-'));
|
|
84
|
-
return namespace ? {
|
|
85
|
-
name,
|
|
86
|
-
namespace,
|
|
87
|
-
key: name.slice(namespace.length + 1)
|
|
88
|
-
} : {
|
|
89
|
-
name,
|
|
90
|
-
key: name
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
function createVariableNameResolver(input = {}, options = {}) {
|
|
94
|
-
const namespaces = collectVariableNamespaces(input, options);
|
|
95
|
-
return (variable)=>resolveVariableName(variable, namespaces);
|
|
96
|
-
}
|
|
97
|
-
function getVariableType(value) {
|
|
98
|
-
return typeof value === 'number' ? 'number' : 'string';
|
|
99
|
-
}
|
|
100
|
-
function getVariableNumericValue(value, namespace) {
|
|
101
|
-
if (!namespace || !NUMERIC_THEME_NAMESPACES.has(namespace)) return;
|
|
102
|
-
if (typeof value === 'number') {
|
|
103
|
-
return {
|
|
104
|
-
value
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
if (typeof value !== 'string') return;
|
|
108
|
-
const match = UNITFUL_NUMERIC_TOKEN.exec(value.trim());
|
|
109
|
-
if (!match) return;
|
|
110
|
-
return {
|
|
111
|
-
value: Number(match[1]),
|
|
112
|
-
...match[2] ? {
|
|
113
|
-
unit: match[2]
|
|
114
|
-
} : {}
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
function collectVariableDependencies(value, dependencies = new Set()) {
|
|
118
|
-
if (typeof value !== 'string') return dependencies;
|
|
119
|
-
for (const match of value.matchAll(/\$(-?[_a-zA-Z0-9-]+)/g)){
|
|
120
|
-
dependencies.add(match[1]);
|
|
121
|
-
}
|
|
122
|
-
for (const match of value.matchAll(/var\(\s*--(-?[_a-zA-Z0-9-]+)/g)){
|
|
123
|
-
dependencies.add(match[1]);
|
|
124
|
-
}
|
|
125
|
-
return dependencies;
|
|
126
|
-
}
|
|
127
|
-
function variableSlot(variable) {
|
|
128
|
-
return variable.name || `${variable.namespace || ''}\0${variable.key}`;
|
|
129
|
-
}
|
|
130
|
-
function pushVariable(target, variable) {
|
|
131
|
-
const slot = variableSlot(variable);
|
|
132
|
-
const existing = target.find((eachVariable)=>variableSlot(eachVariable) === slot);
|
|
133
|
-
if (existing) {
|
|
134
|
-
Object.assign(existing, variable);
|
|
135
|
-
} else {
|
|
136
|
-
target.push(variable);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
function compileVariables(input, resolveVariableName) {
|
|
140
|
-
if (!input?.length) return;
|
|
141
|
-
const variables = [];
|
|
142
|
-
const byName = new Map();
|
|
143
|
-
for (const definition of input){
|
|
144
|
-
const resolved = resolveVariableName(definition);
|
|
145
|
-
if (!resolved.name) continue;
|
|
146
|
-
const value = normalizeZero(definition.value);
|
|
147
|
-
const numeric = getVariableNumericValue(value, resolved.namespace);
|
|
148
|
-
const type = numeric ? 'number' : getVariableType(value);
|
|
149
|
-
const dependencies = collectVariableDependencies(value);
|
|
150
|
-
if (definition.mode) {
|
|
151
|
-
let target = byName.get(resolved.name);
|
|
152
|
-
if (!target) {
|
|
153
|
-
target = {
|
|
154
|
-
name: resolved.name,
|
|
155
|
-
key: resolved.key,
|
|
156
|
-
...resolved.namespace ? {
|
|
157
|
-
namespace: resolved.namespace
|
|
158
|
-
} : {},
|
|
159
|
-
type,
|
|
160
|
-
modes: {},
|
|
161
|
-
...definition.static ? {
|
|
162
|
-
static: true
|
|
163
|
-
} : {}
|
|
164
|
-
};
|
|
165
|
-
byName.set(resolved.name, target);
|
|
166
|
-
pushVariable(variables, target);
|
|
167
|
-
}
|
|
168
|
-
if (definition.static) target.static = true;
|
|
169
|
-
target.modes ??= {};
|
|
170
|
-
target.modes[definition.mode] = {
|
|
171
|
-
type,
|
|
172
|
-
value: value,
|
|
173
|
-
...numeric ? {
|
|
174
|
-
numeric
|
|
175
|
-
} : {}
|
|
176
|
-
};
|
|
177
|
-
if (dependencies.size) {
|
|
178
|
-
const next = new Set([
|
|
179
|
-
...target.dependencies || [],
|
|
180
|
-
...dependencies
|
|
181
|
-
]);
|
|
182
|
-
target.dependencies = [
|
|
183
|
-
...next
|
|
184
|
-
];
|
|
185
|
-
}
|
|
186
|
-
continue;
|
|
187
|
-
}
|
|
188
|
-
const variable = {
|
|
189
|
-
name: resolved.name,
|
|
190
|
-
key: resolved.key,
|
|
191
|
-
...resolved.namespace ? {
|
|
192
|
-
namespace: resolved.namespace
|
|
193
|
-
} : {},
|
|
194
|
-
type,
|
|
195
|
-
value,
|
|
196
|
-
...numeric ? {
|
|
197
|
-
numeric
|
|
198
|
-
} : {},
|
|
199
|
-
...dependencies.size ? {
|
|
200
|
-
dependencies: [
|
|
201
|
-
...dependencies
|
|
202
|
-
]
|
|
203
|
-
} : {},
|
|
204
|
-
...definition.inline ? {
|
|
205
|
-
inline: true
|
|
206
|
-
} : {},
|
|
207
|
-
...definition.static ? {
|
|
208
|
-
static: true
|
|
209
|
-
} : {}
|
|
210
|
-
};
|
|
211
|
-
byName.set(resolved.name, variable);
|
|
212
|
-
pushVariable(variables, variable);
|
|
213
|
-
}
|
|
214
|
-
return variables.length ? variables : undefined;
|
|
215
|
-
}
|
|
216
|
-
function normalizeNumericAtRuleValue(variable, rootSize) {
|
|
217
|
-
if (variable.key.startsWith('-')) return;
|
|
218
|
-
const numeric = variable.numeric || (typeof variable.value === 'number' ? {
|
|
219
|
-
value: variable.value
|
|
220
|
-
} : undefined);
|
|
221
|
-
if (!numeric) return;
|
|
222
|
-
switch(numeric.unit){
|
|
223
|
-
case undefined:
|
|
224
|
-
case '':
|
|
225
|
-
case 'px':
|
|
226
|
-
return numeric.value / rootSize;
|
|
227
|
-
case 'rem':
|
|
228
|
-
return numeric.value;
|
|
229
|
-
default:
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
function createVariableAtRule(variable, id, rootSize) {
|
|
234
|
-
const value = normalizeNumericAtRuleValue(variable, rootSize);
|
|
235
|
-
if (value === undefined) return;
|
|
236
|
-
return {
|
|
237
|
-
id,
|
|
238
|
-
nodes: [
|
|
239
|
-
{
|
|
240
|
-
type: 'number',
|
|
241
|
-
value,
|
|
242
|
-
unit: 'rem'
|
|
243
|
-
}
|
|
244
|
-
]
|
|
245
|
-
};
|
|
246
|
-
}
|
|
247
|
-
function compileAtRules(variables, rootSize) {
|
|
248
|
-
const atRules = {};
|
|
249
|
-
const breakpointAtRules = {};
|
|
250
|
-
const containerAtRules = {};
|
|
251
|
-
for (const variable of variables || []){
|
|
252
|
-
if (variable.namespace === 'breakpoint') {
|
|
253
|
-
const atRule = createVariableAtRule(variable, 'media', rootSize);
|
|
254
|
-
if (atRule) {
|
|
255
|
-
atRules[variable.key] = atRule;
|
|
256
|
-
breakpointAtRules[variable.key] = atRule;
|
|
257
|
-
}
|
|
258
|
-
} else if (variable.namespace === 'container') {
|
|
259
|
-
const atRule = createVariableAtRule(variable, 'container', rootSize);
|
|
260
|
-
if (atRule) {
|
|
261
|
-
containerAtRules[variable.key] = atRule;
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
return {
|
|
266
|
-
atRules: Object.keys(atRules).length ? atRules : undefined,
|
|
267
|
-
breakpointAtRules: Object.keys(breakpointAtRules).length ? breakpointAtRules : undefined,
|
|
268
|
-
containerAtRules: Object.keys(containerAtRules).length ? containerAtRules : undefined
|
|
269
|
-
};
|
|
270
|
-
}
|
|
271
|
-
function cloneAtRuleNode(node) {
|
|
272
|
-
return 'children' in node ? {
|
|
273
|
-
...node,
|
|
274
|
-
children: node.children.map(cloneAtRuleNode)
|
|
275
|
-
} : {
|
|
276
|
-
...node
|
|
277
|
-
};
|
|
278
|
-
}
|
|
279
|
-
function cloneAtRule(atRule) {
|
|
280
|
-
return {
|
|
281
|
-
id: atRule.id,
|
|
282
|
-
nodes: atRule.nodes.map(cloneAtRuleNode)
|
|
283
|
-
};
|
|
284
|
-
}
|
|
285
|
-
function cloneSelectorNode(node) {
|
|
286
|
-
return 'children' in node && node.children?.length ? {
|
|
287
|
-
...node,
|
|
288
|
-
children: node.children.map(cloneSelectorNode)
|
|
289
|
-
} : {
|
|
290
|
-
...node
|
|
291
|
-
};
|
|
292
|
-
}
|
|
293
|
-
function compileVariantBranch(branch, css) {
|
|
294
|
-
const selector = branch.selector?.trim();
|
|
295
|
-
const bodylessSelector = selector ? selector.includes('&') ? selector.replace(/&/g, '') : selector : undefined;
|
|
296
|
-
const selectorNodes = branch.selectorNodes?.length ? branch.selectorNodes.map(cloneSelectorNode) : bodylessSelector ? parseSelector(bodylessSelector, css, false).map((node)=>cloneSelectorNode(node)) : undefined;
|
|
297
|
-
const atRuleNodes = branch.atRuleNodes?.length ? branch.atRuleNodes.map(cloneAtRule) : branch.atRules?.length ? branch.atRules.map((atRule)=>cloneAtRule(parseAt(atRule, css, false))) : undefined;
|
|
298
|
-
return {
|
|
299
|
-
...branch,
|
|
300
|
-
...selectorNodes?.length ? {
|
|
301
|
-
selectorNodes
|
|
302
|
-
} : {},
|
|
303
|
-
...branch.atRules?.length ? {
|
|
304
|
-
atRules: [
|
|
305
|
-
...branch.atRules
|
|
306
|
-
]
|
|
307
|
-
} : {},
|
|
308
|
-
...atRuleNodes?.length ? {
|
|
309
|
-
atRuleNodes
|
|
310
|
-
} : {}
|
|
311
|
-
};
|
|
312
|
-
}
|
|
313
|
-
function compileVariants(input, baseManifest) {
|
|
314
|
-
if (!input?.length) return {};
|
|
315
|
-
const css = createCompilerCSS(baseManifest);
|
|
316
|
-
const variants = [];
|
|
317
|
-
const selectors = {};
|
|
318
|
-
const atRules = {};
|
|
319
|
-
for (const variant of input){
|
|
320
|
-
const branches = variant.branches.map((branch)=>compileVariantBranch(branch, css));
|
|
321
|
-
variants.push({
|
|
322
|
-
token: variant.token,
|
|
323
|
-
branches
|
|
324
|
-
});
|
|
325
|
-
if (variant.token.startsWith(':')) {
|
|
326
|
-
const firstSelectorNodes = branches.find((branch)=>branch.selectorNodes?.length)?.selectorNodes;
|
|
327
|
-
if (firstSelectorNodes?.length) selectors[variant.token] = firstSelectorNodes.map(cloneSelectorNode);
|
|
328
|
-
}
|
|
329
|
-
if (variant.token.startsWith('@')) {
|
|
330
|
-
const firstAtRule = branches.find((branch)=>branch.atRuleNodes?.length)?.atRuleNodes?.[0];
|
|
331
|
-
if (firstAtRule) {
|
|
332
|
-
atRules[variant.token.slice(1)] = cloneAtRule(firstAtRule);
|
|
333
|
-
} else {
|
|
334
|
-
const firstLayer = branches.find((branch)=>branch.layer)?.layer;
|
|
335
|
-
if (firstLayer) {
|
|
336
|
-
atRules[variant.token.slice(1)] = {
|
|
337
|
-
id: 'layer',
|
|
338
|
-
nodes: [
|
|
339
|
-
{
|
|
340
|
-
type: 'string',
|
|
341
|
-
value: firstLayer
|
|
342
|
-
}
|
|
343
|
-
]
|
|
344
|
-
};
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
return {
|
|
350
|
-
variants,
|
|
351
|
-
...Object.keys(selectors).length ? {
|
|
352
|
-
selectors
|
|
353
|
-
} : {},
|
|
354
|
-
...Object.keys(atRules).length ? {
|
|
355
|
-
atRules
|
|
356
|
-
} : {}
|
|
357
|
-
};
|
|
358
|
-
}
|
|
359
|
-
function cloneDeclarations(declarations) {
|
|
360
|
-
return Array.isArray(declarations) ? [
|
|
361
|
-
...declarations
|
|
362
|
-
] : {
|
|
363
|
-
...declarations
|
|
364
|
-
};
|
|
365
|
-
}
|
|
366
|
-
function assertNoValuePlaceholder(declarations) {
|
|
367
|
-
for(const property in declarations){
|
|
368
|
-
if (declarations[property].includes('--value')) {
|
|
369
|
-
throw new Error('--value() is only supported inside managed pattern declarations');
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
function compileUtilityRule(rule) {
|
|
374
|
-
assertNoValuePlaceholder(rule.declarations);
|
|
375
|
-
return {
|
|
376
|
-
declarations: cloneDeclarations(rule.declarations),
|
|
377
|
-
...rule.atRules?.length ? {
|
|
378
|
-
atRules: [
|
|
379
|
-
...rule.atRules
|
|
380
|
-
]
|
|
381
|
-
} : {},
|
|
382
|
-
...rule.selector && rule.selector !== '&' ? {
|
|
383
|
-
selector: rule.selector
|
|
384
|
-
} : {}
|
|
385
|
-
};
|
|
386
|
-
}
|
|
387
|
-
const VALUE_PLACEHOLDER_FUNCTION = '--value()';
|
|
388
|
-
const VALUE_PLACEHOLDER_CALL = /--value\s*\(([^)]*)\)/g;
|
|
389
|
-
function compilePatternDeclarationValue(value) {
|
|
390
|
-
if (!value.includes('--value')) return value;
|
|
391
|
-
const parts = [];
|
|
392
|
-
let lastIndex = 0;
|
|
393
|
-
let matched = false;
|
|
394
|
-
VALUE_PLACEHOLDER_CALL.lastIndex = 0;
|
|
395
|
-
for (const match of value.matchAll(VALUE_PLACEHOLDER_CALL)){
|
|
396
|
-
matched = true;
|
|
397
|
-
if (match[1].trim()) {
|
|
398
|
-
throw new Error('--value() does not accept arguments');
|
|
399
|
-
}
|
|
400
|
-
if (match.index > lastIndex) parts.push(value.slice(lastIndex, match.index));
|
|
401
|
-
parts.push(null);
|
|
402
|
-
lastIndex = match.index + match[0].length;
|
|
403
|
-
}
|
|
404
|
-
if (!matched || value.slice(lastIndex).includes('--value')) {
|
|
405
|
-
throw new Error('--value() must be called as --value()');
|
|
406
|
-
}
|
|
407
|
-
if (lastIndex < value.length) parts.push(value.slice(lastIndex));
|
|
408
|
-
return value === VALUE_PLACEHOLDER_FUNCTION ? null : parts;
|
|
409
|
-
}
|
|
410
|
-
function compilePatternDeclarations(declarations) {
|
|
411
|
-
const compiled = {};
|
|
412
|
-
for(const property in declarations){
|
|
413
|
-
compiled[property] = compilePatternDeclarationValue(declarations[property]);
|
|
414
|
-
}
|
|
415
|
-
return compiled;
|
|
416
|
-
}
|
|
417
|
-
function compilePatternUtilityRule(rule) {
|
|
418
|
-
return {
|
|
419
|
-
declarations: compilePatternDeclarations(rule.declarations),
|
|
420
|
-
...rule.atRules?.length ? {
|
|
421
|
-
atRules: [
|
|
422
|
-
...rule.atRules
|
|
423
|
-
]
|
|
424
|
-
} : {},
|
|
425
|
-
...rule.selector && rule.selector !== '&' ? {
|
|
426
|
-
selector: rule.selector
|
|
427
|
-
} : {}
|
|
428
|
-
};
|
|
429
|
-
}
|
|
430
|
-
function declarationValueUsesPlaceholder(value) {
|
|
431
|
-
return value === null || Array.isArray(value) && value.includes(null);
|
|
432
|
-
}
|
|
433
|
-
function countValuePlaceholderProperties(declarations) {
|
|
434
|
-
let count = 0;
|
|
435
|
-
const declarationMap = declarations;
|
|
436
|
-
for(const property in declarationMap){
|
|
437
|
-
if (declarationValueUsesPlaceholder(declarationMap[property])) count++;
|
|
438
|
-
}
|
|
439
|
-
return count;
|
|
440
|
-
}
|
|
441
|
-
function utilityTypeFromRules(rules) {
|
|
442
|
-
return rules.some(({ declarations })=>{
|
|
443
|
-
const properties = Object.keys(declarations);
|
|
444
|
-
return properties.some((property)=>isNativeCSSShorthandProperty(property)) || countValuePlaceholderProperties(declarations) > 1;
|
|
445
|
-
}) ? UtilityType.Shorthand : UtilityType.Normal;
|
|
446
|
-
}
|
|
447
|
-
function getPatternMatcher(pattern) {
|
|
448
|
-
return {
|
|
449
|
-
type: 'pattern',
|
|
450
|
-
prefix: pattern.prefix,
|
|
451
|
-
values: [
|
|
452
|
-
...pattern.values
|
|
453
|
-
]
|
|
454
|
-
};
|
|
455
|
-
}
|
|
456
|
-
function getDynamicMatchers(dynamic) {
|
|
457
|
-
const matchers = [];
|
|
458
|
-
if (dynamic.variableAliasRefs?.length) {
|
|
459
|
-
matchers.push({
|
|
460
|
-
type: 'variable',
|
|
461
|
-
keys: [
|
|
462
|
-
dynamic.key
|
|
463
|
-
]
|
|
464
|
-
});
|
|
465
|
-
}
|
|
466
|
-
if (dynamic.kind) {
|
|
467
|
-
matchers.push({
|
|
468
|
-
type: 'value',
|
|
469
|
-
keys: [
|
|
470
|
-
dynamic.key
|
|
471
|
-
]
|
|
472
|
-
});
|
|
473
|
-
}
|
|
474
|
-
if (dynamic.arbitrary) {
|
|
475
|
-
matchers.push({
|
|
476
|
-
type: 'key',
|
|
477
|
-
keys: [
|
|
478
|
-
dynamic.key
|
|
479
|
-
]
|
|
480
|
-
});
|
|
481
|
-
}
|
|
482
|
-
if (dynamic.values?.length) {
|
|
483
|
-
matchers.push({
|
|
484
|
-
type: 'pattern',
|
|
485
|
-
prefix: dynamic.key + ':',
|
|
486
|
-
values: [
|
|
487
|
-
...dynamic.values
|
|
488
|
-
]
|
|
489
|
-
});
|
|
490
|
-
}
|
|
491
|
-
if (!matchers.length) {
|
|
492
|
-
throw new Error('Managed dynamic utility definition must include at least one value source');
|
|
493
|
-
}
|
|
494
|
-
return matchers;
|
|
495
|
-
}
|
|
496
|
-
function compileUtility(definition, order) {
|
|
497
|
-
if (definition.type === 'pattern') {
|
|
498
|
-
if (!definition.pattern) {
|
|
499
|
-
throw new Error('Managed enum pattern definition is missing a pattern');
|
|
500
|
-
}
|
|
501
|
-
const rules = [];
|
|
502
|
-
if (definition.declarations) {
|
|
503
|
-
rules.push({
|
|
504
|
-
declarations: compilePatternDeclarations(definition.declarations),
|
|
505
|
-
...definition.atRules?.length ? {
|
|
506
|
-
atRules: [
|
|
507
|
-
...definition.atRules
|
|
508
|
-
]
|
|
509
|
-
} : {}
|
|
510
|
-
});
|
|
511
|
-
}
|
|
512
|
-
if (definition.rules?.length) {
|
|
513
|
-
rules.push(...definition.rules.map(compilePatternUtilityRule));
|
|
514
|
-
}
|
|
515
|
-
return {
|
|
516
|
-
id: definition.name,
|
|
517
|
-
name: definition.name,
|
|
518
|
-
type: UtilityType.Semantic,
|
|
519
|
-
order,
|
|
520
|
-
layer: definition.layer || 'utilities',
|
|
521
|
-
emit: {
|
|
522
|
-
type: 'static',
|
|
523
|
-
rules
|
|
524
|
-
},
|
|
525
|
-
matchers: [
|
|
526
|
-
getPatternMatcher(definition.pattern)
|
|
527
|
-
]
|
|
528
|
-
};
|
|
529
|
-
}
|
|
530
|
-
if (definition.type === 'dynamic') {
|
|
531
|
-
if (!definition.dynamic) {
|
|
532
|
-
throw new Error('Managed dynamic utility definition is missing a dynamic source');
|
|
533
|
-
}
|
|
534
|
-
const rules = [];
|
|
535
|
-
if (definition.declarations) {
|
|
536
|
-
rules.push({
|
|
537
|
-
declarations: compilePatternDeclarations(definition.declarations),
|
|
538
|
-
...definition.atRules?.length ? {
|
|
539
|
-
atRules: [
|
|
540
|
-
...definition.atRules
|
|
541
|
-
]
|
|
542
|
-
} : {}
|
|
543
|
-
});
|
|
544
|
-
}
|
|
545
|
-
if (definition.rules?.length) {
|
|
546
|
-
rules.push(...definition.rules.map(compilePatternUtilityRule));
|
|
547
|
-
}
|
|
548
|
-
return {
|
|
549
|
-
id: definition.name,
|
|
550
|
-
name: definition.name,
|
|
551
|
-
type: utilityTypeFromRules(rules),
|
|
552
|
-
order,
|
|
553
|
-
layer: definition.layer || 'utilities',
|
|
554
|
-
...definition.dynamic.kind ? {
|
|
555
|
-
kind: definition.dynamic.kind
|
|
556
|
-
} : {},
|
|
557
|
-
...definition.dynamic.variableAliasRefs?.length ? {
|
|
558
|
-
variableAliasRefs: [
|
|
559
|
-
...definition.dynamic.variableAliasRefs
|
|
560
|
-
]
|
|
561
|
-
} : {},
|
|
562
|
-
emit: {
|
|
563
|
-
type: 'static',
|
|
564
|
-
rules
|
|
565
|
-
},
|
|
566
|
-
matchers: getDynamicMatchers(definition.dynamic)
|
|
567
|
-
};
|
|
568
|
-
}
|
|
569
|
-
const name = definition.name.startsWith('.') ? definition.name.slice(1) : definition.name;
|
|
570
|
-
const rules = [];
|
|
571
|
-
if (definition.declarations) {
|
|
572
|
-
assertNoValuePlaceholder(definition.declarations);
|
|
573
|
-
rules.push({
|
|
574
|
-
declarations: cloneDeclarations(definition.declarations),
|
|
575
|
-
...definition.atRules?.length ? {
|
|
576
|
-
atRules: [
|
|
577
|
-
...definition.atRules
|
|
578
|
-
]
|
|
579
|
-
} : {}
|
|
580
|
-
});
|
|
581
|
-
}
|
|
582
|
-
if (definition.rules?.length) {
|
|
583
|
-
rules.push(...definition.rules.map(compileUtilityRule));
|
|
584
|
-
}
|
|
585
|
-
return {
|
|
586
|
-
id: '.' + name,
|
|
587
|
-
name,
|
|
588
|
-
type: UtilityType.Semantic,
|
|
589
|
-
order,
|
|
590
|
-
layer: definition.layer || 'utilities',
|
|
591
|
-
emit: {
|
|
592
|
-
type: 'static',
|
|
593
|
-
rules
|
|
594
|
-
},
|
|
595
|
-
matchers: [
|
|
596
|
-
{
|
|
597
|
-
type: 'static',
|
|
598
|
-
name
|
|
599
|
-
}
|
|
600
|
-
]
|
|
601
|
-
};
|
|
602
|
-
}
|
|
603
|
-
function compileUtilities(input) {
|
|
604
|
-
if (!input?.length) return;
|
|
605
|
-
return input.map((definition, index)=>compileUtility(definition, index));
|
|
606
|
-
}
|
|
607
|
-
function compileAnimations(input) {
|
|
608
|
-
return input ? clone(input) : undefined;
|
|
609
|
-
}
|
|
610
|
-
function compileAnimationOptions(input) {
|
|
611
|
-
return input ? clone(input) : undefined;
|
|
612
|
-
}
|
|
613
|
-
function mergeBy(base, next, getKey) {
|
|
614
|
-
const merged = [
|
|
615
|
-
...(base || []).map((value)=>clone(value))
|
|
616
|
-
];
|
|
617
|
-
for (const value of next || []){
|
|
618
|
-
const key = getKey(value);
|
|
619
|
-
const index = key === undefined ? -1 : merged.findIndex((existing)=>getKey(existing) === key);
|
|
620
|
-
if (index === -1) {
|
|
621
|
-
merged.push(clone(value));
|
|
622
|
-
} else {
|
|
623
|
-
merged[index] = clone(value);
|
|
624
|
-
}
|
|
625
|
-
}
|
|
626
|
-
return merged.length ? merged : undefined;
|
|
627
|
-
}
|
|
628
|
-
function mergeVariables(base, next) {
|
|
629
|
-
const merged = mergeBy(flattenMasterCSSManifestVariables(base), flattenMasterCSSManifestVariables(next), (variable)=>variable.name);
|
|
630
|
-
return groupMasterCSSManifestVariables(merged);
|
|
631
|
-
}
|
|
632
|
-
function mergeRecords(base, next) {
|
|
633
|
-
return Object.keys(base || {}).length || Object.keys(next || {}).length ? {
|
|
634
|
-
...base ? clone(base) : {},
|
|
635
|
-
...next ? clone(next) : {}
|
|
636
|
-
} : undefined;
|
|
637
|
-
}
|
|
638
|
-
function mergeAnimationOptions(base, next, animations) {
|
|
639
|
-
const merged = mergeRecords(base, next);
|
|
640
|
-
if (!merged) return;
|
|
641
|
-
for (const animationName of Object.keys(animations || {})){
|
|
642
|
-
if (!next?.[animationName]) {
|
|
643
|
-
delete merged[animationName];
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
return Object.keys(merged).length ? merged : undefined;
|
|
647
|
-
}
|
|
648
|
-
function mergeManifest(baseManifest, fragment) {
|
|
649
|
-
if (!baseManifest) {
|
|
650
|
-
return clone(fragment);
|
|
651
|
-
}
|
|
652
|
-
const manifest = {
|
|
653
|
-
version: 1,
|
|
654
|
-
settings: {
|
|
655
|
-
...baseManifest.settings || {},
|
|
656
|
-
...fragment.settings || {}
|
|
657
|
-
},
|
|
658
|
-
variables: mergeVariables(baseManifest.variables, fragment.variables),
|
|
659
|
-
animations: mergeRecords(baseManifest.animations, fragment.animations),
|
|
660
|
-
animationOptions: mergeAnimationOptions(baseManifest.animationOptions, fragment.animationOptions, fragment.animations),
|
|
661
|
-
variants: mergeBy(baseManifest.variants, fragment.variants, (variant)=>variant.token),
|
|
662
|
-
atRules: mergeRecords(baseManifest.atRules, fragment.atRules),
|
|
663
|
-
breakpointAtRules: mergeRecords(baseManifest.breakpointAtRules, fragment.breakpointAtRules),
|
|
664
|
-
containerAtRules: mergeRecords(baseManifest.containerAtRules, fragment.containerAtRules),
|
|
665
|
-
selectors: mergeRecords(baseManifest.selectors, fragment.selectors),
|
|
666
|
-
utilities: mergeBy(baseManifest.utilities, fragment.utilities, (utility)=>`${utility.id}\0${utility.layer || ''}`),
|
|
667
|
-
debug: mergeRecords(baseManifest.debug, fragment.debug)
|
|
668
|
-
};
|
|
669
|
-
return Object.fromEntries(Object.entries(manifest).filter(([, value])=>value !== undefined && (!Array.isArray(value) || value.length) && (typeof value !== 'object' || Array.isArray(value) || Object.keys(value).length)));
|
|
670
|
-
}
|
|
671
|
-
function createMasterCSSManifest(input = {}, options = {}) {
|
|
672
|
-
const rootSize = input.rootSize ?? options.baseManifest?.settings?.rootSize ?? 16;
|
|
673
|
-
const resolveVariableName = createVariableNameResolver(input, options);
|
|
674
|
-
const variableDefinitions = compileVariables(input.variables, resolveVariableName);
|
|
675
|
-
const variables = groupMasterCSSManifestVariables(variableDefinitions);
|
|
676
|
-
const { atRules, breakpointAtRules, containerAtRules } = compileAtRules(variableDefinitions, rootSize);
|
|
677
|
-
const settings = {
|
|
678
|
-
...input.rootSize !== undefined ? {
|
|
679
|
-
rootSize: input.rootSize
|
|
680
|
-
} : {},
|
|
681
|
-
...input.baseUnit !== undefined ? {
|
|
682
|
-
baseUnit: input.baseUnit
|
|
683
|
-
} : {},
|
|
684
|
-
...input.defaultMode !== undefined ? {
|
|
685
|
-
defaultMode: input.defaultMode
|
|
686
|
-
} : {},
|
|
687
|
-
...input.scope !== undefined ? {
|
|
688
|
-
scope: input.scope
|
|
689
|
-
} : {},
|
|
690
|
-
...input.important !== undefined ? {
|
|
691
|
-
important: input.important
|
|
692
|
-
} : {},
|
|
693
|
-
...input.modeTrigger !== undefined ? {
|
|
694
|
-
modeTrigger: input.modeTrigger
|
|
695
|
-
} : {},
|
|
696
|
-
...input.modes?.length ? {
|
|
697
|
-
modes: [
|
|
698
|
-
...input.modes
|
|
699
|
-
]
|
|
700
|
-
} : {}
|
|
701
|
-
};
|
|
702
|
-
const variantBaseManifest = mergeManifest(options.baseManifest, {
|
|
703
|
-
version: 1,
|
|
704
|
-
...Object.keys(settings).length ? {
|
|
705
|
-
settings
|
|
706
|
-
} : {},
|
|
707
|
-
...variables ? {
|
|
708
|
-
variables
|
|
709
|
-
} : {},
|
|
710
|
-
...atRules ? {
|
|
711
|
-
atRules
|
|
712
|
-
} : {},
|
|
713
|
-
...breakpointAtRules ? {
|
|
714
|
-
breakpointAtRules
|
|
715
|
-
} : {},
|
|
716
|
-
...containerAtRules ? {
|
|
717
|
-
containerAtRules
|
|
718
|
-
} : {}
|
|
719
|
-
});
|
|
720
|
-
const { variants, selectors, atRules: variantAtRules } = compileVariants(input.variants, variantBaseManifest);
|
|
721
|
-
const utilities = compileUtilities(input.utilities);
|
|
722
|
-
const animations = compileAnimations(input.animations);
|
|
723
|
-
const animationOptions = compileAnimationOptions(input.animationOptions);
|
|
724
|
-
const fragment = {
|
|
725
|
-
version: 1,
|
|
726
|
-
...Object.keys(settings).length ? {
|
|
727
|
-
settings
|
|
728
|
-
} : {},
|
|
729
|
-
...variables ? {
|
|
730
|
-
variables
|
|
731
|
-
} : {},
|
|
732
|
-
...animations ? {
|
|
733
|
-
animations
|
|
734
|
-
} : {},
|
|
735
|
-
...animationOptions ? {
|
|
736
|
-
animationOptions
|
|
737
|
-
} : {},
|
|
738
|
-
...variants?.length ? {
|
|
739
|
-
variants
|
|
740
|
-
} : {},
|
|
741
|
-
...atRules || variantAtRules ? {
|
|
742
|
-
atRules: mergeRecords(atRules, variantAtRules)
|
|
743
|
-
} : {},
|
|
744
|
-
...breakpointAtRules ? {
|
|
745
|
-
breakpointAtRules
|
|
746
|
-
} : {},
|
|
747
|
-
...containerAtRules ? {
|
|
748
|
-
containerAtRules
|
|
749
|
-
} : {},
|
|
750
|
-
...selectors ? {
|
|
751
|
-
selectors
|
|
752
|
-
} : {},
|
|
753
|
-
...utilities?.length ? {
|
|
754
|
-
utilities
|
|
755
|
-
} : {}
|
|
756
|
-
};
|
|
757
|
-
return mergeManifest(options.baseManifest, fragment);
|
|
758
|
-
}
|
|
759
|
-
|
|
760
|
-
export { createMasterCSSManifest, createVariableNameResolver };
|