@master/css 2.0.0-rc.57 → 2.0.0-rc.59

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.
Files changed (26) hide show
  1. package/dist/config/functions.cjs +1 -1
  2. package/dist/config/functions.mjs +1 -1
  3. package/dist/core.cjs +113 -113
  4. package/dist/core.d.ts +62 -12
  5. package/dist/core.mjs +113 -113
  6. package/dist/factories/with-syntax-layer.cjs +308 -0
  7. package/dist/factories/with-syntax-layer.d.ts +26 -0
  8. package/dist/factories/with-syntax-layer.mjs +306 -0
  9. package/dist/index.cjs +2 -0
  10. package/dist/index.d.ts +1 -0
  11. package/dist/index.mjs +1 -0
  12. package/dist/layer.cjs +12 -79
  13. package/dist/layer.d.ts +3 -2
  14. package/dist/layer.mjs +12 -79
  15. package/dist/non-layer.cjs +3 -4
  16. package/dist/non-layer.d.ts +1 -1
  17. package/dist/non-layer.mjs +3 -4
  18. package/dist/syntax-layer.cjs +2 -288
  19. package/dist/syntax-layer.d.ts +17 -16
  20. package/dist/syntax-layer.mjs +2 -288
  21. package/dist/syntax-rule.cjs +9 -8
  22. package/dist/syntax-rule.mjs +9 -8
  23. package/dist/utils/extend-config.cjs +32 -46
  24. package/dist/utils/extend-config.mjs +32 -46
  25. package/dist/utils/flatten-object.d.ts +1 -1
  26. package/package.json +1 -1
package/dist/factories/with-syntax-layer.cjs ADDED
@@ -0,0 +1,308 @@
1
+ 'use strict';
2
+
3
+ var rule = require('../rule.cjs');
4
+
5
+ function withSyntaxLayer(Base) {
6
+ return class SyntaxLayer extends Base {
7
+ rules = [];
8
+ /**
9
+ * normal
10
+ * normal selectors
11
+ * media normal
12
+ * media selectors
13
+ * media width
14
+ * media width selectors
15
+ */ insert(syntaxRule) {
16
+ if (this.rules.includes(syntaxRule)) return;
17
+ let index;
18
+ /**
19
+ * 必須按斷點值遞增，並透過索引插入，
20
+ * 以實現響應式先後套用的規則
21
+ * @example <1 <2 <3 ALL >=1 >=2 >=3
22
+ * @description
23
+ */ const endIndex = this.rules.length - 1;
24
+ const { at, atToken, order, priority } = syntaxRule;
25
+ const findIndex = (startIndex, stopCheck, matchCheck)=>{
26
+ let i = startIndex;
27
+ for(; i <= endIndex; i++){
28
+ const eachSyntaxRule = this.rules[i];
29
+ if (stopCheck?.(eachSyntaxRule)) return matchCheck ? -1 : i - 1;
30
+ if (matchCheck?.(eachSyntaxRule)) return i;
31
+ }
32
+ return matchCheck ? -1 : i - 1;
33
+ };
34
+ let matchStartIndex;
35
+ let matchEndIndex;
36
+ if (atToken) {
37
+ const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media);
38
+ if (mediaStartIndex === -1) {
39
+ index = endIndex + 1;
40
+ } else {
41
+ const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
42
+ const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
43
+ if (maxWidthFeature || minWidthFeature) {
44
+ const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
45
+ if (mediaWidthStartIndex === -1) {
46
+ index = endIndex + 1;
47
+ } else {
48
+ if (maxWidthFeature && minWidthFeature) {
49
+ /**
50
+ * 範圍越小 ( 越限定 越侷限 ) 越優先，
51
+ * 按照範圍 max-width - min-width 遞減排序
52
+ * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
53
+ * 並插入在該 rule 之後，讓自己優先被套用
54
+ */ if (priority === -1) {
55
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width'));
56
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
57
+ } else {
58
+ matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
59
+ matchEndIndex = endIndex;
60
+ }
61
+ if (matchStartIndex !== -1) {
62
+ const range = maxWidthFeature.value - minWidthFeature.value;
63
+ let i = matchEndIndex;
64
+ const endI = matchStartIndex;
65
+ matchStartIndex = matchEndIndex + 1;
66
+ for(; i >= endI; i--){
67
+ const eachSyntaxRule = this.rules[i];
68
+ const eachMaxWidthFeature = eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width');
69
+ const eachMinWidthFeature = eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width');
70
+ if (!eachMaxWidthFeature || !eachMinWidthFeature) {
71
+ break;
72
+ } else {
73
+ const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
74
+ if (eachRange < range) {
75
+ matchEndIndex = i - 1;
76
+ } else if (eachRange === range) {
77
+ matchStartIndex = i;
78
+ } else {
79
+ break;
80
+ }
81
+ }
82
+ }
83
+ }
84
+ } else if (minWidthFeature) {
85
+ /**
86
+ * find 第一個所遇到同樣 feature 且值比自己大的 rule，
87
+ * 並插入在該 rule 之後，讓自己優先被套用
88
+ */ if (priority === -1) {
89
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width'));
90
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
91
+ } else {
92
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
93
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
94
+ }
95
+ if (matchStartIndex !== -1) {
96
+ for(let i = matchEndIndex; i >= matchStartIndex; i--){
97
+ const feature = this.rules[i].at.media?.find(({ name })=>name === 'min-width');
98
+ if (!feature) continue;
99
+ if (feature.value > minWidthFeature.value) {
100
+ matchEndIndex = i - 1;
101
+ } else if (feature.value < minWidthFeature.value) {
102
+ matchStartIndex = i + 1;
103
+ break;
104
+ }
105
+ }
106
+ }
107
+ } else {
108
+ /**
109
+ * find 第一個所遇到同樣 feature 且值比自己大的 rule，
110
+ * 並插入在該 rule 之後，讓自己優先被套用
111
+ */ if (priority === -1) {
112
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width'));
113
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
114
+ } else {
115
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.priority !== -1);
116
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
117
+ }
118
+ if (matchStartIndex !== -1) {
119
+ for(let i = matchEndIndex; i >= matchStartIndex; i--){
120
+ const feature = this.rules[i].at.media?.find(({ name })=>name === 'max-width');
121
+ if (!feature) continue;
122
+ if (feature.value < maxWidthFeature.value) {
123
+ matchEndIndex = i - 1;
124
+ } else if (feature.value > maxWidthFeature.value) {
125
+ matchStartIndex = i + 1;
126
+ break;
127
+ }
128
+ }
129
+ }
130
+ }
131
+ }
132
+ } else {
133
+ if (priority === -1) {
134
+ matchStartIndex = mediaStartIndex;
135
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
136
+ } else {
137
+ matchStartIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
138
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
139
+ }
140
+ }
141
+ }
142
+ } else {
143
+ if (priority === -1) {
144
+ matchStartIndex = 0;
145
+ matchEndIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken || eachSyntax.priority !== -1);
146
+ } else {
147
+ matchStartIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken, (eachSyntax)=>eachSyntax.priority !== -1);
148
+ matchEndIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken);
149
+ }
150
+ }
151
+ if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
152
+ if (matchStartIndex === -1) {
153
+ index = matchEndIndex + 1;
154
+ } else {
155
+ if (priority === -1) {
156
+ for(let i = matchStartIndex; i <= matchEndIndex; i++){
157
+ const currentSyntaxRule = this.rules[i];
158
+ if (currentSyntaxRule.order >= order) {
159
+ index = i;
160
+ break;
161
+ }
162
+ }
163
+ } else {
164
+ for(let i = matchStartIndex; i <= matchEndIndex; i++){
165
+ const currentSyntaxRule = this.rules[i];
166
+ if (currentSyntaxRule.priority < priority) {
167
+ index = i;
168
+ break;
169
+ } else if (currentSyntaxRule.priority === priority) {
170
+ if (currentSyntaxRule.order >= order) {
171
+ index = i;
172
+ break;
173
+ }
174
+ } else {
175
+ index = i + 1;
176
+ }
177
+ }
178
+ }
179
+ if (index === undefined) {
180
+ index = matchEndIndex + 1;
181
+ }
182
+ }
183
+ }
184
+ super.insert(syntaxRule, index);
185
+ this.insertVariables(syntaxRule);
186
+ this.insertAnimations(syntaxRule);
187
+ syntaxRule.definition.insert?.call(syntaxRule);
188
+ return index;
189
+ }
190
+ delete(key) {
191
+ const syntaxRule = super.delete(key);
192
+ if (!syntaxRule) return;
193
+ const deleteLayerToken = (layerToken, layer)=>{
194
+ const count = layer.tokenCounts.get(layerToken) ?? 0;
195
+ if (count <= 1) {
196
+ layer.delete(layerToken);
197
+ layer.tokenCounts.delete(layerToken);
198
+ } else {
199
+ layer.tokenCounts.set(layerToken, count - 1);
200
+ }
201
+ };
202
+ if (syntaxRule.variableNames) {
203
+ for (const eachVariableName of syntaxRule.variableNames){
204
+ deleteLayerToken(eachVariableName, this.css.themeLayer);
205
+ }
206
+ }
207
+ if (syntaxRule.animationNames) {
208
+ for (const eachKeyframeName of syntaxRule.animationNames){
209
+ deleteLayerToken(eachKeyframeName, this.css.animationsNonLayer);
210
+ }
211
+ }
212
+ syntaxRule.definition.delete?.call(syntaxRule, syntaxRule.name);
213
+ return syntaxRule;
214
+ }
215
+ insertVariables(syntaxRule) {
216
+ if (syntaxRule.variableNames) {
217
+ for (const eachVariableName of syntaxRule.variableNames){
218
+ const variable = this.css.variables.get(eachVariableName);
219
+ if (this.css.themeLayer.rules.find(({ name })=>name === eachVariableName)) {
220
+ const count = this.css.themeLayer.tokenCounts.get(eachVariableName) || 0;
221
+ this.css.themeLayer.tokenCounts.set(eachVariableName, count + 1);
222
+ } else {
223
+ const newRule = new rule.Rule(eachVariableName);
224
+ const addNative = (mode, _variable)=>{
225
+ let isDefaultMode = false;
226
+ let preifxCssRuleText;
227
+ let selectorText;
228
+ let endCurlyBracketCount = 1;
229
+ if (mode) {
230
+ switch(this.css.config.modes?.[mode]){
231
+ case 'media':
232
+ selectorText = ':root';
233
+ preifxCssRuleText = `@media(prefers-color-scheme:${mode}){${selectorText}`;
234
+ endCurlyBracketCount++;
235
+ break;
236
+ case 'host':
237
+ preifxCssRuleText = selectorText = `:host(.${mode})`;
238
+ if (!variable?.value && this.css.config.defaultMode === mode) {
239
+ preifxCssRuleText += ',:host';
240
+ isDefaultMode = true;
241
+ }
242
+ break;
243
+ case 'class':
244
+ preifxCssRuleText = selectorText = `.${mode}`;
245
+ if (!variable?.value && this.css.config.defaultMode === mode) {
246
+ preifxCssRuleText += ',:root';
247
+ isDefaultMode = true;
248
+ }
249
+ break;
250
+ default:
251
+ return;
252
+ }
253
+ } else {
254
+ preifxCssRuleText = selectorText = ':root';
255
+ }
256
+ const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
257
+ if (isDefaultMode) {
258
+ newRule.nodes.unshift({
259
+ selectorText,
260
+ text: cssRuleText
261
+ });
262
+ } else {
263
+ newRule.nodes.push({
264
+ text: cssRuleText
265
+ });
266
+ }
267
+ };
268
+ if (variable?.value !== undefined) {
269
+ addNative('', variable);
270
+ }
271
+ if (variable?.modes) {
272
+ for(const mode in variable.modes){
273
+ addNative(mode, variable.modes[mode]);
274
+ }
275
+ }
276
+ this.css.themeLayer.insert(newRule);
277
+ this.css.themeLayer.tokenCounts.set(eachVariableName, 1);
278
+ }
279
+ }
280
+ }
281
+ }
282
+ insertAnimations(syntaxRule) {
283
+ if (syntaxRule.animationNames) {
284
+ for (const eachAnimationName of syntaxRule.animationNames){
285
+ if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName)) {
286
+ const count = this.css.animationsNonLayer.tokenCounts.get(eachAnimationName) || 0;
287
+ this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, count + 1);
288
+ } else {
289
+ const keyframes = this.css.animations.get(eachAnimationName);
290
+ if (!keyframes) continue;
291
+ const keyframeText = Object.entries(keyframes).reduce((acc, [key, variables])=>{
292
+ const variableText = Object.entries(variables).map(([name, value])=>`${name}:${value}`).join(';');
293
+ return acc + `${key}{${variableText}}`;
294
+ }, '');
295
+ this.css.animationsNonLayer.insert(new rule.Rule(eachAnimationName, [
296
+ {
297
+ text: `@keyframes ${eachAnimationName}{${keyframeText}}`
298
+ }
299
+ ]));
300
+ this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, 1);
301
+ }
302
+ }
303
+ }
304
+ }
305
+ };
306
+ }
307
+
308
+ module.exports = withSyntaxLayer;
package/dist/factories/with-syntax-layer.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import Layer from '../layer';
2
+ import { SyntaxRule } from '../syntax-rule';
3
+ export default function withSyntaxLayer<TBase extends new (...args: any[]) => Layer>(Base: TBase): {
4
+ new (...args: any[]): {
5
+ rules: SyntaxRule[];
6
+ /**
7
+ * normal
8
+ * normal selectors
9
+ * media normal
10
+ * media selectors
11
+ * media width
12
+ * media width selectors
13
+ */
14
+ insert(syntaxRule: SyntaxRule): number | undefined;
15
+ delete(key: string): SyntaxRule | undefined;
16
+ insertVariables(syntaxRule: SyntaxRule): void;
17
+ insertAnimations(syntaxRule: SyntaxRule): void;
18
+ readonly tokenCounts: Map<string, number>;
19
+ name: string;
20
+ css: import("..").MasterCSS;
21
+ attach(): void;
22
+ detach(): void;
23
+ reset(): void;
24
+ readonly text: string;
25
+ };
26
+ } & TBase;
package/dist/factories/with-syntax-layer.mjs ADDED
@@ -0,0 +1,306 @@
1
+ import { Rule } from '../rule.mjs';
2
+
3
+ function withSyntaxLayer(Base) {
4
+ return class SyntaxLayer extends Base {
5
+ rules = [];
6
+ /**
7
+ * normal
8
+ * normal selectors
9
+ * media normal
10
+ * media selectors
11
+ * media width
12
+ * media width selectors
13
+ */ insert(syntaxRule) {
14
+ if (this.rules.includes(syntaxRule)) return;
15
+ let index;
16
+ /**
17
+ * 必須按斷點值遞增，並透過索引插入，
18
+ * 以實現響應式先後套用的規則
19
+ * @example <1 <2 <3 ALL >=1 >=2 >=3
20
+ * @description
21
+ */ const endIndex = this.rules.length - 1;
22
+ const { at, atToken, order, priority } = syntaxRule;
23
+ const findIndex = (startIndex, stopCheck, matchCheck)=>{
24
+ let i = startIndex;
25
+ for(; i <= endIndex; i++){
26
+ const eachSyntaxRule = this.rules[i];
27
+ if (stopCheck?.(eachSyntaxRule)) return matchCheck ? -1 : i - 1;
28
+ if (matchCheck?.(eachSyntaxRule)) return i;
29
+ }
30
+ return matchCheck ? -1 : i - 1;
31
+ };
32
+ let matchStartIndex;
33
+ let matchEndIndex;
34
+ if (atToken) {
35
+ const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media);
36
+ if (mediaStartIndex === -1) {
37
+ index = endIndex + 1;
38
+ } else {
39
+ const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
40
+ const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
41
+ if (maxWidthFeature || minWidthFeature) {
42
+ const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
43
+ if (mediaWidthStartIndex === -1) {
44
+ index = endIndex + 1;
45
+ } else {
46
+ if (maxWidthFeature && minWidthFeature) {
47
+ /**
48
+ * 範圍越小 ( 越限定 越侷限 ) 越優先，
49
+ * 按照範圍 max-width - min-width 遞減排序
50
+ * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
51
+ * 並插入在該 rule 之後，讓自己優先被套用
52
+ */ if (priority === -1) {
53
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width'));
54
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
55
+ } else {
56
+ matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
57
+ matchEndIndex = endIndex;
58
+ }
59
+ if (matchStartIndex !== -1) {
60
+ const range = maxWidthFeature.value - minWidthFeature.value;
61
+ let i = matchEndIndex;
62
+ const endI = matchStartIndex;
63
+ matchStartIndex = matchEndIndex + 1;
64
+ for(; i >= endI; i--){
65
+ const eachSyntaxRule = this.rules[i];
66
+ const eachMaxWidthFeature = eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width');
67
+ const eachMinWidthFeature = eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width');
68
+ if (!eachMaxWidthFeature || !eachMinWidthFeature) {
69
+ break;
70
+ } else {
71
+ const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
72
+ if (eachRange < range) {
73
+ matchEndIndex = i - 1;
74
+ } else if (eachRange === range) {
75
+ matchStartIndex = i;
76
+ } else {
77
+ break;
78
+ }
79
+ }
80
+ }
81
+ }
82
+ } else if (minWidthFeature) {
83
+ /**
84
+ * find 第一個所遇到同樣 feature 且值比自己大的 rule，
85
+ * 並插入在該 rule 之後，讓自己優先被套用
86
+ */ if (priority === -1) {
87
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width'));
88
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
89
+ } else {
90
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
91
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
92
+ }
93
+ if (matchStartIndex !== -1) {
94
+ for(let i = matchEndIndex; i >= matchStartIndex; i--){
95
+ const feature = this.rules[i].at.media?.find(({ name })=>name === 'min-width');
96
+ if (!feature) continue;
97
+ if (feature.value > minWidthFeature.value) {
98
+ matchEndIndex = i - 1;
99
+ } else if (feature.value < minWidthFeature.value) {
100
+ matchStartIndex = i + 1;
101
+ break;
102
+ }
103
+ }
104
+ }
105
+ } else {
106
+ /**
107
+ * find 第一個所遇到同樣 feature 且值比自己大的 rule，
108
+ * 並插入在該 rule 之後，讓自己優先被套用
109
+ */ if (priority === -1) {
110
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width'));
111
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
112
+ } else {
113
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.priority !== -1);
114
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
115
+ }
116
+ if (matchStartIndex !== -1) {
117
+ for(let i = matchEndIndex; i >= matchStartIndex; i--){
118
+ const feature = this.rules[i].at.media?.find(({ name })=>name === 'max-width');
119
+ if (!feature) continue;
120
+ if (feature.value < maxWidthFeature.value) {
121
+ matchEndIndex = i - 1;
122
+ } else if (feature.value > maxWidthFeature.value) {
123
+ matchStartIndex = i + 1;
124
+ break;
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
130
+ } else {
131
+ if (priority === -1) {
132
+ matchStartIndex = mediaStartIndex;
133
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
134
+ } else {
135
+ matchStartIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
136
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
137
+ }
138
+ }
139
+ }
140
+ } else {
141
+ if (priority === -1) {
142
+ matchStartIndex = 0;
143
+ matchEndIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken || eachSyntax.priority !== -1);
144
+ } else {
145
+ matchStartIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken, (eachSyntax)=>eachSyntax.priority !== -1);
146
+ matchEndIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken);
147
+ }
148
+ }
149
+ if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
150
+ if (matchStartIndex === -1) {
151
+ index = matchEndIndex + 1;
152
+ } else {
153
+ if (priority === -1) {
154
+ for(let i = matchStartIndex; i <= matchEndIndex; i++){
155
+ const currentSyntaxRule = this.rules[i];
156
+ if (currentSyntaxRule.order >= order) {
157
+ index = i;
158
+ break;
159
+ }
160
+ }
161
+ } else {
162
+ for(let i = matchStartIndex; i <= matchEndIndex; i++){
163
+ const currentSyntaxRule = this.rules[i];
164
+ if (currentSyntaxRule.priority < priority) {
165
+ index = i;
166
+ break;
167
+ } else if (currentSyntaxRule.priority === priority) {
168
+ if (currentSyntaxRule.order >= order) {
169
+ index = i;
170
+ break;
171
+ }
172
+ } else {
173
+ index = i + 1;
174
+ }
175
+ }
176
+ }
177
+ if (index === undefined) {
178
+ index = matchEndIndex + 1;
179
+ }
180
+ }
181
+ }
182
+ super.insert(syntaxRule, index);
183
+ this.insertVariables(syntaxRule);
184
+ this.insertAnimations(syntaxRule);
185
+ syntaxRule.definition.insert?.call(syntaxRule);
186
+ return index;
187
+ }
188
+ delete(key) {
189
+ const syntaxRule = super.delete(key);
190
+ if (!syntaxRule) return;
191
+ const deleteLayerToken = (layerToken, layer)=>{
192
+ const count = layer.tokenCounts.get(layerToken) ?? 0;
193
+ if (count <= 1) {
194
+ layer.delete(layerToken);
195
+ layer.tokenCounts.delete(layerToken);
196
+ } else {
197
+ layer.tokenCounts.set(layerToken, count - 1);
198
+ }
199
+ };
200
+ if (syntaxRule.variableNames) {
201
+ for (const eachVariableName of syntaxRule.variableNames){
202
+ deleteLayerToken(eachVariableName, this.css.themeLayer);
203
+ }
204
+ }
205
+ if (syntaxRule.animationNames) {
206
+ for (const eachKeyframeName of syntaxRule.animationNames){
207
+ deleteLayerToken(eachKeyframeName, this.css.animationsNonLayer);
208
+ }
209
+ }
210
+ syntaxRule.definition.delete?.call(syntaxRule, syntaxRule.name);
211
+ return syntaxRule;
212
+ }
213
+ insertVariables(syntaxRule) {
214
+ if (syntaxRule.variableNames) {
215
+ for (const eachVariableName of syntaxRule.variableNames){
216
+ const variable = this.css.variables.get(eachVariableName);
217
+ if (this.css.themeLayer.rules.find(({ name })=>name === eachVariableName)) {
218
+ const count = this.css.themeLayer.tokenCounts.get(eachVariableName) || 0;
219
+ this.css.themeLayer.tokenCounts.set(eachVariableName, count + 1);
220
+ } else {
221
+ const newRule = new Rule(eachVariableName);
222
+ const addNative = (mode, _variable)=>{
223
+ let isDefaultMode = false;
224
+ let preifxCssRuleText;
225
+ let selectorText;
226
+ let endCurlyBracketCount = 1;
227
+ if (mode) {
228
+ switch(this.css.config.modes?.[mode]){
229
+ case 'media':
230
+ selectorText = ':root';
231
+ preifxCssRuleText = `@media(prefers-color-scheme:${mode}){${selectorText}`;
232
+ endCurlyBracketCount++;
233
+ break;
234
+ case 'host':
235
+ preifxCssRuleText = selectorText = `:host(.${mode})`;
236
+ if (!variable?.value && this.css.config.defaultMode === mode) {
237
+ preifxCssRuleText += ',:host';
238
+ isDefaultMode = true;
239
+ }
240
+ break;
241
+ case 'class':
242
+ preifxCssRuleText = selectorText = `.${mode}`;
243
+ if (!variable?.value && this.css.config.defaultMode === mode) {
244
+ preifxCssRuleText += ',:root';
245
+ isDefaultMode = true;
246
+ }
247
+ break;
248
+ default:
249
+ return;
250
+ }
251
+ } else {
252
+ preifxCssRuleText = selectorText = ':root';
253
+ }
254
+ const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
255
+ if (isDefaultMode) {
256
+ newRule.nodes.unshift({
257
+ selectorText,
258
+ text: cssRuleText
259
+ });
260
+ } else {
261
+ newRule.nodes.push({
262
+ text: cssRuleText
263
+ });
264
+ }
265
+ };
266
+ if (variable?.value !== undefined) {
267
+ addNative('', variable);
268
+ }
269
+ if (variable?.modes) {
270
+ for(const mode in variable.modes){
271
+ addNative(mode, variable.modes[mode]);
272
+ }
273
+ }
274
+ this.css.themeLayer.insert(newRule);
275
+ this.css.themeLayer.tokenCounts.set(eachVariableName, 1);
276
+ }
277
+ }
278
+ }
279
+ }
280
+ insertAnimations(syntaxRule) {
281
+ if (syntaxRule.animationNames) {
282
+ for (const eachAnimationName of syntaxRule.animationNames){
283
+ if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName)) {
284
+ const count = this.css.animationsNonLayer.tokenCounts.get(eachAnimationName) || 0;
285
+ this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, count + 1);
286
+ } else {
287
+ const keyframes = this.css.animations.get(eachAnimationName);
288
+ if (!keyframes) continue;
289
+ const keyframeText = Object.entries(keyframes).reduce((acc, [key, variables])=>{
290
+ const variableText = Object.entries(variables).map(([name, value])=>`${name}:${value}`).join(';');
291
+ return acc + `${key}{${variableText}}`;
292
+ }, '');
293
+ this.css.animationsNonLayer.insert(new Rule(eachAnimationName, [
294
+ {
295
+ text: `@keyframes ${eachAnimationName}{${keyframeText}}`
296
+ }
297
+ ]));
298
+ this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, 1);
299
+ }
300
+ }
301
+ }
302
+ }
303
+ };
304
+ }
305
+
306
+ export { withSyntaxLayer as default };
package/dist/index.cjs CHANGED
@@ -11,6 +11,7 @@ var layer = require('./layer.cjs');
11
11
  var syntaxLayer = require('./syntax-layer.cjs');
12
12
  var nonLayer = require('./non-layer.cjs');
13
13
  var syntaxRuleType = require('./syntax-rule-type.cjs');
14
+ var withSyntaxLayer = require('./factories/with-syntax-layer.cjs');
14
15
  var extendConfig = require('./utils/extend-config.cjs');
15
16
  var reorderForReadableClasses = require('./utils/reorder-for-readable-classes.cjs');
16
17
  var areRuleModesEqual = require('./utils/are-rule-modes-equal.cjs');
@@ -61,6 +62,7 @@ exports.Layer = layer;
61
62
  exports.SyntaxLayer = syntaxLayer;
62
63
  exports.NonLayer = nonLayer;
63
64
  exports.SyntaxRuleType = syntaxRuleType;
65
+ exports.withSyntaxLayer = withSyntaxLayer;
64
66
  exports.extendConfig = extendConfig;
65
67
  exports.reorderForReadableClasses = reorderForReadableClasses;
66
68
  exports.areRuleModesEqual = areRuleModesEqual;