feat(preset-mini): align with theme for zIndex (#3062)

unocss · Sep 2, 2023 · 965920a · 965920a
1 parent eff0866
commit 965920a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 2 deletions.
diff --git a/packages/preset-mini/src/_rules/position.ts b/packages/preset-mini/src/_rules/position.ts
@@ -159,7 +159,7 @@ export const floats: Rule[] = [
 
 export const zIndexes: Rule[] = [
   [/^(?:position-|pos-)?z([\d.]+)$/, ([, v]) => ({ 'z-index': h.number(v) })],
-  [/^(?:position-|pos-)?z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.global.auto.number(v) }), { autocomplete: 'z-<num>' }],
+  [/^(?:position-|pos-)?z-(.+)$/, ([, v], { theme }: RuleContext<Theme>) => ({ 'z-index': theme.zIndex?.[v] ?? h.bracket.cssvar.global.auto.number(v) }), { autocomplete: 'z-<num>' }],
 ]
 
 export const boxSizing: Rule[] = [

diff --git a/packages/preset-mini/src/_theme/default.ts b/packages/preset-mini/src/_theme/default.ts
@@ -1,6 +1,6 @@
 import { colors } from './colors'
 import { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, textIndent, textShadow, textStrokeWidth, wordSpacing } from './font'
-import { borderRadius, boxShadow, breakpoints, duration, easing, lineWidth, ringWidth, spacing, verticalBreakpoints } from './misc'
+import { borderRadius, boxShadow, breakpoints, duration, easing, lineWidth, ringWidth, spacing, verticalBreakpoints, zIndex } from './misc'
 import { blur, dropShadow } from './filters'
 import { containers, height, maxHeight, maxWidth, width } from './size'
 import type { Theme } from './types'
@@ -42,4 +42,5 @@ export const theme = {
   ringWidth,
   preflightBase,
   containers,
+  zIndex,
 } satisfies Theme
diff --git a/packages/preset-mini/src/_theme/misc.ts b/packages/preset-mini/src/_theme/misc.ts
@@ -81,3 +81,7 @@ export const ringWidth = {
   DEFAULT: '1px',
   none: '0',
 } satisfies Theme['ringWidth']
+
+export const zIndex = {
+  auto: 'auto',
+}
diff --git a/packages/preset-mini/src/_theme/types.ts b/packages/preset-mini/src/_theme/types.ts
@@ -45,6 +45,7 @@ export interface Theme {
   duration?: Record<string, string>
   aria?: Record<string, string>
   data?: Record<string, string>
+  zIndex?: Record<string, string>
   // filters
   blur?: Record<string, string>
   dropShadow?: Record<string, string | string[]>

diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -306,4 +306,22 @@ describe('preset-mini', () => {
       }"
     `)
   })
+
+  test('theme for zIndex', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        zIndex: {
+          header: '500',
+        },
+      },
+    })
+    expect((await uno.generate('z-header', { preflights: false })).css)
+      .toMatchInlineSnapshot(`
+        "/* layer: default */
+        .z-header{z-index:500;}"
+      `)
+  })
 })