From dce832c2597f7536f19467bfb360f7f079ddfa94 Mon Sep 17 00:00:00 2001 From: Saya Date: Mon, 30 May 2022 12:44:07 +0800 Subject: [PATCH] feat(preset-mini): add css `@layer` support (#1024) --- packages/preset-mini/README.md | 64 +++++++++++++++++++ packages/preset-mini/src/variants/default.ts | 6 +- packages/preset-mini/src/variants/misc.ts | 15 ++++- .../preset-attributify.test.ts.snap | 14 ++-- test/__snapshots__/preset-mini.test.ts.snap | 10 ++- 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 +- 11 files changed, 116 insertions(+), 29 deletions(-) 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`] = ` "