Skip to content

Commit e91d1c2

Browse files
zyyvzyyv
authored
feat(core): enhance raw css utils parse with apply variants (#4889)
1 parent 4e6c26c commit e91d1c2

File tree

5 files changed

+60
-3
lines changed

5 files changed

+60
-3
lines changed

‎packages-engine/core/src/generator.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { BlocklistMeta, BlocklistValue, ControlSymbols, ControlSymbolsEntry, CSSEntries, CSSEntriesInput, CSSObject, CSSValueInput, ExtendedTokenInfo, ExtractorContext, GenerateOptions, GenerateResult, ParsedUtil, PreflightContext, PreparedRule, RawUtil, ResolvedConfig, Rule, RuleContext, RuleMeta, SafeListContext, Shortcut, ShortcutInlineValue, ShortcutValue, StringifiedUtil, UserConfig, UserConfigDefaults, UtilObject, Variant, VariantContext, VariantHandlerContext, VariantMatchedResult } from './types'
1+
import type { BlocklistMeta, BlocklistValue, ControlSymbols, ControlSymbolsEntry, CSSEntries, CSSEntriesInput, CSSEntry, CSSObject, CSSValueInput, ExtendedTokenInfo, ExtractorContext, GenerateOptions, GenerateResult, ParsedUtil, PreflightContext, PreparedRule, RawUtil, ResolvedConfig, Rule, RuleContext, RuleMeta, SafeListContext, Shortcut, ShortcutInlineValue, ShortcutValue, StringifiedUtil, UserConfig, UserConfigDefaults, UtilObject, Variant, VariantContext, VariantHandlerContext, VariantMatchedResult } from './types'
22
import { version } from '../package.json'
33
import { resolveConfig } from './config'
44
import { LAYER_DEFAULT, LAYER_PREFLIGHTS } from './constants'
5-
import { BetterMap, CountableSet, e, entriesToCss, expandVariantGroup, isCountableSet, isRawUtil, isStaticShortcut, isString, noop, normalizeCSSEntries, normalizeCSSValues, notNull, toArray, TwoKeyMap, uniq, warnOnce } from './utils'
5+
import { BetterMap, CountableSet, e, entriesToCss, expandVariantGroup, isCountableSet, isRawUtil, isStaticShortcut, isString, noop, normalizeCSSEntries, normalizeCSSValues, notNull, toArray, TwoKeyMap, uniq, VirtualKey, warnOnce } from './utils'
66
import { createNanoEvents } from './utils/events'
77

88
export const symbols: ControlSymbols = {
@@ -13,6 +13,7 @@ export const symbols: ControlSymbols = {
1313
selector: '$$symbol-selector' as unknown as ControlSymbols['selector'],
1414
layer: '$$symbol-layer' as unknown as ControlSymbols['layer'],
1515
sort: '$$symbol-sort' as unknown as ControlSymbols['sort'],
16+
body: '$$symbol-body' as unknown as ControlSymbols['body'],
1617
}
1718

1819
class UnoGeneratorInternal<Theme extends object = object> {
@@ -723,6 +724,9 @@ class UnoGeneratorInternal<Theme extends object = object> {
723724
noMerge: entry[1],
724725
}
725726
}
727+
else if (entry[0] === symbols.body) {
728+
(entry as unknown as CSSEntry)[0] = VirtualKey
729+
}
726730
}
727731

728732
return [index, raw, css as CSSEntries, entryMeta, variants]

‎packages-engine/core/src/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ declare const SymbolParent: unique symbol
8585
declare const SymbolSelector: unique symbol
8686
declare const SymbolLayer: unique symbol
8787
declare const SymbolSort: unique symbol
88+
declare const SymbolBody: unique symbol
8889

8990
export interface ControlSymbols {
9091
/**
@@ -115,6 +116,10 @@ export interface ControlSymbols {
115116
* Sort modifier
116117
*/
117118
sort: typeof SymbolSort
119+
/**
120+
* Custom css body modifier
121+
*/
122+
body: typeof SymbolBody
118123
}
119124

120125
export interface ControlSymbolsValue {
@@ -125,6 +130,7 @@ export interface ControlSymbolsValue {
125130
[SymbolSelector]: (selector: string) => string
126131
[SymbolLayer]: string
127132
[SymbolSort]: number
133+
[SymbolBody]: string
128134
}
129135

130136
export type ObjectToEntry<T> = { [K in keyof T]: [K, T[K]] }[keyof T]

‎packages-engine/core/src/utils/object.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ export function clearIdenticalEntries(entry: CSSEntries): CSSEntries {
3333
})
3434
}
3535

36+
export const VirtualKey = '__virtual_key__'
3637
export function entriesToCss(arr?: CSSEntries) {
3738
if (arr == null)
3839
return ''
3940
return clearIdenticalEntries(arr)
40-
.map(([key, value]) => (value != null && typeof value !== 'function') ? `${key}:${value};` : undefined)
41+
.map(([key, value]) => (value != null && typeof value !== 'function') ? key !== VirtualKey ? `${key}:${value};` : value : undefined)
4142
.filter(Boolean)
4243
.join('')
4344
}

‎packages-engine/core/test/__snapshots__/extended-info.test.ts.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ Map {
2929
],
3030
],
3131
"symbols": {
32+
"body": "$$symbol-body",
3233
"layer": "$$symbol-layer",
3334
"noMerge": "$$symbol-no-merge",
3435
"parent": "$$symbol-parent",
@@ -78,6 +79,7 @@ Map {
7879
],
7980
],
8081
"symbols": {
82+
"body": "$$symbol-body",
8183
"layer": "$$symbol-layer",
8284
"noMerge": "$$symbol-no-merge",
8385
"parent": "$$symbol-parent",
@@ -125,6 +127,7 @@ Map {
125127
],
126128
],
127129
"symbols": {
130+
"body": "$$symbol-body",
128131
"layer": "$$symbol-layer",
129132
"noMerge": "$$symbol-no-merge",
130133
"parent": "$$symbol-parent",

‎packages-engine/core/test/rule-symbols.test.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,3 +240,46 @@ it('hoist static rule', async () => {
240240
}"
241241
`)
242242
})
243+
244+
it('custom css body with apply variants', async () => {
245+
const style = `
246+
color: blue;
247+
.bar {
248+
font-size: 1rem;
249+
}
250+
`
251+
const uno = await createGenerator({
252+
rules: [
253+
['foo', [
254+
{ color: 'red' },
255+
{
256+
[symbols.body]: style,
257+
},
258+
]],
259+
],
260+
variants: [
261+
{
262+
name: 'hover',
263+
match: (matcher) => {
264+
if (matcher.startsWith('hover:')) {
265+
return {
266+
matcher: matcher.slice(6),
267+
selector: s => `${s}:hover`,
268+
}
269+
}
270+
},
271+
},
272+
],
273+
})
274+
275+
expect((await uno.generate('hover:foo')).css).toMatchInlineSnapshot(`
276+
"/* layer: default */
277+
.hover\\:foo:hover{
278+
color: blue;
279+
.bar {
280+
font-size: 1rem;
281+
}
282+
}
283+
.hover\\:foo:hover{color:red;}"
284+
`)
285+
})

0 commit comments

Comments
 (0)