From 63ded1bf8936f8ea6958b8083d2676d1506909dc Mon Sep 17 00:00:00 2001
From: Saya <chu121su12@gmail.com>
Date: Sun, 29 May 2022 21:51:17 +0800
Subject: [PATCH 1/2] feat(preset-mini)!: add css `@layer` support

---
 packages/preset-mini/src/variants/default.ts      |  6 ++++--
 packages/preset-mini/src/variants/misc.ts         | 15 ++++++++++++++-
 .../__snapshots__/preset-attributify.test.ts.snap | 14 +++++++-------
 test/__snapshots__/preset-mini.test.ts.snap       | 13 ++++++++++---
 test/__snapshots__/preset-wind.test.ts.snap       |  2 +-
 test/__snapshots__/shortcuts.test.ts.snap         | 14 +++++++-------
 test/assets/preset-mini-targets.ts                |  6 ++++--
 test/assets/preset-wind-targets.ts                |  2 +-
 test/preset-attributify.test.ts                   |  6 +++---
 test/shortcuts.test.ts                            |  6 +++---
 10 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/packages/preset-mini/src/variants/default.ts b/packages/preset-mini/src/variants/default.ts
index 81d5dfe6b9..9813560b54 100644
--- a/packages/preset-mini/src/variants/default.ts
+++ b/packages/preset-mini/src/variants/default.ts
@@ -5,13 +5,15 @@ import { variantBreakpoints } from './breakpoints'
 import { variantCombinators } from './combinators'
 import { variantColorsMediaOrClass } from './dark'
 import { variantLanguageDirections } from './directions'
-import { variantImportant, variantLayer, variantNegative, variantScope, variantSelector } from './misc'
+import { variantCssLayer, variantImportant, variantInternalLayer, variantNegative, variantScope, variantSelector } from './misc'
 import { variantCustomMedia, variantPrint } from './media'
 import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
 
 export const variants = (options: PresetMiniOptions): Variant<Theme>[] => [
+  variantCssLayer,
+
   variantSelector,
-  variantLayer,
+  variantInternalLayer,
   variantNegative,
   variantImportant,
   variantPrint,
diff --git a/packages/preset-mini/src/variants/misc.ts b/packages/preset-mini/src/variants/misc.ts
index 26e02630ca..b0591de95d 100644
--- a/packages/preset-mini/src/variants/misc.ts
+++ b/packages/preset-mini/src/variants/misc.ts
@@ -14,10 +14,23 @@ export const variantSelector: Variant = {
   },
 }
 
-export const variantLayer: Variant = {
+export const variantCssLayer: Variant = {
   name: 'layer',
   match(matcher) {
     const match = matcher.match(/^layer-([_\d\w]+)[:-]/)
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        parent: `@layer ${match[1]}`,
+      }
+    }
+  },
+}
+
+export const variantInternalLayer: Variant = {
+  name: 'uno-layer',
+  match(matcher) {
+    const match = matcher.match(/^uno-layer-([_\d\w]+)[:-]/)
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
index 67d190187e..d8961552ba 100644
--- a/test/__snapshots__/preset-attributify.test.ts.snap
+++ b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`attributify > autocomplete extractor 5`] = `
 "
 <button
-  layer-base=\\"c-white/10 hover:c-black/20\\"
+  uno-layer-base=\\"c-white/10 hover:c-black/20\\"
   sm=\\"[color:red]\\"
   md=\\"[--var:var(--another)]\\"
   lg=\\"bg-blue-600\\"
@@ -80,8 +80,8 @@ exports[`attributify > compatible with full controlled rules 1`] = `
 
 exports[`attributify > extractor1 1`] = `
 Set {
-  "[layer-base~=\\"c-white/10\\"]",
-  "[layer-base~=\\"hover:c-black/20\\"]",
+  "[uno-layer-base~=\\"c-white/10\\"]",
+  "[uno-layer-base~=\\"hover:c-black/20\\"]",
   "[sm~=\\"[color:red]\\"]",
   "[md~=\\"[--var:var(--another)]\\"]",
   "[lg~=\\"bg-blue-600\\"]",
@@ -197,8 +197,8 @@ Set {
 
 exports[`attributify > fixture1 1`] = `
 "/* layer: base */
-[layer-base~=\\"c-white\\\\/10\\"]{color:rgba(255,255,255,0.1);}
-[layer-base~=\\"hover\\\\:c-black\\\\/20\\"]:hover{color:rgba(0,0,0,0.2);}
+[uno-layer-base~=\\"c-white\\\\/10\\"]{color:rgba(255,255,255,0.1);}
+[uno-layer-base~=\\"hover\\\\:c-black\\\\/20\\"]:hover{color:rgba(0,0,0,0.2);}
 /* layer: default */
 .absolute{position:absolute;}
 .fixed{position:fixed;}
@@ -315,8 +315,8 @@ exports[`attributify > fixture2 1`] = `
 
 exports[`attributify > variant 1`] = `
 [
-  "layer-base-c-white/10",
-  "hover:layer-base-c-black/20",
+  "uno-layer-base-c-white/10",
+  "hover:uno-layer-base-c-black/20",
   "sm-[color:red]",
   "md-[--var:var(--another)]",
   "lg-bg-blue-600",
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index a6ebeb5c23..f58abdeb43 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -10,8 +10,8 @@ exports[`preset-mini > custom var prefix 1`] = `
 
 exports[`preset-mini > targets 1`] = `
 "/* layer: 1 */
-.layer-1\\\\:translate-0{--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-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);}
+.uno-layer-1\\\\:translate-0{--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));}
+.uno-layer-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);}
 /* layer: default */
 .fw-\\\\$variable{font-weight:var(--variable);}
 .items-\\\\$size{align-items:var(--size);}
@@ -810,6 +810,13 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .will-change-scroll{will-change:scroll-position;}
 .will-change-transform{will-change:transform;}
 .will-change-unset{will-change:unset;}
+@layer base{
+.layer-base\\\\:translate-0{--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-base\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);}
+}
+@layer utility{
+.layer-utility\\\\:block{display:block;}
+}
 @media (--cssvar){
 .media-cssvar\\\\:block{display:block;}
 }
@@ -849,5 +856,5 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .at-2xl\\\\:m2{margin:0.5rem;}
 }
 /* layer: uno_css */
-.layer-uno_css\\\\:block{display:block;}"
+.uno-layer-uno_css\\\\:block{display:block;}"
 `;
diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap
index b8ba733bd6..f728d2c068 100644
--- a/test/__snapshots__/preset-wind.test.ts.snap
+++ b/test/__snapshots__/preset-wind.test.ts.snap
@@ -30,7 +30,7 @@ exports[`preset-wind > containers 1`] = `
 exports[`preset-wind > targets 1`] = `
 "/* layer: _pre */
 @media (prefers-contrast: less){
-.layer-_pre\\\\:contrast-less\\\\:bg-gray-3{--un-bg-opacity:1;background-color:rgba(209,213,219,var(--un-bg-opacity));}
+.uno-layer-_pre\\\\:contrast-less\\\\:bg-gray-3{--un-bg-opacity:1;background-color:rgba(209,213,219,var(--un-bg-opacity));}
 }
 /* layer: default */
 .bg-blend-\\\\$data{background-blend-mode:var(--data);}
diff --git a/test/__snapshots__/shortcuts.test.ts.snap b/test/__snapshots__/shortcuts.test.ts.snap
index af2d5a1d2e..98960a2908 100644
--- a/test/__snapshots__/shortcuts.test.ts.snap
+++ b/test/__snapshots__/shortcuts.test.ts.snap
@@ -104,24 +104,24 @@ exports[`shortcuts > variant order 2`] = `
 
 exports[`shortcuts > variant order 3`] = `
 "/* layer: shortcuts */
-.layer-shortcuts\\\\:bg-red-300,
-.shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
+.shortcut-hover-active-2:focus,
+.uno-layer-shortcuts\\\\:bg-red-300{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
 .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
 .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}"
 `;
 
 exports[`shortcuts > variant order 4`] = `
 "/* layer: shortcuts */
-.layer-shortcuts\\\\:bg-yellow-300,
-.shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
 .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
+.shortcut-hover-active-2:hover,
+.uno-layer-shortcuts\\\\:bg-yellow-300{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
 .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}"
 `;
 
 exports[`shortcuts > variant order 5`] = `
 "/* layer: shortcuts */
-.layer-shortcuts\\\\:bg-blue-300,
-.shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}
 .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
-.shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}"
+.shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
+.uno-layer-shortcuts\\\\:bg-blue-300,
+.shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}"
 `;
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
index 2c9b60d346..2b68d75f1b 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -790,8 +790,10 @@ export const presetMiniTargets: string[] = [
   'light:text-sm',
 
   // variants layer
-  'layer-1:translate-0',
-  'layer-uno_css:block',
+  'uno-layer-1:translate-0',
+  'uno-layer-uno_css:block',
+  'layer-base:translate-0',
+  'layer-utility:block',
 
   // variants misc
   '-rotate-2',
diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts
index be3a291467..b323c3548d 100644
--- a/test/assets/preset-wind-targets.ts
+++ b/test/assets/preset-wind-targets.ts
@@ -339,7 +339,7 @@ export const presetWindTargets: string[] = [
 
   // variants media: contrasts, motions, orientations
   'contrast-more:bg-black',
-  'layer-_pre:contrast-less:bg-gray-3',
+  'uno-layer-_pre:contrast-less:bg-gray-3',
   'motion-reduce:hover:translate-0',
   'motion-safe:transition',
   'portrait:hidden',
diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts
index 19c96be1d1..6e23c3c12e 100644
--- a/test/preset-attributify.test.ts
+++ b/test/preset-attributify.test.ts
@@ -6,7 +6,7 @@ import { describe, expect, test } from 'vitest'
 describe('attributify', () => {
   const fixture1 = `
 <button
-  layer-base="c-white/10 hover:c-black/20"
+  uno-layer-base="c-white/10 hover:c-black/20"
   sm="[color:red]"
   md="[--var:var(--another)]"
   lg="bg-blue-600"
@@ -162,9 +162,9 @@ describe('attributify', () => {
     const reversed = res!.resolveReplacement(`${res!.extracted}1`)
     expect(reversed).toMatchInlineSnapshot(`
       {
-        "end": 189,
+        "end": 193,
         "replacement": "blue-4001",
-        "start": 181,
+        "start": 185,
       }
     `)
 
diff --git a/test/shortcuts.test.ts b/test/shortcuts.test.ts
index 63df3baf8f..23b1fe4057 100644
--- a/test/shortcuts.test.ts
+++ b/test/shortcuts.test.ts
@@ -81,17 +81,17 @@ describe('shortcuts', () => {
   })
 
   test('variant order', async () => {
-    const { css } = await uno.generate('shortcut-hover-active-2 layer-shortcuts:bg-red-300')
+    const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-red-300')
     expect(css).toMatchSnapshot()
   })
 
   test('variant order', async () => {
-    const { css } = await uno.generate('shortcut-hover-active-2 layer-shortcuts:bg-yellow-300')
+    const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-yellow-300')
     expect(css).toMatchSnapshot()
   })
 
   test('variant order', async () => {
-    const { css } = await uno.generate('shortcut-hover-active-2 layer-shortcuts:bg-blue-300')
+    const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-blue-300')
     expect(css).toMatchSnapshot()
   })
 

From adc7e348fd1aedb137ff5ab50ee1212cd41fd4bf Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 30 May 2022 12:09:06 +0800
Subject: [PATCH 2/2] docs: update

---
 packages/preset-mini/README.md | 64 ++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/packages/preset-mini/README.md b/packages/preset-mini/README.md
index 94df736502..716be20fd6 100644
--- a/packages/preset-mini/README.md
+++ b/packages/preset-mini/README.md
@@ -18,6 +18,70 @@ Unocss({
 })
 ```
 
+## Features
+
+### Dark Mode
+
+By default, this preset generates class based dark mode with `dark:` variant.
+
+```html
+<div class="dark:bg-red:10" />
+```
+
+will generate:
+
+```css
+.dark .dark\:bg-red\:10 {
+  background-color: rgba(248, 113, 113, 0.1);
+}
+```
+
+To opt-in media query based dark mode, you can use `@dark:` variant:
+
+```html
+<div class="@dark:bg-red:10" />
+```
+
+```css
+@media (prefers-color-scheme: dark) {
+  .\@dark\:bg-red\:10 {
+    background-color: rgba(248, 113, 113, 0.1);
+  }
+}
+```
+
+Or set globally with the config for `dark:` variant
+
+```ts
+presetMini({
+  dark: 'media'
+})
+```
+
+### CSS @layer
+
+[CSS's native @layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is supported with variant `layer-xx:`
+
+```html
+<div class="layer-foo:p4" />
+<div class="layer-bar:m4" />
+```
+
+will generate:
+
+```css
+@layer foo {
+  .layer-foo\:p4 {
+    padding: 1rem;
+  }
+}
+@layer bar {
+  .layer-bar\:m4 {
+    margin: 1rem;
+  }
+}
+```
+
 ## License
 
 MIT License &copy; 2021-PRESENT [Anthony Fu](https://github.com/antfu)