@unocss/transformer-directives 0.45.8 → 0.45.13

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/dist/index.cjs

@@ -16,14 +16,16 @@ function transformerDirectives(options = {}) {
   };
 }
 const themeFnRE = /theme\((.*?)\)/g;
+const screenRuleRE = /(@screen) (.+) /g;
 async function transformDirectives(code, uno, options, filename, originalCode, offset) {
   const {
     varStyle = "--at-",
     throwOnMissing = true
   } = options;
   const isApply = code.original.includes("@apply") || varStyle !== false && code.original.includes(varStyle);
+  const isScreen = code.original.includes("@screen");
   const hasThemeFn = code.original.match(themeFnRE);
-  if (!isApply && !hasThemeFn)
+  if (!isApply && !hasThemeFn && !isScreen)
     return;
   const ast = cssTree.parse(originalCode || code.original, {
     parseAtrulePrelude: false,
@@ -123,8 +125,58 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
       }
     }
   };
+  const handleScreen = (node) => {
+    let breakpointName = "";
+    let prefix;
+    if (node.name === "screen" && node.prelude?.type === "Raw")
+      breakpointName = node.prelude.value.trim();
+    if (!breakpointName)
+      return;
+    const match = breakpointName.match(/^(?:(lt|at)-)?(\w+)$/);
+    if (match) {
+      prefix = match[1];
+      breakpointName = match[2];
+    }
+    const resolveBreakpoints = () => {
+      let breakpoints;
+      if (uno.userConfig && uno.userConfig.theme)
+        breakpoints = uno.userConfig.theme.breakpoints;
+      if (!breakpoints)
+        breakpoints = uno.config.theme.breakpoints;
+      return breakpoints;
+    };
+    const variantEntries = Object.entries(resolveBreakpoints() ?? {}).map(([point, size], idx) => [point, size, idx]);
+    const generateMediaQuery = (breakpointName2, prefix2) => {
+      const [, size, idx] = variantEntries.find((i) => i[0] === breakpointName2);
+      if (prefix2) {
+        if (prefix2 === "lt")
+          return `@media (max-width: ${calcMaxWidthBySize(size)})`;
+        else if (prefix2 === "at")
+          return `@media (min-width: ${size})${variantEntries[idx + 1] ? ` and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})` : ""}`;
+        else
+          throw new Error(`breakpoint variant not surpported: ${prefix2}`);
+      }
+      return `@media (min-width: ${size})`;
+    };
+    if (!variantEntries.find((i) => i[0] === breakpointName))
+      throw new Error(`breakpoint ${breakpointName} not found`);
+    const offset2 = node.loc.start.offset;
+    const str = code.original.slice(offset2, node.loc.end.offset);
+    const matches = Array.from(str.matchAll(screenRuleRE));
+    if (!matches.length)
+      return;
+    for (const match2 of matches) {
+      code.overwrite(
+        offset2 + match2.index,
+        offset2 + match2.index + match2[0].length,
+        `${generateMediaQuery(breakpointName, prefix)} `
+      );
+    }
+  };
   const stack = [];
   const processNode = async (node, _item, _list) => {
+    if (isScreen && node.type === "Atrule")
+      handleScreen(node);
     if (hasThemeFn && node.type === "Declaration")
       handleThemeFn(node);
     if (isApply && node.type === "Rule") {
@@ -140,6 +192,12 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   cssTree.walk(ast, (...args) => stack.push(processNode(...args)));
   await Promise.all(stack);
 }
+function calcMaxWidthBySize(size) {
+  const value = size.match(/^-?[0-9]+\.?[0-9]*/)?.[0] || "";
+  const unit = size.slice(value.length);
+  const maxWidth = parseFloat(value) - 0.1;
+  return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
+}
 
 exports["default"] = transformerDirectives;
 exports.transformDirectives = transformDirectives;

package/dist/index.mjs

@@ -12,14 +12,16 @@ function transformerDirectives(options = {}) {
   };
 }
 const themeFnRE = /theme\((.*?)\)/g;
+const screenRuleRE = /(@screen) (.+) /g;
 async function transformDirectives(code, uno, options, filename, originalCode, offset) {
   const {
     varStyle = "--at-",
     throwOnMissing = true
   } = options;
   const isApply = code.original.includes("@apply") || varStyle !== false && code.original.includes(varStyle);
+  const isScreen = code.original.includes("@screen");
   const hasThemeFn = code.original.match(themeFnRE);
-  if (!isApply && !hasThemeFn)
+  if (!isApply && !hasThemeFn && !isScreen)
     return;
   const ast = parse(originalCode || code.original, {
     parseAtrulePrelude: false,
@@ -119,8 +121,58 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
       }
     }
   };
+  const handleScreen = (node) => {
+    let breakpointName = "";
+    let prefix;
+    if (node.name === "screen" && node.prelude?.type === "Raw")
+      breakpointName = node.prelude.value.trim();
+    if (!breakpointName)
+      return;
+    const match = breakpointName.match(/^(?:(lt|at)-)?(\w+)$/);
+    if (match) {
+      prefix = match[1];
+      breakpointName = match[2];
+    }
+    const resolveBreakpoints = () => {
+      let breakpoints;
+      if (uno.userConfig && uno.userConfig.theme)
+        breakpoints = uno.userConfig.theme.breakpoints;
+      if (!breakpoints)
+        breakpoints = uno.config.theme.breakpoints;
+      return breakpoints;
+    };
+    const variantEntries = Object.entries(resolveBreakpoints() ?? {}).map(([point, size], idx) => [point, size, idx]);
+    const generateMediaQuery = (breakpointName2, prefix2) => {
+      const [, size, idx] = variantEntries.find((i) => i[0] === breakpointName2);
+      if (prefix2) {
+        if (prefix2 === "lt")
+          return `@media (max-width: ${calcMaxWidthBySize(size)})`;
+        else if (prefix2 === "at")
+          return `@media (min-width: ${size})${variantEntries[idx + 1] ? ` and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})` : ""}`;
+        else
+          throw new Error(`breakpoint variant not surpported: ${prefix2}`);
+      }
+      return `@media (min-width: ${size})`;
+    };
+    if (!variantEntries.find((i) => i[0] === breakpointName))
+      throw new Error(`breakpoint ${breakpointName} not found`);
+    const offset2 = node.loc.start.offset;
+    const str = code.original.slice(offset2, node.loc.end.offset);
+    const matches = Array.from(str.matchAll(screenRuleRE));
+    if (!matches.length)
+      return;
+    for (const match2 of matches) {
+      code.overwrite(
+        offset2 + match2.index,
+        offset2 + match2.index + match2[0].length,
+        `${generateMediaQuery(breakpointName, prefix)} `
+      );
+    }
+  };
   const stack = [];
   const processNode = async (node, _item, _list) => {
+    if (isScreen && node.type === "Atrule")
+      handleScreen(node);
     if (hasThemeFn && node.type === "Declaration")
       handleThemeFn(node);
     if (isApply && node.type === "Rule") {
@@ -136,5 +188,11 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   walk(ast, (...args) => stack.push(processNode(...args)));
   await Promise.all(stack);
 }
+function calcMaxWidthBySize(size) {
+  const value = size.match(/^-?[0-9]+\.?[0-9]*/)?.[0] || "";
+  const unit = size.slice(value.length);
+  const maxWidth = parseFloat(value) - 0.1;
+  return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
+}
 
 export { transformerDirectives as default, transformDirectives };

package/package.json

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