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
+
+```
+
+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
+
+```
+
+```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
+
+
+```
+
+will generate:
+
+```css
+@layer foo {
+ .layer-foo\:p4 {
+ padding: 1rem;
+ }
+}
+@layer bar {
+ .layer-bar\:m4 {
+ margin: 1rem;
+ }
+}
+```
+
## License
MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)
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[] => [
+ 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 9bf455a25a..9e873ac08b 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`] = `
"