Skip to content

Commit a45d863

Browse files
1aron1aron
committed
Refactor CSS rule handling by introducing AnonymousLayer for animations; update related methods and tests for consistency
1 parent da3363b commit a45d863

14 files changed

+75
-56
lines changed

‎eslint.config.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default [
1212
rules: {
1313
'@typescript-eslint/no-non-null-assertion': 'off',
1414
'@typescript-eslint/consistent-type-definitions': 'off',
15+
'@typescript-eslint/prefer-for-of': 'off'
1516
}
1617
}
1718
]

‎packages/core/src/anonymous-layer.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import MasterCSS from './core'
2+
import Layer from './layer'
3+
4+
export default class AnonymousLayer extends Layer {
5+
readonly usages: Record<string, number> = {}
6+
// @ts-expect-error
7+
native?: CSSStyleSheet
8+
9+
constructor(
10+
public css: MasterCSS
11+
) {
12+
super('', css)
13+
// @ts-expect-error readonly
14+
this.rules = css.rules
15+
}
16+
17+
get text(): string {
18+
return this.rules.map(({ text }) => text).join('')
19+
}
20+
}

‎packages/core/src/core.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import SyntaxLayer from './syntax-layer'
1111
import { Rule } from './rule'
1212
import SyntaxType from './syntax-type'
1313
import Layer from './layer'
14+
import AnonymousLayer from './anonymous-layer'
1415

1516
type VariableCommon = {
1617
group?: string,
@@ -39,7 +40,7 @@ export default class MasterCSS {
3940
readonly presetLayer = new SyntaxLayer('preset', this)
4041
readonly stylesLayer = new SyntaxLayer('styles', this)
4142
readonly normalLayer = new SyntaxLayer('normal', this)
42-
readonly keyframeLayer = new Layer('', this)
43+
readonly animationsLayer = new AnonymousLayer(this)
4344

4445
get text() {
4546
return this.rules.map(({ text }) => text).join('')
@@ -561,15 +562,11 @@ export default class MasterCSS {
561562
}
562563

563564
reset() {
564-
this.keyframeLayer.reset()
565+
this.animationsLayer.reset()
565566
this.normalLayer.reset()
566567
this.stylesLayer.reset()
567568
this.presetLayer.reset()
568569
this.themeLayer.reset()
569-
570-
// @ts-expect-error readonly
571-
this.rules = [this.layerStatementRule]
572-
573570
return this
574571
}
575572

‎packages/core/src/layer.ts

+17-24
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Rule } from './rule'
22
import MasterCSS from './core'
3+
import findNativeCSSRuleIndex from 'shared/utils/find-native-css-rule-index'
34

45
export default class Layer {
56
readonly ruleBy: Record<string, Rule> = {}
6-
native?: CSSLayerBlockRule | CSSStyleSheet
77
readonly rules: (Rule | Layer)[] = []
88
readonly usages: Record<string, number> = {}
9+
native?: CSSLayerBlockRule
910

1011
constructor(
1112
public name: string,
@@ -24,9 +25,8 @@ export default class Layer {
2425
this.css.rules.push(this)
2526
const nativeSheet = this.css.style?.sheet
2627
if (nativeSheet && !this.native) {
27-
const lengthOfRules = this.css.rules.length
28-
nativeSheet.insertRule(this.text, lengthOfRules - 1)
29-
this.native = nativeSheet.cssRules.item(lengthOfRules - 1) as CSSLayerBlockRule
28+
const insertedIndex = nativeSheet.insertRule(this.text)
29+
this.native = nativeSheet.cssRules.item(insertedIndex) as CSSLayerBlockRule
3030
}
3131
}
3232

@@ -87,28 +87,26 @@ export default class Layer {
8787
delete(key: string) {
8888
const rule = this.ruleBy[key]
8989
if (!rule) return
90-
9190
if (this.name && this.rules.length === 1) {
9291
const indexOfLayer = this.css.rules.indexOf(this)
9392
this.css.rules.splice(indexOfLayer, 1)
9493
const nativeSheet = this.css.style?.sheet
9594
if (nativeSheet && this.native) {
96-
nativeSheet.deleteRule(indexOfLayer)
97-
this.native = undefined
95+
const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native)
96+
if (foundIndex !== -1) {
97+
nativeSheet.deleteRule(foundIndex)
98+
this.native = undefined
99+
}
98100
}
99101
}
100102

101103
if (this.native) {
102104
if (rule.natives.length) {
103105
const firstNativeRule = rule.natives[0]
104-
for (let i = 0; i < this.native.cssRules.length; i++) {
105-
const eachCSSRule = this.native.cssRules[i]
106-
if (eachCSSRule === firstNativeRule.cssRule) {
107-
// eslint-disable-next-line @typescript-eslint/prefer-for-of
108-
for (let j = 0; j < rule.natives.length; j++) {
109-
this.native.deleteRule(i)
110-
}
111-
break
106+
const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, firstNativeRule.cssRule!)
107+
if (foundIndex === -1) {
108+
for (let j = 0; j < rule.natives.length; j++) {
109+
this.native.deleteRule(foundIndex)
112110
}
113111
}
114112
}
@@ -120,22 +118,17 @@ export default class Layer {
120118
}
121119

122120
reset() {
123-
// @ts-expect-error
124-
this.ruleBy = {}
121+
Object.values(this.ruleBy).forEach(rule => {
122+
this.delete(rule.key)
123+
})
125124
// @ts-expect-error
126125
this.usages = {}
127-
if (this.name) {
128-
// @ts-expect-error readonly
129-
this.rules = []
130-
}
131126
if (this.native) {
132127
this.native = undefined
133128
}
134129
}
135130

136131
get text(): string {
137-
return this.name
138-
? '@layer ' + this.name + '{' + this.rules.map((eachRule) => (eachRule as Rule).text).join('') + '}'
139-
: this.rules.map((eachRule) => (eachRule as Rule).text).join('')
132+
return '@layer ' + this.name + '{' + this.rules.map(({ text }) => text).join('') + '}'
140133
}
141134
}

‎packages/core/src/rule.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@ export class Rule {
44
constructor(
55
public readonly name: string,
66
public css: MasterCSS,
7-
public natives: NativeRule[] = [],
8-
public fixedClass?: string
7+
public natives: NativeRule[] = []
98
) { }
109

1110
get key(): string {
12-
return (this.fixedClass ? this.fixedClass + ' ' : '') + this.name
11+
return this.name
1312
}
1413

1514
get text(): string {
16-
return this.natives.map((eachNative) => eachNative.text).join('')
15+
return this.natives.map(({ text }) => text).join('')
1716
}
1817
}
1918

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -326,10 +326,10 @@ export default class SyntaxLayer extends Layer {
326326

327327
if (syntaxRule.animationNames) {
328328
for (const eachAnimationName of syntaxRule.animationNames) {
329-
if (this.css.keyframeLayer.ruleBy[eachAnimationName]) {
330-
this.css.keyframeLayer.usages[eachAnimationName]++
329+
if (this.css.animationsLayer.ruleBy[eachAnimationName]) {
330+
this.css.animationsLayer.usages[eachAnimationName]++
331331
} else {
332-
this.css.keyframeLayer.insert(new Rule(
332+
this.css.animationsLayer.insert(new Rule(
333333
eachAnimationName,
334334
this.css,
335335
[{
@@ -341,7 +341,7 @@ export default class SyntaxLayer extends Layer {
341341
+ '}'
342342
}]
343343
))
344-
this.css.keyframeLayer.usages[eachAnimationName] = 1
344+
this.css.animationsLayer.usages[eachAnimationName] = 1
345345
}
346346
}
347347
}
@@ -363,8 +363,8 @@ export default class SyntaxLayer extends Layer {
363363
}
364364
if (syntaxRule.animationNames) {
365365
for (const eachKeyframeName of syntaxRule.animationNames) {
366-
if (!--this.css.keyframeLayer.usages[eachKeyframeName]) {
367-
this.css.keyframeLayer.delete(eachKeyframeName)
366+
if (!--this.css.animationsLayer.usages[eachKeyframeName]) {
367+
this.css.animationsLayer.delete(eachKeyframeName)
368368
}
369369
}
370370
}

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class SyntaxRule extends Rule {
2626
public fixedClass?: string,
2727
mode?: string
2828
) {
29-
super(name, css, [], fixedClass)
29+
super(name, css)
3030
this.mode = mode as string
3131
this.layer = css.normalLayer
3232
Object.assign(this, registeredSyntax)
@@ -802,6 +802,10 @@ export class SyntaxRule extends Rule {
802802
}
803803
return { value: token, type: 'string' }
804804
}
805+
806+
get key(): string {
807+
return (this.fixedClass ? this.fixedClass + ' ' : '') + this.name
808+
}
805809
}
806810

807811
export type AtComponent =
@@ -827,7 +831,6 @@ export interface VariableValueComponent { text?: string, token: string, type: 'v
827831
export interface SeparatorValueComponent { text?: string, token: string, type: 'separator', value: string }
828832

829833
export interface SyntaxRule extends RegisteredSyntax {
830-
get key(): string
831834
token: string
832835
vendorPrefixSelectors: Record<string, string[]>
833836
vendorSuffixSelectors: Record<string, string[]>

‎packages/core/tests/config/test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ test.concurrent('animations', () => {
6666
expectLayers(
6767
{
6868
normal: '.\\@float\\|\\.5s{animation:float .5s}',
69-
keyframe: '@keyframes float{0%{transform:none}50%{transform:translateY(-1.25rem)}to{transform:none}}'
69+
animations: '@keyframes float{0%{transform:none}50%{transform:translateY(-1.25rem)}to{transform:none}}'
7070
},
7171
'@float|.5s',
7272
{

‎packages/core/tests/semantics.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ test.concurrent('utilities', () => {
99

1010
expectLayers(
1111
{
12-
keyframe: '@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:none}}',
12+
animations: '@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:none}}',
1313
normal: '.\\@my-animation{animation:1s linear infinite rotate}'
1414
},
1515
'@my-animation',

‎packages/core/tests/test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const expectLayers = (
66
theme?: string
77
styles?: string
88
normal?: string
9-
keyframe?: string
9+
animations?: string
1010
preset?: string
1111
},
1212
className: string | string[],
@@ -17,7 +17,7 @@ export const expectLayers = (
1717
if (layers.styles) expect(cssRuleText).toContain(`@layer styles{${layers.styles ?? ''}}`)
1818
if (layers.preset) expect(cssRuleText).toContain(`@layer preset{${layers.preset ?? ''}}`)
1919
if (layers.normal) expect(cssRuleText).toContain(`@layer normal{${layers.normal ?? ''}}`)
20-
if (layers.keyframe) expect(cssRuleText).toContain(`${layers.keyframe ?? ''}`)
20+
if (layers.animations) expect(cssRuleText).toContain(`${layers.animations ?? ''}`)
2121
}
2222

2323
test.todo('hidden@sm and flex ordering')

‎packages/extractor/eslint.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import common from '../../eslint.config.mjs'
22
import techor from 'eslint-config-techor'
33

44
export default [
5-
...common,
65
techor.configs.typescript,
6+
...common,
77
{
88
rules: {
99
'no-undef': 'off'

‎packages/extractor/src/functions/extract-latent-classes.ts

-1
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,6 @@ const needExclude = (content: string) => {
145145
const hasUnclosedBrackets = (content: string) => {
146146
const brackets = []
147147
let left = undefined
148-
// eslint-disable-next-line @typescript-eslint/prefer-for-of
149148
for (let i = 0; i < content.length; i++) {
150149
switch (content[i]) {
151150
case '(':

‎packages/runtime/src/core.ts

+7-8
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ export class RuntimeCSS extends MasterCSS {
4848
}
4949
}
5050
if (this.progressive) {
51-
this.keyframeLayer.native = this.style.sheet!
52-
/* eslint-disable @typescript-eslint/prefer-for-of */
51+
this.animationsLayer.native = this.style.sheet!
5352
for (let i = 0; i < this.style.sheet!.cssRules.length; i++) {
5453
const eachCSSRule = this.style.sheet!.cssRules[i]
5554
if (eachCSSRule.constructor.name === 'CSSLayerBlockRule') {
@@ -104,7 +103,7 @@ export class RuntimeCSS extends MasterCSS {
104103
layer.rules.push(syntaxRule)
105104
layer.ruleBy[syntaxRule.name] = syntaxRule
106105
this.themeLayer.insert(syntaxRule)
107-
this.keyframeLayer.insert(syntaxRule)
106+
this.animationsLayer.insert(syntaxRule)
108107
syntaxRule.definition.insert?.call(syntaxRule)
109108
}
110109
for (const eachNativeRule of syntaxRule.natives) {
@@ -213,7 +212,7 @@ export class RuntimeCSS extends MasterCSS {
213212
this.stylesLayer.rules.push(eachSyntaxRule)
214213
this.stylesLayer.ruleBy[name] = eachSyntaxRule
215214
this.themeLayer.insert(eachSyntaxRule)
216-
this.keyframeLayer.insert(eachSyntaxRule)
215+
this.animationsLayer.insert(eachSyntaxRule)
217216
eachSyntaxRule.definition.insert?.call(eachSyntaxRule)
218217
}
219218
matched = true
@@ -255,9 +254,9 @@ export class RuntimeCSS extends MasterCSS {
255254
text: keyframsRule.cssText
256255
}]
257256
)
258-
this.keyframeLayer.rules.push(animationRule)
259-
this.keyframeLayer.ruleBy[animationRule.name] = animationRule
260-
this.keyframeLayer.usages[animationRule.name] = 0
257+
this.animationsLayer.rules.push(animationRule)
258+
this.animationsLayer.ruleBy[animationRule.name] = animationRule
259+
this.animationsLayer.usages[animationRule.name] = 0
261260
}
262261
}
263262
} else {
@@ -266,7 +265,7 @@ export class RuntimeCSS extends MasterCSS {
266265
this.container.append(this.style)
267266
this.style.sheet!.insertRule(this.layerStatementRule.text)
268267
this.layerStatementRule.native = this.style.sheet!.cssRules.item(0) as CSSLayerStatementRule
269-
this.keyframeLayer.native = this.style.sheet!
268+
this.animationsLayer.native = this.style.sheet!
270269
}
271270

272271
const handleClassList = (classList: DOMTokenList) => {

‎shared/utils/find-native-css-rule-index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function findNativeCSSRuleIndex(cssRules: CSSRuleList, nativeRule: CSSRule): number {
2+
for (let i = 0; i < cssRules.length; i++) {
3+
if (cssRules[i] === nativeRule) {
4+
return i
5+
}
6+
}
7+
return -1
8+
}

0 commit comments

Comments
 (0)