fix(preset-wind): rework base of transform, filter, `backdrop-fil…

…ter` (#1028)

packages/core/src/config.ts

@@ -11,6 +11,7 @@ export function resolveShortcuts(shortcuts: UserShortcuts): Shortcut[] {
 }
 
 const defaultLayers = {
+  preflights: -100,
   shortcuts: -1,
   default: 0,
 }

packages/preset-mini/src/index.ts

@@ -1,9 +1,11 @@
 import type { Postprocessor, Preset, PresetOptions } from '@unocss/core'
+import { preflights } from './preflights'
 import { rules } from './rules'
 import type { Theme, ThemeAnimation } from './theme'
 import { theme } from './theme'
 import { variants } from './variants'
 
+export { preflights } from './preflights'
 export { theme, colors } from './theme'
 export { parseColor } from './utils'
 
@@ -37,6 +39,7 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
+    preflights,
   }
 }
 

packages/preset-mini/src/preflights.ts

@@ -0,0 +1,14 @@
+import type { Preflight, PreflightContext } from '@unocss/core'
+import { entriesToCss } from '@unocss/core'
+import type { Theme } from './theme'
+
+export const preflights: Preflight[] = [
+  {
+    layer: 'preflights',
+    getCSS(ctx: PreflightContext<Theme>) {
+      if (ctx.theme.preflightBase)
+        return `*,::before,::after{${entriesToCss(Object.entries(ctx.theme.preflightBase))}}`
+    },
+  },
+]
+

packages/preset-mini/src/rules/transform.ts

@@ -1,41 +1,37 @@
 import type { CSSValues, Rule, RuleContext } from '@unocss/core'
-import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core'
 import type { Theme } from '../theme'
-import { CONTROL_MINI_NO_NEGATIVE, handler as h, positionMap, xyzMap } from '../utils'
+import { handler as h, positionMap, xyzMap } from '../utils'
 
-const transformGpu = {
-  '--un-transform': [
-    'translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))',
-    'rotate(var(--un-rotate))',
-    'rotateX(var(--un-rotate-x))',
-    'rotateY(var(--un-rotate-y))',
-    'rotateZ(var(--un-rotate-z))',
-    'skewX(var(--un-skew-x))',
-    'skewY(var(--un-skew-y))',
-    'scaleX(var(--un-scale-x))',
-    'scaleY(var(--un-scale-y))',
-    'scaleZ(var(--un-scale-z))',
-  ].join(' '),
-}
+const transformCpu = [
+  'translateX(var(--un-translate-x))',
+  'translateY(var(--un-translate-y))',
+  'translateZ(var(--un-translate-z))',
+  'rotate(var(--un-rotate))',
+  'rotateX(var(--un-rotate-x))',
+  'rotateY(var(--un-rotate-y))',
+  'rotateZ(var(--un-rotate-z))',
+  'skewX(var(--un-skew-x))',
+  'skewY(var(--un-skew-y))',
+  'scaleX(var(--un-scale-x))',
+  'scaleY(var(--un-scale-y))',
+  'scaleZ(var(--un-scale-z))',
+].join(' ')
 
-const transformCpu = {
-  '--un-transform': [
-    'translateX(var(--un-translate-x))',
-    'translateY(var(--un-translate-y))',
-    'translateZ(var(--un-translate-z))',
-    'rotate(var(--un-rotate))',
-    'rotateX(var(--un-rotate-x))',
-    'rotateY(var(--un-rotate-y))',
-    'rotateZ(var(--un-rotate-z))',
-    'skewX(var(--un-skew-x))',
-    'skewY(var(--un-skew-y))',
-    'scaleX(var(--un-scale-x))',
-    'scaleY(var(--un-scale-y))',
-    'scaleZ(var(--un-scale-z))',
-  ].join(' '),
-}
+const transformGpu = [
+  'translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))',
+  'rotate(var(--un-rotate))',
+  'rotateX(var(--un-rotate-x))',
+  'rotateY(var(--un-rotate-y))',
+  'rotateZ(var(--un-rotate-z))',
+  'skewX(var(--un-skew-x))',
+  'skewY(var(--un-skew-y))',
+  'scaleX(var(--un-scale-x))',
+  'scaleY(var(--un-scale-y))',
+  'scaleZ(var(--un-scale-z))',
+].join(' ')
 
-const transformBase = {
+export const transformBase = {
+  // transform
   '--un-rotate': 0,
   '--un-rotate-x': 0,
   '--un-rotate-y': 0,
@@ -48,9 +44,7 @@ const transformBase = {
   '--un-translate-x': 0,
   '--un-translate-y': 0,
   '--un-translate-z': 0,
-  ...transformCpu,
-  [CONTROL_SHORTCUT_NO_MERGE]: '',
-  [CONTROL_MINI_NO_NEGATIVE]: '',
+  '--un-transform': transformCpu,
 }
 
 export const transforms: Rule[] = [
@@ -93,24 +87,18 @@ export const transforms: Rule[] = [
   [/^(?:transform-)?preserve-flat$/, () => ({ 'transform-style': 'flat' })],
 
   // base
-  [/^transform$/, () => [
-    transformBase,
-    { transform: 'var(--un-transform)' },
-  ]],
-  ['transform-gpu', transformGpu],
-  ['transform-cpu', transformCpu],
+  ['transform', { transform: 'var(--un-transform)' }],
+  ['transform-cpu', { transform: 'var(--un-transform)' }],
+  ['transform-gpu', { transform: transformGpu }],
   ['transform-none', { transform: 'none' }],
 ]
 
 function handleTranslate([, d, b]: string[], { theme }: RuleContext<Theme>): CSSValues | undefined {
   const v = theme.spacing?.[b] ?? h.bracket.cssvar.fraction.rem(b)
   if (v != null) {
     return [
-      transformBase,
-      [
-        ...xyzMap[d].map((i): [string, string] => [`--un-translate${i}`, v]),
-        ['transform', 'var(--un-transform)'],
-      ],
+      ...xyzMap[d].map((i): [string, string] => [`--un-translate${i}`, v]),
+      ['transform', 'var(--un-transform)'],
     ]
   }
 }
@@ -119,11 +107,8 @@ function handleScale([, d, b]: string[]): CSSValues | undefined {
   const v = h.bracket.cssvar.fraction.percent(b)
   if (v != null) {
     return [
-      transformBase,
-      [
-        ...xyzMap[d].map((i): [string, string] => [`--un-scale${i}`, v]),
-        ['transform', 'var(--un-transform)'],
-      ],
+      ...xyzMap[d].map((i): [string, string] => [`--un-scale${i}`, v]),
+      ['transform', 'var(--un-transform)'],
     ]
   }
 }
@@ -132,39 +117,30 @@ function handleRotate([, d = '', b]: string[]): CSSValues | undefined {
   const v = h.bracket.cssvar.degree(b)
   if (v != null) {
     if (d) {
-      return [
-        transformBase,
-        {
-          '--un-rotate': 0,
-          [`--un-rotate-${d}`]: v,
-          'transform': 'var(--un-transform)',
-        },
-      ]
+      return {
+        '--un-rotate': 0,
+        [`--un-rotate-${d}`]: v,
+        'transform': 'var(--un-transform)',
+      }
     }
     else {
-      return [
-        transformBase,
-        {
-          '--un-rotate-x': 0,
-          '--un-rotate-y': 0,
-          '--un-rotate-z': 0,
-          '--un-rotate': v,
-          'transform': 'var(--un-transform)',
-        },
-      ]
+      return {
+        '--un-rotate-x': 0,
+        '--un-rotate-y': 0,
+        '--un-rotate-z': 0,
+        '--un-rotate': v,
+        'transform': 'var(--un-transform)',
+      }
     }
   }
 }
 
 function handleSkew([, d, b]: string[]): CSSValues | undefined {
   const v = h.bracket.cssvar.degree(b)
   if (v != null) {
-    return [
-      transformBase,
-      {
-        [`--un-skew-${d}`]: v,
-        transform: 'var(--un-transform)',
-      },
-    ]
+    return {
+      [`--un-skew-${d}`]: v,
+      transform: 'var(--un-transform)',
+    }
   }
 }

packages/preset-mini/src/theme/default.ts

@@ -4,6 +4,7 @@ import { borderRadius, boxShadow, breakpoints, duration, easing, lineWidth, ring
 import { blur, dropShadow } from './filters'
 import { height, maxHeight, maxWidth, width } from './size'
 import type { Theme } from './types'
+import { preflightBase } from './preflight'
 
 export const theme: Theme = {
   width,
@@ -38,4 +39,5 @@ export const theme: Theme = {
   spacing,
   duration,
   ringWidth,
+  preflightBase,
 }

packages/preset-mini/src/theme/index.ts

@@ -5,4 +5,5 @@ export * from './filters'
 export * from './font'
 export * from './misc'
 export * from './size'
+export * from './preflight'
 export * from './types'

packages/preset-mini/src/theme/preflight.ts

@@ -0,0 +1,5 @@
+import { transformBase } from '../rules'
+
+export const preflightBase = {
+  ...transformBase,
+}

packages/preset-mini/src/theme/types.ts

@@ -51,4 +51,7 @@ export interface Theme {
   gridRow?: Record<string, string>
   gridTemplateColumn?: Record<string, string>
   gridTemplateRow?: Record<string, string>
+  // vars
+  /** Used to generate CSS variables placeholder in preflight */
+  preflightBase?: Record<string, string | number>
 }

packages/preset-uno/src/index.ts

@@ -1,6 +1,7 @@
 import type { Preset } from '@unocss/core'
 import type { PresetMiniOptions, Theme } from '@unocss/preset-mini'
 import { rules, shortcuts, theme, variants } from '@unocss/preset-wind'
+import { preflights } from '@unocss/preset-mini'
 import { variantColorMix } from './variants/mix'
 
 export type { Theme }
@@ -21,6 +22,7 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset<Theme> => {
       variantColorMix,
     ],
     options,
+    preflights,
   }
 }
 

packages/preset-web-fonts/src/index.ts

@@ -67,7 +67,7 @@ const preset = (options: WebFontsOptions = {}): Preset<any> => {
   const preset: Preset<any> = {
     name: '@unocss/preset-web-fonts',
     layers: {
-      [layerName]: -Infinity,
+      [layerName]: -20,
     },
     preflights: [
       {

packages/preset-wind/src/index.ts

@@ -1,11 +1,12 @@
 import type { Preset } from '@unocss/core'
 import type { PresetMiniOptions, Theme } from '@unocss/preset-mini'
+import { preflights } from '@unocss/preset-mini'
 import { rules } from './rules'
 import { shortcuts } from './shortcuts'
 import { theme } from './theme'
 import { variants } from './variants'
 
-export { colors } from '@unocss/preset-mini'
+export { colors, preflights } from '@unocss/preset-mini'
 
 export type { Theme } from '@unocss/preset-mini'
 
@@ -24,6 +25,7 @@ export const presetWind = (options: PresetWindOptions = {}): Preset<Theme> => {
     shortcuts,
     variants: variants(options),
     options,
+    preflights,
   }
 }