@master/css 2.0.0-rc.60 → 2.0.0-rc.61

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 (18) hide show
  1. package/dist/config/rules.cjs +3 -33
  2. package/dist/config/rules.mjs +3 -33
  3. package/dist/core.d.ts +1 -2
  4. package/dist/factories/with-syntax-layer.cjs +22 -22
  5. package/dist/factories/with-syntax-layer.mjs +22 -22
  6. package/dist/rule-node.cjs +18 -0
  7. package/dist/rule-node.d.ts +14 -0
  8. package/dist/rule-node.mjs +16 -0
  9. package/dist/syntax-rule.cjs +69 -47
  10. package/dist/syntax-rule.d.ts +5 -1
  11. package/dist/syntax-rule.mjs +69 -47
  12. package/dist/types/syntax.d.ts +1 -1
  13. package/dist/utils/are-rule-at-equal.cjs +7 -17
  14. package/dist/utils/are-rule-at-equal.d.ts +1 -1
  15. package/dist/utils/are-rule-at-equal.mjs +7 -17
  16. package/dist/utils/reorder-for-readable-classes.cjs +1 -1
  17. package/dist/utils/reorder-for-readable-classes.mjs +1 -1
  18. package/package.json +1 -1
package/dist/config/rules.cjs CHANGED
@@ -846,43 +846,13 @@ const rules = {
846
846
  type: syntaxRuleType.Native
847
847
  },
848
848
  'overflow-x': {
849
- type: syntaxRuleType.Native,
850
- declare (value) {
851
- return value === 'overlay' ? {
852
- 'overflow-x': [
853
- 'auto',
854
- value
855
- ]
856
- } : {
857
- 'overflow-x': value
858
- };
859
- }
849
+ type: syntaxRuleType.Native
860
850
  },
861
851
  'overflow-y': {
862
- type: syntaxRuleType.Native,
863
- declare (value) {
864
- return value === 'overlay' ? {
865
- 'overflow-y': [
866
- 'auto',
867
- value
868
- ]
869
- } : {
870
- 'overflow-y': value
871
- };
872
- }
852
+ type: syntaxRuleType.Native
873
853
  },
874
854
  overflow: {
875
- type: syntaxRuleType.NativeShorthand,
876
- declare (value) {
877
- return value === 'overlay' ? {
878
- overflow: [
879
- 'auto',
880
- value
881
- ]
882
- } : {
883
- overflow: value
884
- };
885
- }
855
+ type: syntaxRuleType.NativeShorthand
886
856
  },
887
857
  'overscroll-behavior-x': {
888
858
  type: syntaxRuleType.Native
package/dist/config/rules.mjs CHANGED
@@ -844,43 +844,13 @@ const rules = {
844
844
  type: SyntaxRuleType.Native
845
845
  },
846
846
  'overflow-x': {
847
- type: SyntaxRuleType.Native,
848
- declare (value) {
849
- return value === 'overlay' ? {
850
- 'overflow-x': [
851
- 'auto',
852
- value
853
- ]
854
- } : {
855
- 'overflow-x': value
856
- };
857
- }
847
+ type: SyntaxRuleType.Native
858
848
  },
859
849
  'overflow-y': {
860
- type: SyntaxRuleType.Native,
861
- declare (value) {
862
- return value === 'overlay' ? {
863
- 'overflow-y': [
864
- 'auto',
865
- value
866
- ]
867
- } : {
868
- 'overflow-y': value
869
- };
870
- }
850
+ type: SyntaxRuleType.Native
871
851
  },
872
852
  overflow: {
873
- type: SyntaxRuleType.NativeShorthand,
874
- declare (value) {
875
- return value === 'overlay' ? {
876
- overflow: [
877
- 'auto',
878
- value
879
- ]
880
- } : {
881
- overflow: value
882
- };
883
- }
853
+ type: SyntaxRuleType.NativeShorthand
884
854
  },
885
855
  'overscroll-behavior-x': {
886
856
  type: SyntaxRuleType.Native
package/dist/core.d.ts CHANGED
@@ -4,7 +4,6 @@ import Layer from './layer';
4
4
  import NonLayer from './non-layer';
5
5
  import { DefinedRule, Variable } from './types/syntax';
6
6
  import { AnimationDefinitions, Config } from './types/config';
7
- import { Vendors } from './types/common';
8
7
  export default class MasterCSS {
9
8
  customConfig?: Config | undefined;
10
9
  static config: Config;
@@ -113,6 +112,6 @@ export default class MasterCSS {
113
112
  getModeSelector(modeName: string): string | undefined;
114
113
  }
115
114
  export default interface MasterCSS {
116
- supportVendors: Set<Vendors>;
117
115
  style: HTMLStyleElement | null;
116
+ Native: typeof CSS;
118
117
  }
package/dist/factories/with-syntax-layer.cjs CHANGED
@@ -21,7 +21,7 @@ function withSyntaxLayer(Base) {
21
21
  * @example <1 <2 <3 ALL >=1 >=2 >=3
22
22
  * @description
23
23
  */ const endIndex = this.rules.length - 1;
24
- const { at, atToken, order, priority } = syntaxRule;
24
+ const { mediaAtComponents, atToken, order, priority } = syntaxRule;
25
25
  const findIndex = (startIndex, stopCheck, matchCheck)=>{
26
26
  let i = startIndex;
27
27
  for(; i <= endIndex; i++){
@@ -34,14 +34,14 @@ function withSyntaxLayer(Base) {
34
34
  let matchStartIndex;
35
35
  let matchEndIndex;
36
36
  if (atToken) {
37
- const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media);
37
+ const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents);
38
38
  if (mediaStartIndex === -1) {
39
39
  index = endIndex + 1;
40
40
  } else {
41
- const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
42
- const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
41
+ const maxWidthFeature = mediaAtComponents?.find(({ name })=>name === 'max-width');
42
+ const minWidthFeature = mediaAtComponents?.find(({ name })=>name === 'min-width');
43
43
  if (maxWidthFeature || minWidthFeature) {
44
- const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
44
+ const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width'));
45
45
  if (mediaWidthStartIndex === -1) {
46
46
  index = endIndex + 1;
47
47
  } else {
@@ -52,10 +52,10 @@ function withSyntaxLayer(Base) {
52
52
  * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
53
53
  * 並插入在該 rule 之後，讓自己優先被套用
54
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'));
55
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width'));
56
56
  matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
57
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);
58
+ matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
59
59
  matchEndIndex = endIndex;
60
60
  }
61
61
  if (matchStartIndex !== -1) {
@@ -65,8 +65,8 @@ function withSyntaxLayer(Base) {
65
65
  matchStartIndex = matchEndIndex + 1;
66
66
  for(; i >= endI; i--){
67
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');
68
+ const eachMaxWidthFeature = eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width');
69
+ const eachMinWidthFeature = eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width');
70
70
  if (!eachMaxWidthFeature || !eachMinWidthFeature) {
71
71
  break;
72
72
  } else {
@@ -86,15 +86,15 @@ function withSyntaxLayer(Base) {
86
86
  * find 第一個所遇到同樣 feature 且值比自己大的 rule，
87
87
  * 並插入在該 rule 之後，讓自己優先被套用
88
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);
89
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width'));
90
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
91
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);
92
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
93
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
94
94
  }
95
95
  if (matchStartIndex !== -1) {
96
96
  for(let i = matchEndIndex; i >= matchStartIndex; i--){
97
- const feature = this.rules[i].at.media?.find(({ name })=>name === 'min-width');
97
+ const feature = this.rules[i].mediaAtComponents?.find(({ name })=>name === 'min-width');
98
98
  if (!feature) continue;
99
99
  if (feature.value > minWidthFeature.value) {
100
100
  matchEndIndex = i - 1;
@@ -109,15 +109,15 @@ function withSyntaxLayer(Base) {
109
109
  * find 第一個所遇到同樣 feature 且值比自己大的 rule，
110
110
  * 並插入在該 rule 之後，讓自己優先被套用
111
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);
112
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width'));
113
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
114
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);
115
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.priority !== -1);
116
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
117
117
  }
118
118
  if (matchStartIndex !== -1) {
119
119
  for(let i = matchEndIndex; i >= matchStartIndex; i--){
120
- const feature = this.rules[i].at.media?.find(({ name })=>name === 'max-width');
120
+ const feature = this.rules[i].mediaAtComponents?.find(({ name })=>name === 'max-width');
121
121
  if (!feature) continue;
122
122
  if (feature.value < maxWidthFeature.value) {
123
123
  matchEndIndex = i - 1;
@@ -132,10 +132,10 @@ function withSyntaxLayer(Base) {
132
132
  } else {
133
133
  if (priority === -1) {
134
134
  matchStartIndex = mediaStartIndex;
135
- matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
135
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
136
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'));
137
+ matchStartIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
138
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width'));
139
139
  }
140
140
  }
141
141
  }
package/dist/factories/with-syntax-layer.mjs CHANGED
@@ -19,7 +19,7 @@ function withSyntaxLayer(Base) {
19
19
  * @example <1 <2 <3 ALL >=1 >=2 >=3
20
20
  * @description
21
21
  */ const endIndex = this.rules.length - 1;
22
- const { at, atToken, order, priority } = syntaxRule;
22
+ const { mediaAtComponents, atToken, order, priority } = syntaxRule;
23
23
  const findIndex = (startIndex, stopCheck, matchCheck)=>{
24
24
  let i = startIndex;
25
25
  for(; i <= endIndex; i++){
@@ -32,14 +32,14 @@ function withSyntaxLayer(Base) {
32
32
  let matchStartIndex;
33
33
  let matchEndIndex;
34
34
  if (atToken) {
35
- const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media);
35
+ const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents);
36
36
  if (mediaStartIndex === -1) {
37
37
  index = endIndex + 1;
38
38
  } else {
39
- const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
40
- const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
39
+ const maxWidthFeature = mediaAtComponents?.find(({ name })=>name === 'max-width');
40
+ const minWidthFeature = mediaAtComponents?.find(({ name })=>name === 'min-width');
41
41
  if (maxWidthFeature || minWidthFeature) {
42
- const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
42
+ const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width'));
43
43
  if (mediaWidthStartIndex === -1) {
44
44
  index = endIndex + 1;
45
45
  } else {
@@ -50,10 +50,10 @@ function withSyntaxLayer(Base) {
50
50
  * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
51
51
  * 並插入在該 rule 之後，讓自己優先被套用
52
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'));
53
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width'));
54
54
  matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
55
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);
56
+ matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
57
57
  matchEndIndex = endIndex;
58
58
  }
59
59
  if (matchStartIndex !== -1) {
@@ -63,8 +63,8 @@ function withSyntaxLayer(Base) {
63
63
  matchStartIndex = matchEndIndex + 1;
64
64
  for(; i >= endI; i--){
65
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');
66
+ const eachMaxWidthFeature = eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width');
67
+ const eachMinWidthFeature = eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width');
68
68
  if (!eachMaxWidthFeature || !eachMinWidthFeature) {
69
69
  break;
70
70
  } else {
@@ -84,15 +84,15 @@ function withSyntaxLayer(Base) {
84
84
  * find 第一個所遇到同樣 feature 且值比自己大的 rule，
85
85
  * 並插入在該 rule 之後，讓自己優先被套用
86
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);
87
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width'));
88
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
89
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);
90
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
91
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
92
92
  }
93
93
  if (matchStartIndex !== -1) {
94
94
  for(let i = matchEndIndex; i >= matchStartIndex; i--){
95
- const feature = this.rules[i].at.media?.find(({ name })=>name === 'min-width');
95
+ const feature = this.rules[i].mediaAtComponents?.find(({ name })=>name === 'min-width');
96
96
  if (!feature) continue;
97
97
  if (feature.value > minWidthFeature.value) {
98
98
  matchEndIndex = i - 1;
@@ -107,15 +107,15 @@ function withSyntaxLayer(Base) {
107
107
  * find 第一個所遇到同樣 feature 且值比自己大的 rule，
108
108
  * 並插入在該 rule 之後，讓自己優先被套用
109
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);
110
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width'));
111
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
112
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);
113
+ matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width') && eachSyntaxRule.priority !== -1);
114
+ matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
115
115
  }
116
116
  if (matchStartIndex !== -1) {
117
117
  for(let i = matchEndIndex; i >= matchStartIndex; i--){
118
- const feature = this.rules[i].at.media?.find(({ name })=>name === 'max-width');
118
+ const feature = this.rules[i].mediaAtComponents?.find(({ name })=>name === 'max-width');
119
119
  if (!feature) continue;
120
120
  if (feature.value < maxWidthFeature.value) {
121
121
  matchEndIndex = i - 1;
@@ -130,10 +130,10 @@ function withSyntaxLayer(Base) {
130
130
  } else {
131
131
  if (priority === -1) {
132
132
  matchStartIndex = mediaStartIndex;
133
- matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
133
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
134
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'));
135
+ matchStartIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
136
+ matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.mediaAtComponents?.find(({ name })=>name === 'max-width' || name === 'min-width'));
137
137
  }
138
138
  }
139
139
  }
package/dist/rule-node.cjs ADDED
@@ -0,0 +1,18 @@
1
+ 'use strict';
2
+
3
+ class Rule {
4
+ name;
5
+ nodes;
6
+ constructor(name, nodes = []){
7
+ this.name = name;
8
+ this.nodes = nodes;
9
+ }
10
+ get key() {
11
+ return this.name;
12
+ }
13
+ get text() {
14
+ return this.nodes.map(({ text })=>text).join('');
15
+ }
16
+ }
17
+
18
+ exports.Rule = Rule;
package/dist/rule-node.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export declare class Rule {
2
+ readonly name: string;
3
+ nodes: RuleNode[];
4
+ constructor(name: string, nodes?: RuleNode[]);
5
+ get key(): string;
6
+ get text(): string;
7
+ }
8
+ export interface RuleNode {
9
+ text: string;
10
+ selectorText?: string;
11
+ native?: CSSRule;
12
+ suffixSelectors?: string[];
13
+ prefixSelectors?: string[];
14
+ }
package/dist/rule-node.mjs ADDED
@@ -0,0 +1,16 @@
1
+ class Rule {
2
+ name;
3
+ nodes;
4
+ constructor(name, nodes = []){
5
+ this.name = name;
6
+ this.nodes = nodes;
7
+ }
8
+ get key() {
9
+ return this.name;
10
+ }
11
+ get text() {
12
+ return this.nodes.map(({ text })=>text).join('');
13
+ }
14
+ }
15
+
16
+ export { Rule };
package/dist/syntax-rule.cjs CHANGED
@@ -10,16 +10,20 @@ class SyntaxRule extends rule.Rule {
10
10
  css;
11
11
  registeredSyntax;
12
12
  fixedClass;
13
- at;
13
+ layerAtComponents;
14
+ supportsAtComponents;
15
+ mediaAtComponents;
16
+ containerAtComponents;
14
17
  priority;
15
18
  order;
16
19
  type;
17
20
  declarations;
18
21
  layer;
22
+ supportUnknown;
19
23
  animationNames;
20
24
  variableNames;
21
25
  constructor(name, css, registeredSyntax, fixedClass, mode){
22
- super(name), this.name = name, this.css = css, this.registeredSyntax = registeredSyntax, this.fixedClass = fixedClass, this.at = {}, this.priority = -1, this.order = 0, this.type = 0, this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
26
+ super(name), this.name = name, this.css = css, this.registeredSyntax = registeredSyntax, this.fixedClass = fixedClass, this.priority = -1, this.order = 0, this.type = 0, this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
23
27
  const { functions } = this.css.config;
24
28
  let currentValue = '';
25
29
  for (const eachValueComponent of valueComponents){
@@ -344,11 +348,18 @@ class SyntaxRule extends rule.Rule {
344
348
  const atToken = stateTokens[i];
345
349
  this.atToken = (this.atToken || '') + '@' + atToken;
346
350
  if (atToken) {
347
- if (atToken === 'base' && !this.fixedClass) {
348
- this.layer = css.baseLayer;
349
- continue;
350
- } else if (atToken === 'preset' && !this.fixedClass) {
351
- this.layer = css.presetLayer;
351
+ if (atToken === 'base' || atToken === 'preset') {
352
+ const atComponent = {
353
+ type: 'arbitrary',
354
+ value: atToken
355
+ };
356
+ if (this.layerAtComponents) {
357
+ this.layerAtComponents.push(atComponent);
358
+ } else {
359
+ this.layerAtComponents = [
360
+ atComponent
361
+ ];
362
+ }
352
363
  continue;
353
364
  } else if (atToken === 'rtl' || atToken === 'ltr') {
354
365
  this.direction = atToken;
@@ -458,16 +469,45 @@ class SyntaxRule extends rule.Rule {
458
469
  }
459
470
  }
460
471
  if (queryType) {
461
- const eachAtComponents = this.at[queryType];
462
- if (eachAtComponents) {
463
- eachAtComponents.push(...atComponents);
472
+ const targetAtComponents = this[`${queryType}AtComponents`];
473
+ if (targetAtComponents) {
474
+ targetAtComponents.push(...atComponents);
464
475
  } else {
465
- this.at[queryType] = atComponents;
476
+ this[`${queryType}AtComponents`] = atComponents;
466
477
  }
467
478
  }
468
479
  }
469
480
  }
470
481
  }
482
+ if (this.mode && modes?.[this.mode] === 'media') {
483
+ const atFeatureComponent = {
484
+ type: 'feature',
485
+ name: 'prefers-color-scheme',
486
+ valueType: 'string',
487
+ value: this.mode
488
+ };
489
+ if (this.mediaAtComponents) {
490
+ this.mediaAtComponents.push(atFeatureComponent);
491
+ } else {
492
+ this.mediaAtComponents = [
493
+ atFeatureComponent
494
+ ];
495
+ }
496
+ }
497
+ if (this.fixedClass) {
498
+ this.layer = css.componentsLayer;
499
+ } else {
500
+ const onlyLayerComponent = this.layerAtComponents?.length === 1 && this.layerAtComponents[0];
501
+ if (onlyLayerComponent) {
502
+ if (onlyLayerComponent.value === 'base') {
503
+ this.layer = css.baseLayer;
504
+ this.layerAtComponents = undefined;
505
+ } else if (onlyLayerComponent.value === 'preset') {
506
+ this.layer = css.presetLayer;
507
+ this.layerAtComponents = undefined;
508
+ }
509
+ }
510
+ }
471
511
  // 7. value
472
512
  let newValue;
473
513
  if (this.valueComponents) {
@@ -488,28 +528,18 @@ class SyntaxRule extends rule.Rule {
488
528
  }
489
529
  const propertiesText = [];
490
530
  for(const propertyName in this.declarations){
491
- const push = (propertyText)=>{
492
- // animations
493
- if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
494
- const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
495
- if (animationNames.length) {
496
- if (!this.animationNames) {
497
- this.animationNames = [];
498
- }
499
- this.animationNames = animationNames;
531
+ const propertyValue = this.declarations[propertyName];
532
+ const propertyText = propertyName + ':' + String(propertyValue);
533
+ if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
534
+ const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
535
+ if (animationNames.length) {
536
+ if (!this.animationNames) {
537
+ this.animationNames = [];
500
538
  }
539
+ this.animationNames = animationNames;
501
540
  }
502
- propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
503
- };
504
- const keyToken = propertyName + ':';
505
- const declarations = this.declarations[propertyName];
506
- if (Array.isArray(declarations)) {
507
- for (const value of declarations){
508
- push(keyToken + String(value));
509
- }
510
- } else {
511
- push(keyToken + String(declarations));
512
541
  }
542
+ propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
513
543
  }
514
544
  // 創建 Natives
515
545
  if (propertiesText.length) {
@@ -517,11 +547,6 @@ class SyntaxRule extends rule.Rule {
517
547
  for (const eachSuffixSelectorVendor of suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor]){
518
548
  const prefixSelectors = this.vendorPrefixSelectors?.[prefixSelectorVendor];
519
549
  const suffixSelectors = this.vendorSuffixSelectors?.[eachSuffixSelectorVendor];
520
- if (this.css.supportVendors) {
521
- if (prefixSelectorVendor && !this.css.supportVendors?.has(prefixSelectorVendor) || eachSuffixSelectorVendor && !this.css.supportVendors?.has(eachSuffixSelectorVendor)) {
522
- continue;
523
- }
524
- }
525
550
  let prefixText = '';
526
551
  if (this.direction) {
527
552
  prefixText += '[dir=' + this.direction + '] ';
@@ -547,12 +572,14 @@ class SyntaxRule extends rule.Rule {
547
572
  }, []).join(',');
548
573
  const selectorText = getCssText(fixedClass ?? name);
549
574
  let cssText = selectorText + '{' + propertiesText.join(';') + '}';
550
- for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
551
- cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
552
- }
553
- if (this.mode && modes?.[this.mode] === 'media') {
554
- cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
555
- }
575
+ const resolveAtComponents = (atComponents, separator)=>atComponents.map((atComponent, i)=>{
576
+ const value = this.resolveAtComponent(atComponent);
577
+ return (i === 0 ? value.charAt(0) !== '(' ? ' ' : '' : '') + value;
578
+ }).join(separator) + '{' + cssText + '}';
579
+ if (this.containerAtComponents) cssText = '@container' + resolveAtComponents(this.containerAtComponents, ' ');
580
+ if (this.mediaAtComponents) cssText = '@media' + resolveAtComponents(this.mediaAtComponents, ' ');
581
+ if (this.supportsAtComponents) cssText = '@supports' + resolveAtComponents(this.supportsAtComponents, ' ');
582
+ if (this.layerAtComponents) cssText = '@layer' + resolveAtComponents(this.layerAtComponents, '.');
556
583
  const node = {
557
584
  text: cssText,
558
585
  selectorText
@@ -563,17 +590,12 @@ class SyntaxRule extends rule.Rule {
563
590
  }
564
591
  }
565
592
  }
566
- if (this.fixedClass) {
567
- this.layer = css.componentsLayer;
568
- }
569
593
  }
570
594
  resolveAtComponent(atComponent) {
571
595
  switch(atComponent.type){
572
- case 'arbitrary':
573
- return atComponent.value;
574
596
  case 'feature':
575
597
  return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
576
- case 'operator':
598
+ default:
577
599
  return atComponent.value;
578
600
  }
579
601
  }
package/dist/syntax-rule.d.ts CHANGED
@@ -9,12 +9,16 @@ export declare class SyntaxRule extends Rule {
9
9
  css: MasterCSS;
10
10
  readonly registeredSyntax: DefinedRule;
11
11
  fixedClass?: string | undefined;
12
- readonly at: Record<string, AtComponent[]>;
12
+ readonly layerAtComponents?: AtComponent[];
13
+ readonly supportsAtComponents?: AtComponent[];
14
+ readonly mediaAtComponents?: AtComponent[];
15
+ readonly containerAtComponents?: AtComponent[];
13
16
  readonly priority: number;
14
17
  readonly order: number;
15
18
  readonly type: SyntaxRuleType;
16
19
  readonly declarations?: PropertiesHyphen;
17
20
  readonly layer: Layer;
21
+ readonly supportUnknown?: boolean;
18
22
  animationNames?: string[];
19
23
  variableNames?: string[];
20
24
  constructor(name: string, css: MasterCSS, registeredSyntax: DefinedRule, fixedClass?: string | undefined, mode?: string);
package/dist/syntax-rule.mjs CHANGED
@@ -8,16 +8,20 @@ class SyntaxRule extends Rule {
8
8
  css;
9
9
  registeredSyntax;
10
10
  fixedClass;
11
- at;
11
+ layerAtComponents;
12
+ supportsAtComponents;
13
+ mediaAtComponents;
14
+ containerAtComponents;
12
15
  priority;
13
16
  order;
14
17
  type;
15
18
  declarations;
16
19
  layer;
20
+ supportUnknown;
17
21
  animationNames;
18
22
  variableNames;
19
23
  constructor(name, css, registeredSyntax, fixedClass, mode){
20
- super(name), this.name = name, this.css = css, this.registeredSyntax = registeredSyntax, this.fixedClass = fixedClass, this.at = {}, this.priority = -1, this.order = 0, this.type = 0, this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
24
+ super(name), this.name = name, this.css = css, this.registeredSyntax = registeredSyntax, this.fixedClass = fixedClass, this.priority = -1, this.order = 0, this.type = 0, this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
21
25
  const { functions } = this.css.config;
22
26
  let currentValue = '';
23
27
  for (const eachValueComponent of valueComponents){
@@ -342,11 +346,18 @@ class SyntaxRule extends Rule {
342
346
  const atToken = stateTokens[i];
343
347
  this.atToken = (this.atToken || '') + '@' + atToken;
344
348
  if (atToken) {
345
- if (atToken === 'base' && !this.fixedClass) {
346
- this.layer = css.baseLayer;
347
- continue;
348
- } else if (atToken === 'preset' && !this.fixedClass) {
349
- this.layer = css.presetLayer;
349
+ if (atToken === 'base' || atToken === 'preset') {
350
+ const atComponent = {
351
+ type: 'arbitrary',
352
+ value: atToken
353
+ };
354
+ if (this.layerAtComponents) {
355
+ this.layerAtComponents.push(atComponent);
356
+ } else {
357
+ this.layerAtComponents = [
358
+ atComponent
359
+ ];
360
+ }
350
361
  continue;
351
362
  } else if (atToken === 'rtl' || atToken === 'ltr') {
352
363
  this.direction = atToken;
@@ -456,16 +467,45 @@ class SyntaxRule extends Rule {
456
467
  }
457
468
  }
458
469
  if (queryType) {
459
- const eachAtComponents = this.at[queryType];
460
- if (eachAtComponents) {
461
- eachAtComponents.push(...atComponents);
470
+ const targetAtComponents = this[`${queryType}AtComponents`];
471
+ if (targetAtComponents) {
472
+ targetAtComponents.push(...atComponents);
462
473
  } else {
463
- this.at[queryType] = atComponents;
474
+ this[`${queryType}AtComponents`] = atComponents;
464
475
  }
465
476
  }
466
477
  }
467
478
  }
468
479
  }
480
+ if (this.mode && modes?.[this.mode] === 'media') {
481
+ const atFeatureComponent = {
482
+ type: 'feature',
483
+ name: 'prefers-color-scheme',
484
+ valueType: 'string',
485
+ value: this.mode
486
+ };
487
+ if (this.mediaAtComponents) {
488
+ this.mediaAtComponents.push(atFeatureComponent);
489
+ } else {
490
+ this.mediaAtComponents = [
491
+ atFeatureComponent
492
+ ];
493
+ }
494
+ }
495
+ if (this.fixedClass) {
496
+ this.layer = css.componentsLayer;
497
+ } else {
498
+ const onlyLayerComponent = this.layerAtComponents?.length === 1 && this.layerAtComponents[0];
499
+ if (onlyLayerComponent) {
500
+ if (onlyLayerComponent.value === 'base') {
501
+ this.layer = css.baseLayer;
502
+ this.layerAtComponents = undefined;
503
+ } else if (onlyLayerComponent.value === 'preset') {
504
+ this.layer = css.presetLayer;
505
+ this.layerAtComponents = undefined;
506
+ }
507
+ }
508
+ }
469
509
  // 7. value
470
510
  let newValue;
471
511
  if (this.valueComponents) {
@@ -486,28 +526,18 @@ class SyntaxRule extends Rule {
486
526
  }
487
527
  const propertiesText = [];
488
528
  for(const propertyName in this.declarations){
489
- const push = (propertyText)=>{
490
- // animations
491
- if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
492
- const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
493
- if (animationNames.length) {
494
- if (!this.animationNames) {
495
- this.animationNames = [];
496
- }
497
- this.animationNames = animationNames;
529
+ const propertyValue = this.declarations[propertyName];
530
+ const propertyText = propertyName + ':' + String(propertyValue);
531
+ if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
532
+ const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
533
+ if (animationNames.length) {
534
+ if (!this.animationNames) {
535
+ this.animationNames = [];
498
536
  }
537
+ this.animationNames = animationNames;
499
538
  }
500
- propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
501
- };
502
- const keyToken = propertyName + ':';
503
- const declarations = this.declarations[propertyName];
504
- if (Array.isArray(declarations)) {
505
- for (const value of declarations){
506
- push(keyToken + String(value));
507
- }
508
- } else {
509
- push(keyToken + String(declarations));
510
539
  }
540
+ propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
511
541
  }
512
542
  // 創建 Natives
513
543
  if (propertiesText.length) {
@@ -515,11 +545,6 @@ class SyntaxRule extends Rule {
515
545
  for (const eachSuffixSelectorVendor of suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor]){
516
546
  const prefixSelectors = this.vendorPrefixSelectors?.[prefixSelectorVendor];
517
547
  const suffixSelectors = this.vendorSuffixSelectors?.[eachSuffixSelectorVendor];
518
- if (this.css.supportVendors) {
519
- if (prefixSelectorVendor && !this.css.supportVendors?.has(prefixSelectorVendor) || eachSuffixSelectorVendor && !this.css.supportVendors?.has(eachSuffixSelectorVendor)) {
520
- continue;
521
- }
522
- }
523
548
  let prefixText = '';
524
549
  if (this.direction) {
525
550
  prefixText += '[dir=' + this.direction + '] ';
@@ -545,12 +570,14 @@ class SyntaxRule extends Rule {
545
570
  }, []).join(',');
546
571
  const selectorText = getCssText(fixedClass ?? name);
547
572
  let cssText = selectorText + '{' + propertiesText.join(';') + '}';
548
- for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
549
- cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
550
- }
551
- if (this.mode && modes?.[this.mode] === 'media') {
552
- cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
553
- }
573
+ const resolveAtComponents = (atComponents, separator)=>atComponents.map((atComponent, i)=>{
574
+ const value = this.resolveAtComponent(atComponent);
575
+ return (i === 0 ? value.charAt(0) !== '(' ? ' ' : '' : '') + value;
576
+ }).join(separator) + '{' + cssText + '}';
577
+ if (this.containerAtComponents) cssText = '@container' + resolveAtComponents(this.containerAtComponents, ' ');
578
+ if (this.mediaAtComponents) cssText = '@media' + resolveAtComponents(this.mediaAtComponents, ' ');
579
+ if (this.supportsAtComponents) cssText = '@supports' + resolveAtComponents(this.supportsAtComponents, ' ');
580
+ if (this.layerAtComponents) cssText = '@layer' + resolveAtComponents(this.layerAtComponents, '.');
554
581
  const node = {
555
582
  text: cssText,
556
583
  selectorText
@@ -561,17 +588,12 @@ class SyntaxRule extends Rule {
561
588
  }
562
589
  }
563
590
  }
564
- if (this.fixedClass) {
565
- this.layer = css.componentsLayer;
566
- }
567
591
  }
568
592
  resolveAtComponent(atComponent) {
569
593
  switch(atComponent.type){
570
- case 'arbitrary':
571
- return atComponent.value;
572
594
  case 'feature':
573
595
  return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
574
- case 'operator':
596
+ default:
575
597
  return atComponent.value;
576
598
  }
577
599
  }
package/dist/types/syntax.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { SyntaxRuleDefinition } from './config';
2
- export type AtComponent = AtArbitraryComponent | AtFeatureComponent | AtOperatorComponent;
3
2
  export interface AtArbitraryComponent {
4
3
  type: 'arbitrary';
5
4
  token?: string;
@@ -18,6 +17,7 @@ export interface AtOperatorComponent {
18
17
  token: '&';
19
18
  value: 'and';
20
19
  }
20
+ export type AtComponent = AtArbitraryComponent | AtFeatureComponent | AtOperatorComponent;
21
21
  export type ValueComponent = StringValueComponent | NumericValueComponent | FunctionValueComponent | VariableValueComponent | SeparatorValueComponent;
22
22
  export interface StringValueComponent {
23
23
  text?: string;
package/dist/utils/are-rule-at-equal.cjs CHANGED
@@ -1,22 +1,12 @@
1
1
  'use strict';
2
2
 
3
- function areRuleAtEqual(aSyntaxRule, bSyntaxRule) {
4
- const aQueryTypes = Object.keys(aSyntaxRule.at);
5
- const bQueryTypes = Object.keys(bSyntaxRule.at);
6
- if (aQueryTypes.length !== bQueryTypes.length) {
7
- return false;
8
- }
9
- for (const aQueryType of aQueryTypes){
10
- const aAtComponents = aSyntaxRule.at[aQueryType];
11
- const bAtComponents = bSyntaxRule.at[aQueryType];
12
- for (const aAtComponent of aAtComponents){
13
- const aAtComponentToken = aSyntaxRule.resolveAtComponent(aAtComponent);
14
- if (!bAtComponents.find((bAtComponent)=>bSyntaxRule.resolveAtComponent(bAtComponent) === aAtComponentToken)) {
15
- return false;
16
- }
17
- }
18
- }
19
- return true;
3
+ function areRuleAtEqual(a, b) {
4
+ const compare = (aList, bList)=>{
5
+ const aResolved = (aList ?? []).map(a.resolveAtComponent);
6
+ const bResolved = (bList ?? []).map(b.resolveAtComponent);
7
+ return aResolved.length === bResolved.length && aResolved.every((val)=>bResolved.includes(val)) && bResolved.every((val)=>aResolved.includes(val));
8
+ };
9
+ return compare(a.mediaAtComponents, b.mediaAtComponents) && compare(a.supportsAtComponents, b.supportsAtComponents) && compare(a.containerAtComponents, b.containerAtComponents) && compare(a.layerAtComponents, b.layerAtComponents);
20
10
  }
21
11
 
22
12
  module.exports = areRuleAtEqual;
package/dist/utils/are-rule-at-equal.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import type { SyntaxRule } from '../syntax-rule';
2
- export default function areRuleAtEqual(aSyntaxRule: SyntaxRule, bSyntaxRule: SyntaxRule): boolean;
2
+ export default function areRuleAtEqual(a: SyntaxRule, b: SyntaxRule): boolean;
package/dist/utils/are-rule-at-equal.mjs CHANGED
@@ -1,20 +1,10 @@
1
- function areRuleAtEqual(aSyntaxRule, bSyntaxRule) {
2
- const aQueryTypes = Object.keys(aSyntaxRule.at);
3
- const bQueryTypes = Object.keys(bSyntaxRule.at);
4
- if (aQueryTypes.length !== bQueryTypes.length) {
5
- return false;
6
- }
7
- for (const aQueryType of aQueryTypes){
8
- const aAtComponents = aSyntaxRule.at[aQueryType];
9
- const bAtComponents = bSyntaxRule.at[aQueryType];
10
- for (const aAtComponent of aAtComponents){
11
- const aAtComponentToken = aSyntaxRule.resolveAtComponent(aAtComponent);
12
- if (!bAtComponents.find((bAtComponent)=>bSyntaxRule.resolveAtComponent(bAtComponent) === aAtComponentToken)) {
13
- return false;
14
- }
15
- }
16
- }
17
- return true;
1
+ function areRuleAtEqual(a, b) {
2
+ const compare = (aList, bList)=>{
3
+ const aResolved = (aList ?? []).map(a.resolveAtComponent);
4
+ const bResolved = (bList ?? []).map(b.resolveAtComponent);
5
+ return aResolved.length === bResolved.length && aResolved.every((val)=>bResolved.includes(val)) && bResolved.every((val)=>aResolved.includes(val));
6
+ };
7
+ return compare(a.mediaAtComponents, b.mediaAtComponents) && compare(a.supportsAtComponents, b.supportsAtComponents) && compare(a.containerAtComponents, b.containerAtComponents) && compare(a.layerAtComponents, b.layerAtComponents);
18
8
  }
19
9
 
20
10
  export { areRuleAtEqual as default };
package/dist/utils/reorder-for-readable-classes.cjs CHANGED
@@ -33,7 +33,7 @@ var core = require('../core.cjs');
33
33
  const aAtToke = a.atToken;
34
34
  const bAtToken = b.atToken;
35
35
  // 如果 a 和 b 都有 media.token 且不包含內建已處理過排序的，則按照以下規則排序
36
- if (aAtToke && bAtToken && !a.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width') && !b.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width')) {
36
+ if (aAtToke && bAtToken && a.mediaAtComponents && !a.mediaAtComponents.find(({ name })=>name === 'min-width' || name === 'max-width') && b.mediaAtComponents && !b.mediaAtComponents.find(({ name })=>name === 'min-width' || name === 'max-width')) {
37
37
  return aAtToke.localeCompare(bAtToken);
38
38
  }
39
39
  if (aHasVendorSuffix && !bHasVendorSuffix) {
package/dist/utils/reorder-for-readable-classes.mjs CHANGED
@@ -31,7 +31,7 @@ import MasterCSS from '../core.mjs';
31
31
  const aAtToke = a.atToken;
32
32
  const bAtToken = b.atToken;
33
33
  // 如果 a 和 b 都有 media.token 且不包含內建已處理過排序的，則按照以下規則排序
34
- if (aAtToke && bAtToken && !a.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width') && !b.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width')) {
34
+ if (aAtToke && bAtToken && a.mediaAtComponents && !a.mediaAtComponents.find(({ name })=>name === 'min-width' || name === 'max-width') && b.mediaAtComponents && !b.mediaAtComponents.find(({ name })=>name === 'min-width' || name === 'max-width')) {
35
35
  return aAtToke.localeCompare(bAtToken);
36
36
  }
37
37
  if (aHasVendorSuffix && !bHasVendorSuffix) {
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.60"},"version":"2.0.0-rc.60"}
1
+ {"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.61"},"version":"2.0.0-rc.61"}