@unocss/preset-mini 0.35.2 → 0.36.0

package/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)

package/dist/chunks/default.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const colors = require('./colors.cjs');
+const transform = require('./transform.cjs');
 
 const fontFamily = {
   sans: [
@@ -224,6 +225,10 @@ const maxHeight = {
   screen: "100vh"
 };
 
+const preflightBase = {
+  ...transform.transformBase
+};
+
 const theme = {
   width,
   height,
@@ -256,7 +261,8 @@ const theme = {
   lineWidth,
   spacing,
   duration,
-  ringWidth
+  ringWidth,
+  preflightBase
 };
 
 exports.baseSize = baseSize;
@@ -275,6 +281,7 @@ exports.lineHeight = lineHeight;
 exports.lineWidth = lineWidth;
 exports.maxHeight = maxHeight;
 exports.maxWidth = maxWidth;
+exports.preflightBase = preflightBase;
 exports.ringWidth = ringWidth;
 exports.spacing = spacing;
 exports.textIndent = textIndent;

package/dist/chunks/default.mjs

@@ -1,4 +1,5 @@
 import { c as colors } from './colors.mjs';
+import { t as transformBase } from './transform.mjs';
 
 const fontFamily = {
   sans: [
@@ -222,6 +223,10 @@ const maxHeight = {
   screen: "100vh"
 };
 
+const preflightBase = {
+  ...transformBase
+};
+
 const theme = {
   width,
   height,
@@ -254,7 +259,8 @@ const theme = {
   lineWidth,
   spacing,
   duration,
-  ringWidth
+  ringWidth,
+  preflightBase
 };
 
-export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, lineWidth as j, duration as k, lineHeight as l, borderRadius as m, boxShadow as n, easing as o, baseSize as p, width as q, ringWidth as r, spacing as s, theme as t, maxWidth as u, verticalBreakpoints as v, wordSpacing as w, height as x, maxHeight as y };
+export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, lineWidth as j, duration as k, lineHeight as l, borderRadius as m, boxShadow as n, easing as o, baseSize as p, width as q, ringWidth as r, spacing as s, theme as t, maxWidth as u, verticalBreakpoints as v, wordSpacing as w, height as x, maxHeight as y, preflightBase as z };