Skip to content

Commit 0de4f7f

Browse files
1aron1aron
committed
Fix: The problem with the assignment of the base and preset layers
1 parent 9fa4220 commit 0de4f7f

File tree

32 files changed

+342
-334
lines changed

32 files changed

+342
-334
lines changed

‎packages/core/src/common.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const UNIT_REGEX = /^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex
1919
export const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\(.*\)/
2020
export const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla|light-dark)\(.*\)|(?:\$colors)(?![a-zA-Z0-9-]))/
2121
export const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\([^|]*\))/
22+
export const VENDOR_PREFIX_REGEX = /^-(webkit|moz|ms|o)-/
2223
export const OFFICIAL_URL = new URL('https://rc.css.master.co')
2324
export const CLASS_ATTRIBUTES = ['class', 'className']
2425
export const CLASS_DECLARATIONS = ['components']

‎packages/core/src/config/rules.ts‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -645,28 +645,13 @@ const rules = {
645645
type: SyntaxRuleType.Native
646646
} as SyntaxRuleDefinition,
647647
'overflow-x': {
648-
type: SyntaxRuleType.Native,
649-
declare(value) {
650-
return value === 'overlay'
651-
? { 'overflow-x': ['auto', value] }
652-
: { 'overflow-x': value }
653-
}
648+
type: SyntaxRuleType.Native
654649
} as SyntaxRuleDefinition,
655650
'overflow-y': {
656651
type: SyntaxRuleType.Native,
657-
declare(value) {
658-
return value === 'overlay'
659-
? { 'overflow-y': ['auto', value] }
660-
: { 'overflow-y': value }
661-
}
662652
} as SyntaxRuleDefinition,
663653
overflow: {
664654
type: SyntaxRuleType.NativeShorthand,
665-
declare(value) {
666-
return value === 'overlay'
667-
? { overflow: ['auto', value] }
668-
: { overflow: value }
669-
}
670655
} as SyntaxRuleDefinition,
671656
'overscroll-behavior-x': {
672657
type: SyntaxRuleType.Native

‎packages/core/src/core.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import SyntaxLayer from './syntax-layer'
1212
import NonLayer from './non-layer'
1313
import { ColorVariable, DefinedRule, Variable } from './types/syntax'
1414
import { AnimationDefinitions, Config, SyntaxRuleDefinition, VariableDefinition } from './types/config'
15-
import { Vendors } from './types/common'
1615
import registerGlobal from './register-global'
1716

1817
export default class MasterCSS {
@@ -32,6 +31,7 @@ export default class MasterCSS {
3231
readonly variables = new Map<string, Variable>()
3332
readonly at = new Map<string, string | number>()
3433
readonly animations = new Map<string, AnimationDefinitions>()
34+
readonly SyntaxRule = SyntaxRule
3535

3636
constructor(
3737
public customConfig?: Config
@@ -625,7 +625,7 @@ export default class MasterCSS {
625625
const syntaxRule = this.generalLayer.rules.find(({ key }) => key === ((fixedClass ? fixedClass + ' ' : '') + className))
626626
if (syntaxRule) return syntaxRule
627627
const registeredRule = this.match(className)
628-
if (registeredRule) return new SyntaxRule(className, this, registeredRule, fixedClass, mode)
628+
if (registeredRule) return new this.SyntaxRule(className, this, registeredRule, fixedClass, mode)
629629
}
630630

631631
/**
@@ -747,8 +747,8 @@ export default class MasterCSS {
747747
}
748748

749749
export default interface MasterCSS {
750-
supportVendors: Set<Vendors>
751750
style: HTMLStyleElement | null
751+
Native: typeof CSS
752752
}
753753

754754
(function (MasterCSS) {

‎packages/core/src/factories/with-syntax-layer.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
2626
* @description
2727
*/
2828
const endIndex = this.rules.length - 1
29-
const { at, atToken, order, priority } = syntaxRule
29+
const { mediaAtComponents, atToken, order, priority } = syntaxRule
3030
const findIndex = (startIndex: number, stopCheck?: (syntaxRule: SyntaxRule) => any, matchCheck?: (syntaxRule: SyntaxRule) => any) => {
3131
let i = startIndex
3232
for (; i <= endIndex; i++) {
@@ -46,14 +46,14 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
4646
let matchStartIndex: number | undefined
4747
let matchEndIndex: number | undefined
4848
if (atToken) {
49-
const mediaStartIndex = this.rules.findIndex(eachSyntaxRule => eachSyntaxRule.at?.media)
49+
const mediaStartIndex = this.rules.findIndex(eachSyntaxRule => eachSyntaxRule.mediaAtComponents)
5050
if (mediaStartIndex === -1) {
5151
index = endIndex + 1
5252
} else {
53-
const maxWidthFeature = at.media?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent
54-
const minWidthFeature = at.media?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent
53+
const maxWidthFeature = mediaAtComponents?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent
54+
const minWidthFeature = mediaAtComponents?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent
5555
if (maxWidthFeature || minWidthFeature) {
56-
const mediaWidthStartIndex = this.rules.findIndex(eachSyntaxRule => eachSyntaxRule.at?.media?.find(({ name }: any) => name === 'max-width' || name === 'min-width'))
56+
const mediaWidthStartIndex = this.rules.findIndex(eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width' || name === 'min-width'))
5757
if (mediaWidthStartIndex === -1) {
5858
index = endIndex + 1
5959
} else {
@@ -68,7 +68,7 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
6868
matchStartIndex = findIndex(
6969
mediaWidthStartIndex,
7070
eachSyntaxRule => eachSyntaxRule.priority !== -1,
71-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width')
71+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width')
7272
)
7373
matchEndIndex = findIndex(
7474
mediaWidthStartIndex,
@@ -78,7 +78,7 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
7878
matchStartIndex = findIndex(
7979
mediaWidthStartIndex,
8080
undefined,
81-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
81+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
8282
)
8383
matchEndIndex = endIndex
8484
}
@@ -91,8 +91,8 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
9191
matchStartIndex = matchEndIndex + 1
9292
for (; i >= endI; i--) {
9393
const eachSyntaxRule = this.rules[i]
94-
const eachMaxWidthFeature = eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent
95-
const eachMinWidthFeature = eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent
94+
const eachMaxWidthFeature = eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent
95+
const eachMinWidthFeature = eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent
9696
if (!eachMaxWidthFeature || !eachMinWidthFeature) {
9797
break
9898
} else {
@@ -115,28 +115,28 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
115115
if (priority === -1) {
116116
matchStartIndex = findIndex(
117117
mediaWidthStartIndex,
118-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1,
119-
eachSyntaxRule => !eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width')
118+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1,
119+
eachSyntaxRule => !eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width')
120120
)
121121
matchEndIndex = findIndex(
122122
mediaWidthStartIndex,
123-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1
123+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1
124124
)
125125
} else {
126126
matchStartIndex = findIndex(
127127
mediaWidthStartIndex,
128-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1,
129-
eachSyntaxRule => !eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
128+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1,
129+
eachSyntaxRule => !eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
130130
)
131131
matchEndIndex = findIndex(
132132
mediaWidthStartIndex,
133-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
133+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
134134
)
135135
}
136136

137137
if (matchStartIndex !== -1) {
138138
for (let i = matchEndIndex; i >= matchStartIndex; i--) {
139-
const feature = (this.rules[i].at.media?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent)
139+
const feature = (this.rules[i].mediaAtComponents?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent)
140140
if (!feature) continue
141141
if (feature.value > minWidthFeature.value) {
142142
matchEndIndex = i - 1
@@ -154,28 +154,28 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
154154
if (priority === -1) {
155155
matchStartIndex = findIndex(
156156
mediaWidthStartIndex,
157-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1,
158-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width')
157+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1,
158+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width')
159159
)
160160
matchEndIndex = findIndex(
161161
mediaWidthStartIndex,
162-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1
162+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') || eachSyntaxRule.priority !== -1
163163
)
164164
} else {
165165
matchStartIndex = findIndex(
166166
mediaWidthStartIndex,
167-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1,
168-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.priority !== -1
167+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1,
168+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width') && eachSyntaxRule.priority !== -1
169169
)
170170
matchEndIndex = findIndex(
171171
mediaWidthStartIndex,
172-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
172+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'min-width') && eachSyntaxRule.priority !== -1
173173
)
174174
}
175175

176176
if (matchStartIndex !== -1) {
177177
for (let i = matchEndIndex; i >= matchStartIndex; i--) {
178-
const feature = (this.rules[i].at.media?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent)
178+
const feature = (this.rules[i].mediaAtComponents?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent)
179179
if (!feature) continue
180180
if (feature.value < maxWidthFeature.value) {
181181
matchEndIndex = i - 1
@@ -192,17 +192,17 @@ export default function withSyntaxLayer<TBase extends new (...args: any[]) => La
192192
matchStartIndex = mediaStartIndex
193193
matchEndIndex = findIndex(
194194
mediaStartIndex,
195-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1
195+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1
196196
)
197197
} else {
198198
matchStartIndex = findIndex(
199199
mediaStartIndex,
200-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width' || name === 'min-width'),
200+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width' || name === 'min-width'),
201201
eachSyntaxRule => eachSyntaxRule.priority !== -1
202202
)
203203
matchEndIndex = findIndex(
204204
mediaStartIndex,
205-
eachSyntaxRule => eachSyntaxRule.at.media?.find(({ name }: any) => name === 'max-width' || name === 'min-width')
205+
eachSyntaxRule => eachSyntaxRule.mediaAtComponents?.find(({ name }: any) => name === 'max-width' || name === 'min-width')
206206
)
207207
}
208208
}

‎packages/core/src/rule-node.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export class Rule {
2+
constructor(
3+
public readonly name: string,
4+
public nodes: RuleNode[] = []
5+
) { }
6+
7+
get key(): string {
8+
return this.name
9+
}
10+
11+
get text(): string {
12+
return this.nodes.map(({ text }) => text).join('')
13+
}
14+
}
15+
16+
export interface RuleNode {
17+
text: string
18+
selectorText?: string
19+
native?: CSSRule
20+
suffixSelectors?: string[]
21+
prefixSelectors?: string[]
22+
}

‎packages/core/src/rule.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@ export interface RuleNode {
1919
native?: CSSRule
2020
suffixSelectors?: string[]
2121
prefixSelectors?: string[]
22+
unsupported?: boolean
2223
}

0 commit comments

Comments
 (0)