feat(core): enhance raw css utils parse with apply variants (#4889)

zyyv · web-flow · commit e91d1c241905 · 2025-08-19T16:24:01.000+08:00
diff --git a/packages-engine/core/src/generator.ts b/packages-engine/core/src/generator.ts
@@ -1,8 +1,8 @@
-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'
+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'
 import { version } from '../package.json'
 import { resolveConfig } from './config'
 import { LAYER_DEFAULT, LAYER_PREFLIGHTS } from './constants'
-import { BetterMap, CountableSet, e, entriesToCss, expandVariantGroup, isCountableSet, isRawUtil, isStaticShortcut, isString, noop, normalizeCSSEntries, normalizeCSSValues, notNull, toArray, TwoKeyMap, uniq, warnOnce } from './utils'
+import { BetterMap, CountableSet, e, entriesToCss, expandVariantGroup, isCountableSet, isRawUtil, isStaticShortcut, isString, noop, normalizeCSSEntries, normalizeCSSValues, notNull, toArray, TwoKeyMap, uniq, VirtualKey, warnOnce } from './utils'
 import { createNanoEvents } from './utils/events'
 
 export const symbols: ControlSymbols = {
@@ -13,6 +13,7 @@ export const symbols: ControlSymbols = {
   selector: '$$symbol-selector' as unknown as ControlSymbols['selector'],
   layer: '$$symbol-layer' as unknown as ControlSymbols['layer'],
   sort: '$$symbol-sort' as unknown as ControlSymbols['sort'],
+  body: '$$symbol-body' as unknown as ControlSymbols['body'],
 }
 
 class UnoGeneratorInternal<Theme extends object = object> {
@@ -723,6 +724,9 @@ class UnoGeneratorInternal<Theme extends object = object> {
               noMerge: entry[1],
             }
           }
+          else if (entry[0] === symbols.body) {
+            (entry as unknown as CSSEntry)[0] = VirtualKey
+          }
         }
 
         return [index, raw, css as CSSEntries, entryMeta, variants]
diff --git a/packages-engine/core/src/types.ts b/packages-engine/core/src/types.ts
@@ -85,6 +85,7 @@ declare const SymbolParent: unique symbol
 declare const SymbolSelector: unique symbol
 declare const SymbolLayer: unique symbol
 declare const SymbolSort: unique symbol
+declare const SymbolBody: unique symbol
 
 export interface ControlSymbols {
   /**
@@ -115,6 +116,10 @@ export interface ControlSymbols {
    * Sort modifier
    */
   sort: typeof SymbolSort
+  /**
+   * Custom css body modifier
+   */
+  body: typeof SymbolBody
 }
 
 export interface ControlSymbolsValue {
@@ -125,6 +130,7 @@ export interface ControlSymbolsValue {
   [SymbolSelector]: (selector: string) => string
   [SymbolLayer]: string
   [SymbolSort]: number
+  [SymbolBody]: string
 }
 
 export type ObjectToEntry<T> = { [K in keyof T]: [K, T[K]] }[keyof T]
diff --git a/packages-engine/core/src/utils/object.ts b/packages-engine/core/src/utils/object.ts
@@ -33,11 +33,12 @@ export function clearIdenticalEntries(entry: CSSEntries): CSSEntries {
   })
 }
 
+export const VirtualKey = '__virtual_key__'
 export function entriesToCss(arr?: CSSEntries) {
   if (arr == null)
     return ''
   return clearIdenticalEntries(arr)
-    .map(([key, value]) => (value != null && typeof value !== 'function') ? `${key}:${value};` : undefined)
+    .map(([key, value]) => (value != null && typeof value !== 'function') ? key !== VirtualKey ? `${key}:${value};` : value : undefined)
     .filter(Boolean)
     .join('')
 }
diff --git a/packages-engine/core/test/__snapshots__/extended-info.test.ts.snap b/packages-engine/core/test/__snapshots__/extended-info.test.ts.snap
@@ -29,6 +29,7 @@ Map {
             ],
           ],
           "symbols": {
+            "body": "$$symbol-body",
             "layer": "$$symbol-layer",
             "noMerge": "$$symbol-no-merge",
             "parent": "$$symbol-parent",
@@ -78,6 +79,7 @@ Map {
             ],
           ],
           "symbols": {
+            "body": "$$symbol-body",
             "layer": "$$symbol-layer",
             "noMerge": "$$symbol-no-merge",
             "parent": "$$symbol-parent",
@@ -125,6 +127,7 @@ Map {
             ],
           ],
           "symbols": {
+            "body": "$$symbol-body",
             "layer": "$$symbol-layer",
             "noMerge": "$$symbol-no-merge",
             "parent": "$$symbol-parent",
diff --git a/packages-engine/core/test/rule-symbols.test.ts b/packages-engine/core/test/rule-symbols.test.ts
@@ -240,3 +240,46 @@ it('hoist static rule', async () => {
     }"
   `)
 })
+
+it('custom css body with apply variants', async () => {
+  const style = `
+    color: blue;
+    .bar {
+      font-size: 1rem;
+    }
+  `
+  const uno = await createGenerator({
+    rules: [
+      ['foo', [
+        { color: 'red' },
+        {
+          [symbols.body]: style,
+        },
+      ]],
+    ],
+    variants: [
+      {
+        name: 'hover',
+        match: (matcher) => {
+          if (matcher.startsWith('hover:')) {
+            return {
+              matcher: matcher.slice(6),
+              selector: s => `${s}:hover`,
+            }
+          }
+        },
+      },
+    ],
+  })
+
+  expect((await uno.generate('hover:foo')).css).toMatchInlineSnapshot(`
+    "/* layer: default */
+    .hover\\:foo:hover{
+        color: blue;
+        .bar {
+          font-size: 1rem;
+        }
+      }
+    .hover\\:foo:hover{color:red;}"
+  `)
+})

Original file line number	Diff line number	Diff 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'
`2`	`2`	`import { version } from '../package.json'`
`3`	`3`	`import { resolveConfig } from './config'`
`4`	`4`	`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'`
`6`	`6`	`import { createNanoEvents } from './utils/events'`
`7`	`7`
`8`	`8`	`export const symbols: ControlSymbols = {`
`@@ -13,6 +13,7 @@ export const symbols: ControlSymbols = {`
`13`	`13`	`selector: '$$symbol-selector' as unknown as ControlSymbols['selector'],`
`14`	`14`	`layer: '$$symbol-layer' as unknown as ControlSymbols['layer'],`
`15`	`15`	`sort: '$$symbol-sort' as unknown as ControlSymbols['sort'],`
	`16`	`+ body: '$$symbol-body' as unknown as ControlSymbols['body'],`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`class UnoGeneratorInternal<Theme extends object = object> {`
`@@ -723,6 +724,9 @@ class UnoGeneratorInternal<Theme extends object = object> {`
`723`	`724`	`noMerge: entry[1],`
`724`	`725`	`}`
`725`	`726`	`}`
	`727`	`+ else if (entry[0] === symbols.body) {`
	`728`	`+ (entry as unknown as CSSEntry)[0] = VirtualKey`
	`729`	`+ }`
`726`	`730`	`}`
`727`	`731`
`728`	`732`	`return [index, raw, css as CSSEntries, entryMeta, variants]`
Original file line number	Diff line number	Diff line change
`@@ -33,11 +33,12 @@ export function clearIdenticalEntries(entry: CSSEntries): CSSEntries {`
`33`	`33`	`})`
`34`	`34`	`}`
`35`	`35`
	`36`	`+export const VirtualKey = '__virtual_key__'`
`36`	`37`	`export function entriesToCss(arr?: CSSEntries) {`
`37`	`38`	`if (arr == null)`
`38`	`39`	`return ''`
`39`	`40`	`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)
`41`	`42`	`.filter(Boolean)`
`42`	`43`	`.join('')`
`43`	`44`	`}`