feat(preset-wind4): custom property output backup (#4950)

Author: zyyv

docs/presets/wind4.md

@@ -212,6 +212,94 @@ export default defineConfig({
 })
 ```
 
+#### Property
+
+Control the generation of `@property` CSS rules in the `properties` layer.
+
+By default, PresetWind4 uses `@property` to define CSS custom properties for better browser optimization. These properties are automatically generated based on your utilities usage and wrapped in a `@supports` query for progressive enhancement.
+
+```ts twoslash [uno.config.ts]
+import { defineConfig, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind4({
+      preflights: {
+        property: true, // Enable (default) | `false` to disable [!code ++]
+      },
+    }),
+  ],
+})
+```
+
+##### Parent and Selector
+
+You can customize the parent wrapper and selector:
+
+```ts twoslash [uno.config.ts]
+import { defineConfig, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind4({
+      preflights: {
+        property: {
+          // Custom parent selector (e.g., use @layer instead of @supports)
+          parent: '@layer custom-properties',
+          // Custom selector for applying properties
+          selector: ':where(*, ::before, ::after)',
+        },
+      },
+    }),
+  ],
+})
+```
+
+If you don't want the `@supports` wrapper and want properties applied directly:
+
+```ts twoslash [uno.config.ts]
+import { defineConfig, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind4({
+      preflights: {
+        property: {
+          parent: false, // No parent wrapper
+        },
+      },
+    }),
+  ],
+})
+```
+
+**Default output:**
+
+```css
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
+  ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
+    --un-text-opacity: 100%;
+    /* ... */
+  }
+}
+```
+
+**With `parent: false`:**
+
+```css
+*,
+::before,
+::after,
+::backdrop {
+  --un-text-opacity: 100%;
+  /* ... */
+}
+```
+
 ## Generated CSS
 
 In the output of PresetWind4, three new layers have been added: `base`, `theme`, and `properties`.

packages-presets/preset-wind4/src/index.ts

@@ -120,6 +120,32 @@ export interface PresetWind4Options extends PresetOptions {
      * to match the design system or requirements of your project.
      */
     theme?: PreflightsTheme['mode'] | PreflightsTheme
+
+    /**
+     * Configuration for property preflight generation.
+     *
+     * - `false`: Disable property preflight
+     * - `true` or `undefined`: Enable with default configuration
+     * - `object`: Enable with custom configuration
+     */
+    property?: boolean | {
+      /**
+       * Custom parent selector (e.g., @supports query or @layer).
+       *
+       * - `string`: Use custom parent selector
+       * - `false`: No parent wrapper, apply properties directly to selector
+       * - `undefined`: Use default @supports query
+       *
+       * @default '@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))'
+       */
+      parent?: string | false
+      /**
+       * Custom selector for applying properties.
+       *
+       * @default '*, ::before, ::after, ::backdrop'
+       */
+      selector?: string
+    }
   }
 }
 
@@ -129,15 +155,6 @@ export const presetWind4 = definePreset<PresetWind4Options, Theme>((options = {}
   options.variablePrefix = options.variablePrefix ?? 'un-'
   options.important = options.important ?? false
 
-  const preflightsTheme = (typeof options.preflights?.theme === 'boolean' || typeof options.preflights?.theme === 'string')
-    ? { mode: options.preflights.theme ?? 'on-demand' }
-    : { mode: options.preflights?.theme?.mode ?? 'on-demand', ...options.preflights?.theme }
-
-  options.preflights = {
-    reset: options.preflights?.reset ?? true,
-    theme: preflightsTheme,
-  }
-
   return {
     name: PRESET_NAME,
     rules,

packages-presets/preset-wind4/src/preflights/index.ts

@@ -1,14 +1,14 @@
 import type { Preflight } from '@unocss/core'
 import type { PresetWind4Options } from '..'
 import type { Theme } from '../theme/types'
-import { properties } from './properties'
+import { property } from './property'
 import { reset } from './reset'
 import { theme } from './theme'
 
 export const preflights: (options: PresetWind4Options) => Preflight<Theme>[] = (options) => {
   return [
     reset(options),
     theme(options),
-    properties(),
+    property(options),
   ].filter(Boolean) as Preflight<Theme>[]
 }

packages-presets/preset-wind4/src/preflights/properties.ts

@@ -0,0 +1,36 @@
+import type { Preflight } from '@unocss/core'
+import type { PresetWind4Options } from '..'
+import type { Theme } from '../theme'
+import { trackedProperties } from '../utils/track'
+
+export function property(options: PresetWind4Options): Preflight<Theme> | undefined {
+  if (options.preflights?.property === false)
+    return undefined
+
+  const propertyConfig = typeof options.preflights?.property === 'object'
+    ? options.preflights.property
+    : undefined
+
+  const parentSelector = propertyConfig?.parent !== undefined
+    ? propertyConfig.parent
+    : '@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))'
+
+  const selector = propertyConfig?.selector
+    ?? '*, ::before, ::after, ::backdrop'
+
+  return {
+    getCSS: () => {
+      if (trackedProperties.size === 0)
+        return
+
+      const css = Array.from(trackedProperties.entries())
+        .map(([property, value]) => `${property}:${value};`)
+        .join('')
+
+      return parentSelector === false
+        ? `${selector}{${css}}`
+        : `${parentSelector}{${selector}{${css}}}`
+    },
+    layer: 'properties',
+  }
+}

packages-presets/preset-wind4/src/preflights/property.ts

@@ -53,12 +53,16 @@ function getThemeVarsMap(theme: Theme, keys: string[]): Map<string, string> {
 }
 
 export function theme(options: PresetWind4Options): Preflight<Theme> {
+  const preflightsTheme: PreflightsTheme = (typeof options.preflights?.theme === 'boolean' || typeof options.preflights?.theme === 'string')
+    ? { mode: options.preflights.theme ?? 'on-demand' }
+    : { mode: options.preflights?.theme?.mode ?? 'on-demand', ...options.preflights?.theme }
+
   return {
     layer: 'theme',
     getCSS(ctx) {
       const { theme, generator } = ctx
       const safelist = uniq(generator.config.safelist.flatMap(s => typeof s === 'function' ? s(ctx) : s))
-      const { mode, process } = options.preflights!.theme as PreflightsTheme
+      const { mode, process } = preflightsTheme
       if (mode === false) {
         return undefined
       }

packages-presets/preset-wind4/src/preflights/theme.ts

@@ -487,7 +487,7 @@ describe('important', () => {
       'dark:bg-blue',
     ].join(' '), { preflights: false })
 
-    await expect(css).toMatchFileSnapshot('./assets/output/preset-wind4-important-true.css')
+    expect(css).toMatchFileSnapshot('./assets/output/preset-wind4-important-true.css')
   })
 
   it(`should prefix selector with provided important string and wrap the original selector in ":is()"`, async () => {
@@ -508,7 +508,7 @@ describe('important', () => {
       'selection:bg-yellow',
     ].join(' '), { preflights: false })
 
-    await expect(css).toMatchFileSnapshot('./assets/output/preset-wind4-important-string.css')
+    expect(css).toMatchFileSnapshot('./assets/output/preset-wind4-important-string.css')
   })
 
   it('shadow with opacity', async () => {
@@ -527,7 +527,7 @@ describe('important', () => {
       'shadow-red-300/30',
     ].join(' '), { preflights: false })
 
-    await expect(css).toMatchInlineSnapshot(`
+    expect(css).toMatchInlineSnapshot(`
       "/* layer: properties */
       @property --un-inset-ring-color{syntax:"*";inherits:false;}
       @property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@@ -570,7 +570,7 @@ describe('important', () => {
       'text-shadow-red-300/30',
     ].join(' '), { preflights: false })
 
-    await expect(css).toMatchInlineSnapshot(`
+    expect(css).toMatchInlineSnapshot(`
       "/* layer: properties */
       @property --un-text-shadow-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
       /* layer: default */
@@ -601,7 +601,7 @@ describe('important', () => {
       'drop-shadow-red-300/30',
     ].join(' '), { preflights: false })
 
-    await expect(css).toMatchInlineSnapshot(`
+    expect(css).toMatchInlineSnapshot(`
       "/* layer: properties */
       @property --un-blur{syntax:"*";inherits:false;}
       @property --un-brightness{syntax:"*";inherits:false;}
@@ -626,4 +626,35 @@ describe('important', () => {
       }"
     `)
   })
+
+  it('custom properties', async () => {
+    const uno = await createGenerator({
+      presets: [
+        presetWind4({
+          preflights: {
+            reset: false,
+            property: {
+              parent: false,
+              selector: ':host',
+            },
+          },
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate('text-red')
+
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: properties */
+      :host{--un-text-opacity:100%;}
+      @property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+      /* layer: theme */
+      :root, :host { --colors-red-DEFAULT: oklch(70.4% 0.191 22.216); }
+      /* layer: default */
+      .text-red{color:color-mix(in srgb, var(--colors-red-DEFAULT) var(--un-text-opacity), transparent);}
+      @supports (color: color-mix(in lab, red, red)){
+      .text-red{color:color-mix(in oklab, var(--colors-red-DEFAULT) var(--un-text-opacity), transparent);}
+      }"
+    `)
+  })
 })