@unocss/transformer-directives 0.45.9 → 0.45.14

package/README.md

@@ -2,7 +2,7 @@
 
 <!-- @unocss-ignore -->
 
-UnoCSS transformer for `@apply` and `theme()` directive
+UnoCSS transformer for `@apply`、`@screen` and `theme()` directive
 
 ## Install
 
@@ -44,8 +44,6 @@ Will be transformed to:
 }
 ```
 
-> Currently only `@apply` is supported.
-
 #### CSS Variable Style
 
 To be compatible with vanilla CSS, you can use CSS Variables to replace the `@apply` directive.
@@ -74,6 +72,139 @@ transformerDirective({
 })
 ```
 
+### `@screen`
+
+The `@screen` directive allows you to create media queries that reference your breakpoints by name comes from [`theme.breakpoints`](https://github.com/unocss/unocss/blob/main/README.md#extend-theme).
+
+```css
+.grid {
+  @apply grid grid-cols-2;
+}
+@screen xs {
+  .grid {
+    @apply grid-cols-1;
+  }
+}
+@screen sm {
+  .grid {
+    @apply grid-cols-3;
+  }
+}
+/* ... */
+...
+```
+
+Will be transformed to:
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+@media (min-width: 320px) {
+  .grid {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+/* ... */
+```
+
+#### Breakpoint Variant Support
+`@screen` also supports `lt`、`at` variants
+
+##### `@screen lt`
+
+```css
+.grid {
+  @apply grid grid-cols-2;
+}
+@screen lt-xs {
+  .grid {
+    @apply grid-cols-1;
+  }
+}
+@screen lt-sm {
+  .grid {
+    @apply grid-cols-3;
+  }
+}
+/* ... */
+```
+
+Will be transformed to:
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+@media (max-width: 319.9px) {
+  .grid {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+@media (max-width: 639.9px) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+/* ... */
+```
+
+##### `@screen at`
+
+```css
+.grid {
+  @apply grid grid-cols-2;
+}
+@screen at-xs {
+  .grid {
+    @apply grid-cols-1;
+  }
+}
+@screen at-xl {
+  .grid {
+    @apply grid-cols-3;
+  }
+}
+@screen at-xxl {
+  .grid {
+    @apply grid-cols-4;
+  }
+}
+/* ... */
+```
+
+Will be transformed to:
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+@media (min-width: 320px) and (max-width: 639.9px) {
+  .grid {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1280px) and (max-width: 1535.9px) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1536px) {
+  .grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+/* ... */
+```
+
 ### `theme()`
 
 Use the `theme()` function to access your theme config values using dot notation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/transformer-directives",
-  "version": "0.45.9",
+  "version": "0.45.14",
   "description": "UnoCSS transformer for `@apply` directive",
   "author": "hannoeru <me@hanlee.co>",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "0.45.9",
+    "@unocss/core": "0.45.14",
     "css-tree": "^2.2.1"
   },
   "devDependencies": {