fix(preset-mini,preset-wind): rework more rules with base properties (#…

…1033) Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · May 30, 2022 · 6f695f6 · 6f695f6
1 parent de1817d
commit 6f695f6
Show file tree

Hide file tree

Showing 40 changed files with 170 additions and 227 deletions.
diff --git a/packages/preset-mini/src/rules/ring.ts b/packages/preset-mini/src/rules/ring.ts
@@ -1,30 +1,28 @@
 import type { Rule } from '@unocss/core'
-import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorResolver, handler as h } from '../utils'
 import { varEmpty } from './static'
 
+export const ringBase = {
+  '--un-ring-inset': varEmpty,
+  '--un-ring-offset-width': '0px',
+  '--un-ring-offset-color': '#fff',
+  '--un-ring-width': '0px',
+  '--un-ring-color': 'rgba(147,197,253,0.5)',
+  '--un-shadow': '0 0 #0000',
+}
+
 export const rings: Rule<Theme>[] = [
   // size
   [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
     const value = theme.ringWidth?.[d || 'DEFAULT'] ?? h.px(d || '1')
     if (value) {
-      return [
-        {
-          [CONTROL_SHORTCUT_NO_MERGE]: '',
-          '--un-ring-inset': varEmpty,
-          '--un-ring-offset-width': '0px',
-          '--un-ring-offset-color': '#fff',
-          '--un-ring-width': '0px',
-          '--un-ring-color': 'rgba(147,197,253,0.5)',
-        },
-        {
-          '--un-ring-width': value,
-          '--un-ring-offset-shadow': 'var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)',
-          '--un-ring-shadow': 'var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color)',
-          'box-shadow': 'var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)',
-        },
-      ]
+      return {
+        '--un-ring-width': value,
+        '--un-ring-offset-shadow': 'var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)',
+        '--un-ring-shadow': 'var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color)',
+        'box-shadow': 'var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)',
+      }
     }
   }, { autocomplete: 'ring-$ringWidth' }],
   [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ '--un-ring-width': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'ring-(width|size)-$lineWidth' }],

diff --git a/packages/preset-mini/src/rules/shadow.ts b/packages/preset-mini/src/rules/shadow.ts
@@ -1,24 +1,23 @@
 import type { Rule } from '@unocss/core'
-import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorResolver, colorableShadows, handler as h } from '../utils'
 import { varEmpty } from './static'
 
+export const boxShadowsBase = {
+  '--un-ring-offset-shadow': '0 0 #0000',
+  '--un-ring-shadow': '0 0 #0000',
+  '--un-shadow-inset': varEmpty,
+  '--un-shadow': '0 0 #0000',
+}
+
 export const boxShadows: Rule<Theme>[] = [
   [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
     const v = theme.boxShadow?.[d || 'DEFAULT']
     if (v) {
-      return [
-        {
-          [CONTROL_SHORTCUT_NO_MERGE]: '',
-          '--un-shadow-inset': varEmpty,
-          '--un-shadow': '0 0 #0000',
-        },
-        {
-          '--un-shadow': colorableShadows(v, '--un-shadow-color').join(','),
-          'box-shadow': 'var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)',
-        },
-      ]
+      return {
+        '--un-shadow': colorableShadows(v, '--un-shadow-color').join(','),
+        'box-shadow': 'var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)',
+      }
     }
   }, { autocomplete: 'shadow-$boxShadow' }],
 

diff --git a/packages/preset-mini/src/theme/preflight.ts b/packages/preset-mini/src/theme/preflight.ts
@@ -1,5 +1,7 @@
-import { transformBase } from '../rules'
+import { boxShadowsBase, ringBase, transformBase } from '../rules'
 
 export const preflightBase = {
   ...transformBase,
+  ...boxShadowsBase,
+  ...ringBase,
 }
diff --git a/packages/preset-wind/src/rules/scrolls.ts b/packages/preset-wind/src/rules/scrolls.ts
@@ -1,18 +1,18 @@
 import type { Rule } from '@unocss/core'
-import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core'
 import { directionSize } from '@unocss/preset-mini/utils'
 
+export const scrollSnapTypeBase = {
+  '--un-scroll-snap-strictness': 'proximity',
+}
+
 export const scrolls: Rule[] = [
   // snap type
-  [/^snap-(x|y|both)$/, ([, d]) => [
-    {
-      '--un-scroll-snap-strictness': 'proximity',
-      [CONTROL_SHORTCUT_NO_MERGE]: '',
-    },
-    {
-      'scroll-snap-type': `${d} var(--un-scroll-snap-strictness)`,
-    },
-  ], { autocomplete: 'snap-(x|y|both)' }],
+  [/^snap-(x|y)$/, ([, d]) => ({
+    'scroll-snap-type': `${d} var(--un-scroll-snap-strictness)`,
+  }), { autocomplete: 'snap-(x|y|both)' }],
+  [/^snap-both$/, () => ({
+    'scroll-snap-type': 'both var(--un-scroll-snap-strictness)',
+  })],
   ['snap-mandatory', { '--un-scroll-snap-strictness': 'mandatory' }],
   ['snap-proximity', { '--un-scroll-snap-strictness': 'proximity' }],
   ['snap-none', { 'scroll-snap-type': 'none' }],

diff --git a/packages/preset-wind/src/rules/touch-actions.ts b/packages/preset-wind/src/rules/touch-actions.ts
@@ -1,37 +1,27 @@
 import type { Rule } from '@unocss/core'
-import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core'
 import { varEmpty } from '@unocss/preset-mini/rules'
 
-const touchActionBase = {
+export const touchActionBase = {
   '--un-pan-x': varEmpty,
   '--un-pan-y': varEmpty,
   '--un-pinch-zoom': varEmpty,
   '--un-touch-action': 'var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)',
-  [CONTROL_SHORTCUT_NO_MERGE]: '',
 }
 
 export const touchActions: Rule[] = [
-  [/^touch-pan-(x|left|right)$/, ([, d]) => [
-    touchActionBase,
-    {
-      '--un-pan-x': `pan-${d}`,
-      'touch-action': 'var(--un-touch-action)',
-    },
-  ], { autocomplete: ['touch-pan', 'touch-pan-(x|left|right|y|up|down)'] }],
-  [/^touch-pan-(y|up|down)$/, ([, d]) => [
-    touchActionBase,
-    {
-      '--un-pan-y': `pan-${d}`,
-      'touch-action': 'var(--un-touch-action)',
-    },
-  ]],
-  [/^touch-pinch-zoom$/, () => [
-    touchActionBase,
-    {
-      '--un-pinch-zoom': 'pinch-zoom',
-      'touch-action': 'var(--un-touch-action)',
-    },
-  ], { autocomplete: ['touch-pinch', 'touch-pinch-zoom'] }],
+  [/^touch-pan-(x|left|right)$/, ([, d]) => ({
+    '--un-pan-x': `pan-${d}`,
+    'touch-action': 'var(--un-touch-action)',
+  }), { autocomplete: ['touch-pan', 'touch-pan-(x|left|right|y|up|down)'] }],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => ({
+    '--un-pan-y': `pan-${d}`,
+    'touch-action': 'var(--un-touch-action)',
+  })],
+  ['touch-pinch-zoom', {
+    '--un-pinch-zoom': 'pinch-zoom',
+    'touch-action': 'var(--un-touch-action)',
+  }],
+
   ['touch-auto', { 'touch-action': 'auto' }],
   ['touch-manipulation', { 'touch-action': 'manipulation' }],
   ['touch-none', { 'touch-action': 'none' }],

diff --git a/packages/preset-wind/src/rules/typography.ts b/packages/preset-wind/src/rules/typography.ts
@@ -1,24 +1,19 @@
 import type { Rule } from '@unocss/core'
-import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core'
 import { varEmpty } from '@unocss/preset-mini/rules'
 
-const fontVariantNumericBase = {
+export const fontVariantNumericBase = {
   '--un-ordinal': varEmpty,
   '--un-slashed-zero': varEmpty,
   '--un-numeric-figure': varEmpty,
   '--un-numeric-spacing': varEmpty,
   '--un-numeric-fraction': varEmpty,
   '--un-font-variant-numeric': 'var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)',
-  [CONTROL_SHORTCUT_NO_MERGE]: '',
 }
 
-const toEntries = (entry: any) => [
-  fontVariantNumericBase,
-  {
-    ...entry,
-    'font-variant-numeric': 'var(--un-font-variant-numeric)',
-  },
-]
+const toEntries = (entry: any) => ({
+  ...entry,
+  'font-variant-numeric': 'var(--un-font-variant-numeric)',
+})
 
 export const fontVariantNumeric: Rule[] = [
   [/^ordinal$/, () => toEntries({ '--un-ordinal': 'ordinal' }), { autocomplete: 'ordinal' }],

diff --git a/packages/preset-wind/src/theme.ts b/packages/preset-wind/src/theme.ts
@@ -1,7 +1,7 @@
 import type { Theme } from '@unocss/preset-mini'
-import { transformBase } from '@unocss/preset-mini/rules'
+import { boxShadowsBase, ringBase, transformBase } from '@unocss/preset-mini/rules'
 import { theme as miniTheme } from '@unocss/preset-mini/theme'
-import { backdropFilterBase, filterBase } from './rules'
+import { backdropFilterBase, filterBase, fontVariantNumericBase, scrollSnapTypeBase, touchActionBase } from './rules'
 
 export const theme: Theme = {
   ...miniTheme,
@@ -176,6 +176,11 @@ export const theme: Theme = {
   },
   preflightBase: {
     ...transformBase,
+    ...touchActionBase,
+    ...scrollSnapTypeBase,
+    ...fontVariantNumericBase,
+    ...boxShadowsBase,
+    ...ringBase,
     ...filterBase,
     ...backdropFilterBase,
   },

diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap
@@ -51,7 +51,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "space-": "space-block space-block-reverse space-inline space-inline-reverse space-x space-x-reverse space-y space-y-reverse",
   "text-r": "text-red text-revert text-revert-layer text-right text-rose",
   "text-red-": "text-red-1 text-red-2 text-red-3 text-red-4 text-red-5 text-red-6 text-red-7 text-red-8 text-red-9 text-red-50",
-  "touch-": "touch-auto touch-manipulation touch-none touch-pan touch-pinch touch-pinch-zoom",
+  "touch-": "touch-auto touch-manipulation touch-none touch-pan touch-pinch-zoom",
   "transition-": "transition-all transition-colors transition-none transition-opacity transition-shadow transition-transform",
   "v-": "v-base v-baseline v-bottom v-btm v-mid v-middle v-sub v-super v-text-bottom v-text-top",
   "w-": "w-2xl w-3xl w-4xl w-5xl w-6xl w-7xl w-auto w-lg w-md w-none",

diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap
@@ -2,16 +2,15 @@
 
 exports[`cli > builds uno.css 1`] = `
 "/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--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));--un-pan-x:var(--un-empty,/*!*/ /*!*/);--un-pan-y:var(--un-empty,/*!*/ /*!*/);--un-pinch-zoom:var(--un-empty,/*!*/ /*!*/);--un-touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);--un-scroll-snap-strictness:proximity;--un-ordinal:var(--un-empty,/*!*/ /*!*/);--un-slashed-zero:var(--un-empty,/*!*/ /*!*/);--un-numeric-figure:var(--un-empty,/*!*/ /*!*/);--un-numeric-spacing:var(--un-empty,/*!*/ /*!*/);--un-numeric-fraction:var(--un-empty,/*!*/ /*!*/);--un-font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
 /* layer: default */
 .max-w-screen-md{max-width:768px;}
 .p-4{padding:1rem;}"
 `;
 
 exports[`cli > supports unocss.config.js 1`] = `
 "/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--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));--un-pan-x:var(--un-empty,/*!*/ /*!*/);--un-pan-y:var(--un-empty,/*!*/ /*!*/);--un-pinch-zoom:var(--un-empty,/*!*/ /*!*/);--un-touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);--un-scroll-snap-strictness:proximity;--un-ordinal:var(--un-empty,/*!*/ /*!*/);--un-slashed-zero:var(--un-empty,/*!*/ /*!*/);--un-numeric-figure:var(--un-empty,/*!*/ /*!*/);--un-numeric-spacing:var(--un-empty,/*!*/ /*!*/);--un-numeric-fraction:var(--un-empty,/*!*/ /*!*/);--un-font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
 /* layer: shortcuts */
-.box{--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;}
 .box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);}"
 `;
diff --git a/test/__snapshots__/order.test.ts.snap b/test/__snapshots__/order.test.ts.snap
@@ -3,9 +3,7 @@
 exports[`order > movePseudoElementsEnd 1`] = `".marker\\\\:file\\\\:hover\\\\:selection\\\\:mb-4:hover::marker::file-selector-button::selection"`;
 
 exports[`order > multiple variant sorting 1`] = `
-"/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--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));}
-/* layer: default */
+"/* layer: default */
 .dark .group:hover:focus-within .dark\\\\:group-hover\\\\:group-focus-within\\\\:bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 .group:hover:focus-within .dark .group-hover\\\\:group-focus-within\\\\:dark\\\\:bg-red-600{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}"
 `;