Skip to content

Commit 5180e39

Browse files
committed
Improve: Rename reorderForReadableClasses to sortReadableClasses and improve sort readability
1 parent 532bb18 commit 5180e39

File tree

2 files changed

+87
-0
lines changed

2 files changed

+87
-0
lines changed
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import SyntaxRuleType from '../syntax-rule-type'
2+
import MasterCSS from '../core'
3+
import compareRulePriority from './compare-rule-priority'
4+
import { SyntaxRule } from '../syntax-rule'
5+
6+
/**
7+
* Sorts classes in a consistent order
8+
* @param classes
9+
* @param options
10+
* @returns consistent classes
11+
*/
12+
export default function sortReadableClasses(classes: string[], css = new MasterCSS()) {
13+
css.add(...classes)
14+
15+
// 先去重 fixedClass for componentsLayer
16+
const seenFixed = new Set<string>()
17+
const dedupedComponentRules = css.componentsLayer.rules.filter(rule => {
18+
if (!rule.fixedClass) return true
19+
if (seenFixed.has(rule.fixedClass)) return false
20+
seenFixed.add(rule.fixedClass)
21+
return true
22+
})
23+
24+
const allRules = [
25+
...dedupedComponentRules,
26+
...css.generalLayer.rules,
27+
...css.baseLayer.rules,
28+
...css.presetLayer.rules,
29+
]
30+
31+
const baseSet = new Set(css.baseLayer.rules)
32+
const presetSet = new Set(css.presetLayer.rules)
33+
34+
const getGroupIndex = (rule: SyntaxRule): number => {
35+
if (baseSet.has(rule)) return 4
36+
if (presetSet.has(rule)) return 5
37+
if (rule.atRules) return 3
38+
if (rule.mode) return 2
39+
if (rule.selectorNodes?.length) return 1
40+
return 0
41+
}
42+
43+
const getTypeScore = (rule: SyntaxRule): number => {
44+
if (rule.fixedClass) return 0
45+
if (rule.type === SyntaxRuleType.Utility) return 1
46+
return 2
47+
}
48+
49+
const rulesWithSortKey = allRules.map(rule => ({
50+
rule,
51+
sortKey: [
52+
getGroupIndex(rule),
53+
getTypeScore(rule),
54+
] as const,
55+
}))
56+
57+
const sortedRules = rulesWithSortKey.sort((a, b) => {
58+
for (let i = 0; i < a.sortKey.length; i++) {
59+
if (a.sortKey[i] !== b.sortKey[i]) {
60+
return a.sortKey[i] - b.sortKey[i]
61+
}
62+
}
63+
return compareRulePriority(a.rule, b.rule)
64+
})
65+
66+
const orderedClasses = sortedRules.map(entry => entry.rule.fixedClass || entry.rule.name)
67+
68+
css.remove(...classes)
69+
return orderedClasses
70+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Testing from '../cases-testing'
2+
3+
Testing.readableClasses({
4+
breakpoints: ['font:12', 'font:24@sm', 'font:36@lg'],
5+
collision: ['m:10', 'm:20', 'm:30:hover', 'm:40@dark'],
6+
modes: ['bg:red', 'bg:slate-90@light', 'bg:white/.1@dark'],
7+
selectors: ['block', 'display:block', 'block[data-id]', 'block[required]', 'block:hover', 'block:has(:focus)', 'block:active', 'block:disabled'],
8+
components: ['btn', 'card', 'block', 'font:12', 'bg:red:hover', 'btn@sm', 'block@sm', 'box:content@base', 'text:center@preset'],
9+
1: ['abs', '@flash|3s|infinit', 'inset:0', 'm:auto', 'blend:overlay', 'fg:white', 'font:7vw', 'font:heavy', 'height:fit', 'text:center', 'abs@sm', 'font:40@xs'],
10+
2: ['block', 'round', 'm:32', 'px:16', 'font:12', 'mb:48', 'bg:blue:hover', 'font:24@sm', 'font:32@md'],
11+
3: ['block', 'round', 'm:32', 'my:16', 'px:16', 'bg:red', 'font:12', 'mb:48', 'bg:blue:hover', 'bg:purple:focus', 'font:32@sm', 'my:32@lg', 'font:48@lg']
12+
}, {
13+
components: {
14+
btn: 'block fg:blue',
15+
card: 'text:center p:5x p:10x@md'
16+
}
17+
})

0 commit comments

Comments
 (0)