docs: update the outputToCssLayers example (#3865)

unocss · Jun 8, 2024 · 301ef3c · 301ef3c
1 parent 6d94efc
commit 301ef3c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/docs/config/layers.md b/docs/config/layers.md
@@ -84,15 +84,17 @@ outputToCssLayers: true
 You can change the CSS Layer names with:
 
 ```ts
-outputToCssLayers: (layer) => {
-  // The default layer will be output to the "utilities" CSS layer.
-  if (layer === 'default')
-    return 'utilities'
-
-  // The shortcuts layer will be output to the "shortcuts" sublayer the of "utilities" CSS layer.
-  if (layer === 'shortcuts')
-    return 'utilities.shortcuts'
-
-  // All other layers will just use their name as the CSS layer name.
+outputToCssLayers: {
+  cssLayerName: (layer) => {
+    // The default layer will be output to the "utilities" CSS layer.
+    if (layer === 'default')
+      return 'utilities'
+
+    // The shortcuts layer will be output to the "shortcuts" sublayer the of "utilities" CSS layer.
+    if (layer === 'shortcuts')
+      return 'utilities.shortcuts'
+
+    // All other layers will just use their name as the CSS layer name.
+  }
 }
 ```
diff --git a/test/__snapshots__/use-css-layer.test.ts.snap b/test/__snapshots__/use-css-layer.test.ts.snap
@@ -1,5 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`use-css-layer > change layer name 1`] = `
+"/* layer: shortcuts */
+@layer utilities.shortcuts{
+.custom-shortcut{font-size:1.125rem;line-height:1.75rem;--un-text-opacity:1;color:rgb(251 146 60 / var(--un-text-opacity));}
+.custom-shortcut:hover{--un-text-opacity:1;color:rgb(45 212 191 / var(--un-text-opacity));}
+}
+/* layer: default */
+@layer utilities{
+.h-1{height:0.25rem;}
+.w-1{width:0.25rem;}
+}"
+`;
+
 exports[`use-css-layer > static 1`] = `
 "/* layer: shortcuts */
 @layer shortcuts{

diff --git a/test/use-css-layer.test.ts b/test/use-css-layer.test.ts
@@ -1,5 +1,6 @@
 import { createGenerator } from '@unocss/core'
 import { describe, expect, it } from 'vitest'
+import presetUno from '@unocss/preset-uno'
 
 describe('use-css-layer', () => {
   it('static', async () => {
@@ -20,4 +21,24 @@ describe('use-css-layer', () => {
     const { css } = await uno.generate('a b abc abcd d4 c5', { preflights: false })
     expect(css).toMatchSnapshot()
   })
+
+  it('change layer name', async () => {
+    const uno = createGenerator({
+      presets: [presetUno()],
+      shortcuts: {
+        'custom-shortcut': 'text-lg text-orange hover:text-teal',
+      },
+      outputToCssLayers: {
+        cssLayerName: (layer: string) => {
+          if (layer === 'default')
+            return 'utilities'
+
+          if (layer === 'shortcuts')
+            return 'utilities.shortcuts'
+        },
+      },
+    })
+    const { css } = await uno.generate('w-1 h-1 custom-shortcut', { preflights: false })
+    expect(css).toMatchSnapshot()
+  })
 })