@master/css 2.0.0-rc.67 → 2.0.0-rc.68
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/dist/config/variables.cjs +179 -179
- package/dist/config/variables.mjs +179 -179
- package/dist/core.cjs +33 -51
- package/dist/core.mjs +33 -51
- package/dist/syntax-rule.cjs +9 -4
- package/dist/syntax-rule.mjs +9 -4
- package/dist/utils/generate-selector.cjs +2 -1
- package/dist/utils/generate-selector.mjs +2 -1
- package/dist/utils/parse-selector.cjs +4 -2
- package/dist/utils/parse-selector.d.ts +1 -1
- package/dist/utils/parse-selector.mjs +4 -2
- package/package.json +1 -1
|
@@ -109,358 +109,358 @@ const _variables = {
|
|
|
109
109
|
current: 'currentColor',
|
|
110
110
|
frame: {
|
|
111
111
|
neutral: {
|
|
112
|
-
'@light': '$
|
|
113
|
-
'@dark': '$
|
|
112
|
+
'@light': '$slate-60',
|
|
113
|
+
'@dark': '$gray-30'
|
|
114
114
|
},
|
|
115
115
|
light: {
|
|
116
|
-
'@light': '$
|
|
117
|
-
'@dark': '$
|
|
116
|
+
'@light': '$slate-60/.2',
|
|
117
|
+
'@dark': '$gray-30/.2'
|
|
118
118
|
},
|
|
119
119
|
lighter: {
|
|
120
|
-
'@light': '$
|
|
121
|
-
'@dark': '$
|
|
120
|
+
'@light': '$slate-60/.16',
|
|
121
|
+
'@dark': '$gray-30/.16'
|
|
122
122
|
},
|
|
123
123
|
lightest: {
|
|
124
|
-
'@light': '$
|
|
125
|
-
'@dark': '$
|
|
124
|
+
'@light': '$slate-60/.12',
|
|
125
|
+
'@dark': '$gray-30/.12'
|
|
126
126
|
}
|
|
127
127
|
},
|
|
128
128
|
// from figma
|
|
129
129
|
white: '#ffffff',
|
|
130
130
|
black: '#000000',
|
|
131
131
|
base: {
|
|
132
|
-
'@light': '$
|
|
133
|
-
'@dark': '$
|
|
132
|
+
'@light': '$white',
|
|
133
|
+
'@dark': '$gray-95'
|
|
134
134
|
},
|
|
135
135
|
canvas: {
|
|
136
|
-
'@light': '$
|
|
137
|
-
'@dark': '$
|
|
136
|
+
'@light': '$slate-5',
|
|
137
|
+
'@dark': '$gray-90'
|
|
138
138
|
},
|
|
139
139
|
surface: {
|
|
140
|
-
'@light': '$
|
|
141
|
-
'@dark': '$
|
|
140
|
+
'@light': '$white',
|
|
141
|
+
'@dark': '$gray-80'
|
|
142
142
|
},
|
|
143
143
|
invert: {
|
|
144
|
-
'@light': '$
|
|
145
|
-
'@dark': '$
|
|
144
|
+
'@light': '$black',
|
|
145
|
+
'@dark': '$white'
|
|
146
146
|
},
|
|
147
147
|
gray: {
|
|
148
|
-
'@light': '$
|
|
149
|
-
'@dark': '$
|
|
148
|
+
'@light': '$gray-30',
|
|
149
|
+
'@dark': '$gray-40',
|
|
150
150
|
active: {
|
|
151
|
-
'@light': '$
|
|
152
|
-
'@dark': '$
|
|
151
|
+
'@light': '$gray-40',
|
|
152
|
+
'@dark': '$gray-30'
|
|
153
153
|
},
|
|
154
154
|
text: {
|
|
155
|
-
'@light': '$
|
|
156
|
-
'@dark': '$
|
|
155
|
+
'@light': '$gray-90',
|
|
156
|
+
'@dark': '$gray-95'
|
|
157
157
|
}
|
|
158
158
|
},
|
|
159
159
|
slate: {
|
|
160
|
-
'@light': '$
|
|
161
|
-
'@dark': '$
|
|
160
|
+
'@light': '$slate-30',
|
|
161
|
+
'@dark': '$slate-40',
|
|
162
162
|
active: {
|
|
163
|
-
'@light': '$
|
|
164
|
-
'@dark': '$
|
|
163
|
+
'@light': '$slate-40',
|
|
164
|
+
'@dark': '$slate-30'
|
|
165
165
|
},
|
|
166
166
|
text: {
|
|
167
|
-
'@light': '$
|
|
168
|
-
'@dark': '$
|
|
167
|
+
'@light': '$slate-90',
|
|
168
|
+
'@dark': '$slate-95'
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
171
|
brown: {
|
|
172
|
-
'@light': '$
|
|
173
|
-
'@dark': '$
|
|
172
|
+
'@light': '$brown-40',
|
|
173
|
+
'@dark': '$brown-50',
|
|
174
174
|
active: {
|
|
175
|
-
'@light': '$
|
|
176
|
-
'@dark': '$
|
|
175
|
+
'@light': '$brown-50',
|
|
176
|
+
'@dark': '$brown-40'
|
|
177
177
|
},
|
|
178
178
|
text: {
|
|
179
|
-
'@light': '$
|
|
180
|
-
'@dark': '$
|
|
179
|
+
'@light': '$brown-90',
|
|
180
|
+
'@dark': '$brown-95'
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
orange: {
|
|
184
|
-
'@light': '$
|
|
185
|
-
'@dark': '$
|
|
184
|
+
'@light': '$orange-40',
|
|
185
|
+
'@dark': '$orange-50',
|
|
186
186
|
active: {
|
|
187
|
-
'@light': '$
|
|
188
|
-
'@dark': '$
|
|
187
|
+
'@light': '$orange-50',
|
|
188
|
+
'@dark': '$orange-40'
|
|
189
189
|
},
|
|
190
190
|
text: {
|
|
191
|
-
'@light': '$
|
|
192
|
-
'@dark': '$
|
|
191
|
+
'@light': '$orange-90',
|
|
192
|
+
'@dark': '$orange-95'
|
|
193
193
|
}
|
|
194
194
|
},
|
|
195
195
|
amber: {
|
|
196
|
-
'@light': '$
|
|
197
|
-
'@dark': '$
|
|
196
|
+
'@light': '$amber-40',
|
|
197
|
+
'@dark': '$amber-50',
|
|
198
198
|
active: {
|
|
199
|
-
'@light': '$
|
|
200
|
-
'@dark': '$
|
|
199
|
+
'@light': '$amber-50',
|
|
200
|
+
'@dark': '$amber-30'
|
|
201
201
|
},
|
|
202
202
|
text: {
|
|
203
|
-
'@light': '$
|
|
204
|
-
'@dark': '$
|
|
203
|
+
'@light': '$amber-90',
|
|
204
|
+
'@dark': '$amber-95'
|
|
205
205
|
}
|
|
206
206
|
},
|
|
207
207
|
yellow: {
|
|
208
|
-
'@light': '$
|
|
209
|
-
'@dark': '$
|
|
208
|
+
'@light': '$yellow-40',
|
|
209
|
+
'@dark': '$yellow-50',
|
|
210
210
|
active: {
|
|
211
|
-
'@light': '$
|
|
212
|
-
'@dark': '$
|
|
211
|
+
'@light': '$yellow-50',
|
|
212
|
+
'@dark': '$yellow-30'
|
|
213
213
|
},
|
|
214
214
|
text: {
|
|
215
|
-
'@light': '$
|
|
216
|
-
'@dark': '$
|
|
215
|
+
'@light': '$yellow-90',
|
|
216
|
+
'@dark': '$yellow-95'
|
|
217
217
|
}
|
|
218
218
|
},
|
|
219
219
|
lime: {
|
|
220
|
-
'@light': '$
|
|
221
|
-
'@dark': '$
|
|
220
|
+
'@light': '$lime-40',
|
|
221
|
+
'@dark': '$lime-50',
|
|
222
222
|
active: {
|
|
223
|
-
'@light': '$
|
|
224
|
-
'@dark': '$
|
|
223
|
+
'@light': '$lime-50',
|
|
224
|
+
'@dark': '$lime-30'
|
|
225
225
|
},
|
|
226
226
|
text: {
|
|
227
|
-
'@light': '$
|
|
228
|
-
'@dark': '$
|
|
227
|
+
'@light': '$lime-90',
|
|
228
|
+
'@dark': '$lime-95'
|
|
229
229
|
}
|
|
230
230
|
},
|
|
231
231
|
green: {
|
|
232
|
-
'@light': '$
|
|
233
|
-
'@dark': '$
|
|
232
|
+
'@light': '$green-40',
|
|
233
|
+
'@dark': '$green-50',
|
|
234
234
|
active: {
|
|
235
|
-
'@light': '$
|
|
236
|
-
'@dark': '$
|
|
235
|
+
'@light': '$green-50',
|
|
236
|
+
'@dark': '$green-30'
|
|
237
237
|
},
|
|
238
238
|
text: {
|
|
239
|
-
'@light': '$
|
|
240
|
-
'@dark': '$
|
|
239
|
+
'@light': '$green-90',
|
|
240
|
+
'@dark': '$green-95'
|
|
241
241
|
}
|
|
242
242
|
},
|
|
243
243
|
beryl: {
|
|
244
|
-
'@light': '$
|
|
245
|
-
'@dark': '$
|
|
244
|
+
'@light': '$beryl-40',
|
|
245
|
+
'@dark': '$beryl-50',
|
|
246
246
|
active: {
|
|
247
|
-
'@light': '$
|
|
248
|
-
'@dark': '$
|
|
247
|
+
'@light': '$beryl-50',
|
|
248
|
+
'@dark': '$beryl-30'
|
|
249
249
|
},
|
|
250
250
|
text: {
|
|
251
|
-
'@light': '$
|
|
252
|
-
'@dark': '$
|
|
251
|
+
'@light': '$beryl-90',
|
|
252
|
+
'@dark': '$beryl-95'
|
|
253
253
|
}
|
|
254
254
|
},
|
|
255
255
|
teal: {
|
|
256
|
-
'@light': '$
|
|
257
|
-
'@dark': '$
|
|
256
|
+
'@light': '$teal-40',
|
|
257
|
+
'@dark': '$teal-50',
|
|
258
258
|
active: {
|
|
259
|
-
'@light': '$
|
|
260
|
-
'@dark': '$
|
|
259
|
+
'@light': '$teal-50',
|
|
260
|
+
'@dark': '$teal-30'
|
|
261
261
|
},
|
|
262
262
|
text: {
|
|
263
|
-
'@light': '$
|
|
264
|
-
'@dark': '$
|
|
263
|
+
'@light': '$teal-90',
|
|
264
|
+
'@dark': '$teal-95'
|
|
265
265
|
}
|
|
266
266
|
},
|
|
267
267
|
cyan: {
|
|
268
|
-
'@light': '$
|
|
269
|
-
'@dark': '$
|
|
268
|
+
'@light': '$cyan-40',
|
|
269
|
+
'@dark': '$cyan-50',
|
|
270
270
|
active: {
|
|
271
|
-
'@light': '$
|
|
272
|
-
'@dark': '$
|
|
271
|
+
'@light': '$cyan-50',
|
|
272
|
+
'@dark': '$cyan-30'
|
|
273
273
|
},
|
|
274
274
|
text: {
|
|
275
|
-
'@light': '$
|
|
276
|
-
'@dark': '$
|
|
275
|
+
'@light': '$cyan-90',
|
|
276
|
+
'@dark': '$cyan-95'
|
|
277
277
|
}
|
|
278
278
|
},
|
|
279
279
|
sky: {
|
|
280
|
-
'@light': '$
|
|
281
|
-
'@dark': '$
|
|
280
|
+
'@light': '$sky-60',
|
|
281
|
+
'@dark': '$sky-50',
|
|
282
282
|
active: {
|
|
283
|
-
'@light': '$
|
|
284
|
-
'@dark': '$
|
|
283
|
+
'@light': '$sky-70',
|
|
284
|
+
'@dark': '$sky-40'
|
|
285
285
|
},
|
|
286
|
-
text: '$
|
|
286
|
+
text: '$white'
|
|
287
287
|
},
|
|
288
288
|
blue: {
|
|
289
|
-
'@light': '$
|
|
290
|
-
'@dark': '$
|
|
289
|
+
'@light': '$blue-60',
|
|
290
|
+
'@dark': '$blue-50',
|
|
291
291
|
active: {
|
|
292
|
-
'@light': '$
|
|
293
|
-
'@dark': '$
|
|
292
|
+
'@light': '$blue-70',
|
|
293
|
+
'@dark': '$blue-40'
|
|
294
294
|
},
|
|
295
|
-
text: '$
|
|
295
|
+
text: '$white'
|
|
296
296
|
},
|
|
297
297
|
indigo: {
|
|
298
|
-
'@light': '$
|
|
299
|
-
'@dark': '$
|
|
298
|
+
'@light': '$indigo-60',
|
|
299
|
+
'@dark': '$indigo-50',
|
|
300
300
|
active: {
|
|
301
|
-
'@light': '$
|
|
302
|
-
'@dark': '$
|
|
301
|
+
'@light': '$indigo-70',
|
|
302
|
+
'@dark': '$indigo-40'
|
|
303
303
|
},
|
|
304
|
-
text: '$
|
|
304
|
+
text: '$white'
|
|
305
305
|
},
|
|
306
306
|
violet: {
|
|
307
|
-
'@light': '$
|
|
308
|
-
'@dark': '$
|
|
307
|
+
'@light': '$violet-60',
|
|
308
|
+
'@dark': '$violet-50',
|
|
309
309
|
active: {
|
|
310
|
-
'@light': '$
|
|
311
|
-
'@dark': '$
|
|
310
|
+
'@light': '$violet-70',
|
|
311
|
+
'@dark': '$violet-40'
|
|
312
312
|
},
|
|
313
|
-
text: '$
|
|
313
|
+
text: '$white'
|
|
314
314
|
},
|
|
315
315
|
purple: {
|
|
316
|
-
'@light': '$
|
|
317
|
-
'@dark': '$
|
|
316
|
+
'@light': '$purple-60',
|
|
317
|
+
'@dark': '$purple-50',
|
|
318
318
|
active: {
|
|
319
|
-
'@light': '$
|
|
320
|
-
'@dark': '$
|
|
319
|
+
'@light': '$purple-70',
|
|
320
|
+
'@dark': '$purple-40'
|
|
321
321
|
},
|
|
322
|
-
text: '$
|
|
322
|
+
text: '$white'
|
|
323
323
|
},
|
|
324
324
|
fuchsia: {
|
|
325
|
-
'@light': '$
|
|
326
|
-
'@dark': '$
|
|
325
|
+
'@light': '$fuchsia-60',
|
|
326
|
+
'@dark': '$fuchsia-50',
|
|
327
327
|
active: {
|
|
328
|
-
'@light': '$
|
|
329
|
-
'@dark': '$
|
|
328
|
+
'@light': '$fuchsia-70',
|
|
329
|
+
'@dark': '$fuchsia-40'
|
|
330
330
|
},
|
|
331
|
-
text: '$
|
|
331
|
+
text: '$white'
|
|
332
332
|
},
|
|
333
333
|
pink: {
|
|
334
|
-
'@light': '$
|
|
335
|
-
'@dark': '$
|
|
334
|
+
'@light': '$pink-60',
|
|
335
|
+
'@dark': '$pink-50',
|
|
336
336
|
active: {
|
|
337
|
-
'@light': '$
|
|
338
|
-
'@dark': '$
|
|
337
|
+
'@light': '$pink-70',
|
|
338
|
+
'@dark': '$pink-40'
|
|
339
339
|
},
|
|
340
|
-
text: '$
|
|
340
|
+
text: '$white'
|
|
341
341
|
},
|
|
342
342
|
crimson: {
|
|
343
|
-
'@light': '$
|
|
344
|
-
'@dark': '$
|
|
343
|
+
'@light': '$crimson-60',
|
|
344
|
+
'@dark': '$crimson-50',
|
|
345
345
|
active: {
|
|
346
|
-
'@light': '$
|
|
347
|
-
'@dark': '$
|
|
346
|
+
'@light': '$crimson-70',
|
|
347
|
+
'@dark': '$crimson-40'
|
|
348
348
|
},
|
|
349
|
-
text: '$
|
|
349
|
+
text: '$white'
|
|
350
350
|
},
|
|
351
351
|
red: {
|
|
352
|
-
'@light': '$
|
|
353
|
-
'@dark': '$
|
|
352
|
+
'@light': '$red-60',
|
|
353
|
+
'@dark': '$red-50',
|
|
354
354
|
active: {
|
|
355
|
-
'@light': '$
|
|
356
|
-
'@dark': '$
|
|
355
|
+
'@light': '$red-70',
|
|
356
|
+
'@dark': '$red-40'
|
|
357
357
|
},
|
|
358
|
-
text: '$
|
|
358
|
+
text: '$white'
|
|
359
359
|
},
|
|
360
360
|
text: {
|
|
361
361
|
invert: {
|
|
362
|
-
'@light': '$
|
|
363
|
-
'@dark': '$
|
|
362
|
+
'@light': '$white',
|
|
363
|
+
'@dark': '$black'
|
|
364
364
|
},
|
|
365
365
|
strong: {
|
|
366
|
-
'@light': '$
|
|
367
|
-
'@dark': '$
|
|
366
|
+
'@light': '$slate-95',
|
|
367
|
+
'@dark': '$gray-10'
|
|
368
368
|
},
|
|
369
369
|
neutral: {
|
|
370
|
-
'@light': '$
|
|
371
|
-
'@dark': '$
|
|
370
|
+
'@light': '$slate-70',
|
|
371
|
+
'@dark': '$gray-30'
|
|
372
372
|
},
|
|
373
373
|
lightest: {
|
|
374
|
-
'@light': '$
|
|
375
|
-
'@dark': '$
|
|
374
|
+
'@light': '$slate-30',
|
|
375
|
+
'@dark': '$gray-60'
|
|
376
376
|
},
|
|
377
377
|
lighter: {
|
|
378
|
-
'@light': '$
|
|
379
|
-
'@dark': '$
|
|
378
|
+
'@light': '$slate-40',
|
|
379
|
+
'@dark': '$gray-50'
|
|
380
380
|
},
|
|
381
381
|
light: {
|
|
382
|
-
'@light': '$
|
|
383
|
-
'@dark': '$
|
|
382
|
+
'@light': '$slate-50',
|
|
383
|
+
'@dark': '$gray-40'
|
|
384
384
|
},
|
|
385
385
|
gray: {
|
|
386
|
-
'@light': '$
|
|
387
|
-
'@dark': '$
|
|
386
|
+
'@light': '$gray-60',
|
|
387
|
+
'@dark': '$gray-30'
|
|
388
388
|
},
|
|
389
389
|
slate: {
|
|
390
|
-
'@light': '$
|
|
391
|
-
'@dark': '$
|
|
390
|
+
'@light': '$slate-60',
|
|
391
|
+
'@dark': '$slate-30'
|
|
392
392
|
},
|
|
393
393
|
brown: {
|
|
394
|
-
'@light': '$
|
|
395
|
-
'@dark': '$
|
|
394
|
+
'@light': '$brown-60',
|
|
395
|
+
'@dark': '$brown-30'
|
|
396
396
|
},
|
|
397
397
|
orange: {
|
|
398
|
-
'@light': '$
|
|
399
|
-
'@dark': '$
|
|
398
|
+
'@light': '$orange-60',
|
|
399
|
+
'@dark': '$orange-30'
|
|
400
400
|
},
|
|
401
401
|
amber: {
|
|
402
|
-
'@light': '$
|
|
403
|
-
'@dark': '$
|
|
402
|
+
'@light': '$amber-60',
|
|
403
|
+
'@dark': '$amber-40'
|
|
404
404
|
},
|
|
405
405
|
yellow: {
|
|
406
|
-
'@light': '$
|
|
407
|
-
'@dark': '$
|
|
406
|
+
'@light': '$yellow-60',
|
|
407
|
+
'@dark': '$yellow-40'
|
|
408
408
|
},
|
|
409
409
|
lime: {
|
|
410
|
-
'@light': '$
|
|
411
|
-
'@dark': '$
|
|
410
|
+
'@light': '$lime-70',
|
|
411
|
+
'@dark': '$lime-40'
|
|
412
412
|
},
|
|
413
413
|
green: {
|
|
414
|
-
'@light': '$
|
|
415
|
-
'@dark': '$
|
|
414
|
+
'@light': '$green-70',
|
|
415
|
+
'@dark': '$green-40'
|
|
416
416
|
},
|
|
417
417
|
beryl: {
|
|
418
|
-
'@light': '$
|
|
419
|
-
'@dark': '$
|
|
418
|
+
'@light': '$beryl-70',
|
|
419
|
+
'@dark': '$beryl-40'
|
|
420
420
|
},
|
|
421
421
|
teal: {
|
|
422
|
-
'@light': '$
|
|
423
|
-
'@dark': '$
|
|
422
|
+
'@light': '$teal-70',
|
|
423
|
+
'@dark': '$teal-40'
|
|
424
424
|
},
|
|
425
425
|
cyan: {
|
|
426
|
-
'@light': '$
|
|
427
|
-
'@dark': '$
|
|
426
|
+
'@light': '$cyan-70',
|
|
427
|
+
'@dark': '$cyan-40'
|
|
428
428
|
},
|
|
429
429
|
sky: {
|
|
430
|
-
'@light': '$
|
|
431
|
-
'@dark': '$
|
|
430
|
+
'@light': '$sky-70',
|
|
431
|
+
'@dark': '$sky-30'
|
|
432
432
|
},
|
|
433
433
|
blue: {
|
|
434
|
-
'@light': '$
|
|
435
|
-
'@dark': '$
|
|
434
|
+
'@light': '$blue-60',
|
|
435
|
+
'@dark': '$blue-30'
|
|
436
436
|
},
|
|
437
437
|
indigo: {
|
|
438
|
-
'@light': '$
|
|
439
|
-
'@dark': '$
|
|
438
|
+
'@light': '$indigo-60',
|
|
439
|
+
'@dark': '$indigo-30'
|
|
440
440
|
},
|
|
441
441
|
violet: {
|
|
442
|
-
'@light': '$
|
|
443
|
-
'@dark': '$
|
|
442
|
+
'@light': '$violet-60',
|
|
443
|
+
'@dark': '$violet-30'
|
|
444
444
|
},
|
|
445
445
|
purple: {
|
|
446
|
-
'@light': '$
|
|
447
|
-
'@dark': '$
|
|
446
|
+
'@light': '$purple-60',
|
|
447
|
+
'@dark': '$purple-30'
|
|
448
448
|
},
|
|
449
449
|
fuchsia: {
|
|
450
|
-
'@light': '$
|
|
451
|
-
'@dark': '$
|
|
450
|
+
'@light': '$fuchsia-60',
|
|
451
|
+
'@dark': '$fuchsia-30'
|
|
452
452
|
},
|
|
453
453
|
pink: {
|
|
454
|
-
'@light': '$
|
|
455
|
-
'@dark': '$
|
|
454
|
+
'@light': '$pink-60',
|
|
455
|
+
'@dark': '$pink-30'
|
|
456
456
|
},
|
|
457
457
|
crimson: {
|
|
458
|
-
'@light': '$
|
|
459
|
-
'@dark': '$
|
|
458
|
+
'@light': '$crimson-60',
|
|
459
|
+
'@dark': '$crimson-30'
|
|
460
460
|
},
|
|
461
461
|
red: {
|
|
462
|
-
'@light': '$
|
|
463
|
-
'@dark': '$
|
|
462
|
+
'@light': '$red-60',
|
|
463
|
+
'@dark': '$red-30'
|
|
464
464
|
}
|
|
465
465
|
}
|
|
466
466
|
};
|
package/dist/core.cjs
CHANGED
|
@@ -249,25 +249,6 @@ class MasterCSS {
|
|
|
249
249
|
for (const name of flatNames){
|
|
250
250
|
resolve(name);
|
|
251
251
|
}
|
|
252
|
-
// Second pass: convert to grouped syntax rule strings
|
|
253
|
-
this.components.forEach((compClasses, componentName)=>{
|
|
254
|
-
const syntaxRulesByStateToken = {};
|
|
255
|
-
for (const syntax of compClasses){
|
|
256
|
-
const parsed = this.create(syntax);
|
|
257
|
-
if (parsed?.valid) {
|
|
258
|
-
const group = syntaxRulesByStateToken[parsed.stateToken] ||= [];
|
|
259
|
-
group.push(parsed);
|
|
260
|
-
} else {
|
|
261
|
-
console.error(`Invalid class "${syntax}" found in ${componentName} component.`);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
const result = Object.entries(syntaxRulesByStateToken).map(([stateToken, syntaxRules])=>{
|
|
265
|
-
if (syntaxRules.length === 1) return syntaxRules[0].name;
|
|
266
|
-
const namesWithoutToken = syntaxRules.map((s)=>s.name.slice(0, s.name.length - s.stateToken.length));
|
|
267
|
-
return `{${namesWithoutToken.join(';')}}${stateToken}`;
|
|
268
|
-
});
|
|
269
|
-
this.components.set(componentName, result);
|
|
270
|
-
});
|
|
271
252
|
}
|
|
272
253
|
resolveSelectors() {
|
|
273
254
|
const { selectors } = this.config;
|
|
@@ -405,46 +386,47 @@ class MasterCSS {
|
|
|
405
386
|
value: variableDefinition * -1
|
|
406
387
|
});
|
|
407
388
|
} else if (typeof variableDefinition === 'string') {
|
|
408
|
-
const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
|
|
389
|
+
const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$|^\$([a-zA-Z0-9-]+)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
|
|
409
390
|
const flatName = name.join('-');
|
|
410
391
|
if (aliasResult) {
|
|
392
|
+
const alias = aliasResult[1] ?? aliasResult[3];
|
|
393
|
+
const modeSuffix = aliasResult[2] ?? aliasResult[4];
|
|
411
394
|
let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
|
|
412
395
|
if (!aliasVariableModeResolver) {
|
|
413
396
|
aliasVariableModeResolvers.set(flatName, aliasVariableModeResolver = {});
|
|
414
397
|
}
|
|
415
398
|
aliasVariableModeResolver[mode] = ()=>{
|
|
416
399
|
delete aliasVariableModeResolver[mode];
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
}
|
|
400
|
+
if (!alias) return;
|
|
401
|
+
const [baseAlias, aliasMode] = alias.split('@');
|
|
402
|
+
const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(baseAlias);
|
|
403
|
+
if (eachAliasModeVariableResolver) {
|
|
404
|
+
for (const mode of Object.keys(eachAliasModeVariableResolver)){
|
|
405
|
+
eachAliasModeVariableResolver[mode]?.();
|
|
424
406
|
}
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
|
|
407
|
+
}
|
|
408
|
+
const aliasVariable = this.variables.get(baseAlias);
|
|
409
|
+
if (aliasVariable) {
|
|
410
|
+
if (aliasMode === undefined && aliasVariable.modes) {
|
|
411
|
+
addVariable(name, {
|
|
412
|
+
type: aliasVariable.type,
|
|
413
|
+
value: aliasVariable.value,
|
|
414
|
+
space: aliasVariable.space
|
|
415
|
+
}, '', modeSuffix);
|
|
416
|
+
for(const mode in aliasVariable.modes){
|
|
417
|
+
addVariable(name, aliasVariable.modes[mode], mode, modeSuffix);
|
|
418
|
+
}
|
|
419
|
+
} else {
|
|
420
|
+
const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
|
|
421
|
+
if (variable) {
|
|
422
|
+
const newVariable = {
|
|
423
|
+
type: variable.type,
|
|
424
|
+
value: variable.value,
|
|
425
|
+
...variable.type === 'color' ? {
|
|
426
|
+
space: variable.space
|
|
427
|
+
} : {}
|
|
428
|
+
};
|
|
429
|
+
addVariable(name, newVariable, undefined, modeSuffix);
|
|
448
430
|
}
|
|
449
431
|
}
|
|
450
432
|
}
|
|
@@ -550,7 +532,7 @@ class MasterCSS {
|
|
|
550
532
|
if (syntaxRule && syntaxRule.valid) {
|
|
551
533
|
syntaxRules.push(syntaxRule);
|
|
552
534
|
} else {
|
|
553
|
-
console.error(`Invalid
|
|
535
|
+
console.error(`Invalid class "${cls}" found in ${className} component.`);
|
|
554
536
|
}
|
|
555
537
|
});
|
|
556
538
|
} else {
|