Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(preset-mini): add css @layer support (#1024)
  • Loading branch information
chu121su12 committed May 30, 2022
1 parent 94672d7 commit dce832c
Show file tree
Hide file tree
Showing 11 changed files with 116 additions and 29 deletions.
64 changes: 64 additions & 0 deletions packages/preset-mini/README.md
Expand Up @@ -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)
6 changes: 4 additions & 2 deletions packages/preset-mini/src/variants/default.ts
Expand Up @@ -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,
Expand Down
15 changes: 14 additions & 1 deletion packages/preset-mini/src/variants/misc.ts
Expand Up @@ -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),
Expand Down
14 changes: 7 additions & 7 deletions test/__snapshots__/preset-attributify.test.ts.snap
Expand Up @@ -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\\"
Expand Down Expand Up @@ -82,8 +82,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\\"]",
Expand Down Expand Up @@ -201,8 +201,8 @@ exports[`attributify > fixture1 1`] = `
"/* layer: preflights */
*,::before,::after{--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
/* 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;}
Expand Down Expand Up @@ -313,8 +313,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",
Expand Down
10 changes: 8 additions & 2 deletions test/__snapshots__/preset-mini.test.ts.snap
Expand Up @@ -13,7 +13,7 @@ exports[`preset-mini > targets 1`] = `
"/* layer: preflights */
*,::before,::after{--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 */
.layer-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);}
.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);}
Expand Down Expand Up @@ -772,6 +772,12 @@ 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-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;}
}
Expand Down Expand Up @@ -811,5 +817,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;}"
`;
2 changes: 1 addition & 1 deletion test/__snapshots__/preset-wind.test.ts.snap
Expand Up @@ -34,7 +34,7 @@ exports[`preset-wind > targets 1`] = `
*,::before,::after{--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
/* 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);}
Expand Down
14 changes: 7 additions & 7 deletions test/__snapshots__/shortcuts.test.ts.snap
Expand Up @@ -147,8 +147,8 @@ exports[`shortcuts > variant order 3`] = `
"/* layer: preflights */
*,::before,::after{--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
/* 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));}"
`;
Expand All @@ -157,18 +157,18 @@ exports[`shortcuts > variant order 4`] = `
"/* layer: preflights */
*,::before,::after{--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
/* 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: preflights */
*,::before,::after{--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));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
/* 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));}"
`;
6 changes: 4 additions & 2 deletions test/assets/preset-mini-targets.ts
Expand Up @@ -793,8 +793,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',
Expand Down
2 changes: 1 addition & 1 deletion test/assets/preset-wind-targets.ts
Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions test/preset-attributify.test.ts
Expand Up @@ -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"
Expand Down Expand Up @@ -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,
}
`)

Expand Down
6 changes: 3 additions & 3 deletions test/shortcuts.test.ts
Expand Up @@ -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()
})

Expand Down

0 comments on commit dce832c

Please sign in to comment.