@unocss/transformer-directives 0.45.6 → 0.45.9

package/README.md

@@ -64,7 +64,7 @@ To use rules with `:`, you will need to quote the value
 }
 ```
 
-This feature is enabled by default (with prefix `--at-`), can you configure it or disable it via:
+This feature is enabled by default (with prefix `--at-`), you can configure it or disable it via:
 
 ```js
 transformerDirective({

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