@unocss/transformer-directives 0.62.2 → 0.62.4

package/README.md

@@ -11,9 +11,9 @@ npm i -D @unocss/transformer-directives
 ```
 
 ```ts
+import transformerDirectives from '@unocss/transformer-directives'
 // uno.config.ts
 import { defineConfig } from 'unocss'
-import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   // ...

package/dist/index.mjs

@@ -1,62 +1,6 @@
 import { expandVariantGroup, notNull, regexScopePlaceholder, toArray, cssIdRE } from '@unocss/core';
-import { generate, parse, clone, List, walk } from 'css-tree';
 import { transformThemeString, hasThemeFn } from '@unocss/rule-utils';
-
-const screenRuleRE = /(@screen [^{]+)(.+)/g;
-function handleScreen({ code, uno }, 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 ? Object.entries(breakpoints).sort((a, b) => Number.parseInt(a[1].replace(/[a-z]+/gi, "")) - Number.parseInt(b[1].replace(/[a-z]+/gi, ""))).map(([point, size]) => ({ point, size })) : void 0;
-  };
-  const variantEntries = (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 supported: ${prefix2}`);
-    }
-    return `@media (min-width: ${size})`;
-  };
-  if (!variantEntries.find((i) => i[0] === breakpointName))
-    throw new Error(`breakpoint ${breakpointName} not found`);
-  const offset = node.loc.start.offset;
-  const str = code.original.slice(offset, node.loc.end.offset);
-  const matches = Array.from(str.matchAll(screenRuleRE));
-  if (!matches.length)
-    return;
-  for (const match2 of matches) {
-    code.overwrite(
-      offset + match2.index,
-      offset + match2.index + match2[1].length,
-      `${generateMediaQuery(breakpointName, prefix)}`
-    );
-  }
-}
-function calcMaxWidthBySize(size) {
-  const value = size.match(/^-?\d+\.?\d*/)?.[0] || "";
-  const unit = size.slice(value.length);
-  const maxWidth = Number.parseFloat(value) - 0.1;
-  return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
-}
+import { generate, parse, clone, List, walk } from 'css-tree';
 
 async function handleApply(ctx, node) {
   const { code, uno, options, filename } = ctx;
@@ -98,7 +42,7 @@ async function parseApply({ code, uno, applyVariable }, node, childNode) {
   }, []);
   if (!utils.length)
     return;
-  const simicolonOffset = original[childNode.loc.end.offset] === ";" ? 1 : 0;
+  let simicolonOffset = original[childNode.loc.end.offset] === ";" ? 1 : original[childNode.loc.end.offset] === "@" ? -1 : 0;
   for (const i of utils) {
     const [, _selector, body2, parent] = i;
     const selectorOrGroup = _selector?.replace(regexScopePlaceholder, " ") || _selector;
@@ -110,7 +54,7 @@ async function parseApply({ code, uno, applyVariable }, node, childNode) {
           context: "rule"
         });
         const prelude = clone(node.prelude);
-        prelude.children.forEach((child) => {
+        prelude.children?.forEach((child) => {
           const selectorListAst = clone(ruleAST.prelude);
           const classSelectors = new List();
           selectorListAst.children.forEach((selectorAst) => {
@@ -124,10 +68,11 @@ async function parseApply({ code, uno, applyVariable }, node, childNode) {
       let css = `${newSelector.replace(/.\\-/g, className)}{${body2}}`;
       if (parent)
         css = `${parent}{${css}}`;
+      simicolonOffset = 0;
       code.appendLeft(node.loc.end.offset, css);
     } else {
       if (body2.includes("@"))
-        code.appendRight(original.length + simicolonOffset, body2);
+        code.appendRight(original.length, body2);
       else
         code.appendRight(childNode.loc.end.offset + simicolonOffset, body2);
     }
@@ -158,6 +103,62 @@ function handleFunction({ code, uno, options }, node) {
   }
 }
 
+const screenRuleRE = /(@screen [^{]+)(.+)/g;
+function handleScreen({ code, uno }, 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 ? Object.entries(breakpoints).sort((a, b) => Number.parseInt(a[1].replace(/[a-z]+/gi, "")) - Number.parseInt(b[1].replace(/[a-z]+/gi, ""))).map(([point, size]) => ({ point, size })) : void 0;
+  };
+  const variantEntries = (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 supported: ${prefix2}`);
+    }
+    return `@media (min-width: ${size})`;
+  };
+  if (!variantEntries.find((i) => i[0] === breakpointName))
+    throw new Error(`breakpoint ${breakpointName} not found`);
+  const offset = node.loc.start.offset;
+  const str = code.original.slice(offset, node.loc.end.offset);
+  const matches = Array.from(str.matchAll(screenRuleRE));
+  if (!matches.length)
+    return;
+  for (const match2 of matches) {
+    code.overwrite(
+      offset + match2.index,
+      offset + match2.index + match2[1].length,
+      `${generateMediaQuery(breakpointName, prefix)}`
+    );
+  }
+}
+function calcMaxWidthBySize(size) {
+  const value = size.match(/^-?\d+\.?\d*/)?.[0] || "";
+  const unit = size.slice(value.length);
+  const maxWidth = Number.parseFloat(value) - 0.1;
+  return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
+}
+
 async function transformDirectives(code, uno, options, filename, originalCode, offset) {
   let { applyVariable } = options;
   const varStyle = options.varStyle;
@@ -167,12 +168,13 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
     applyVariable = ["--at-apply", "--uno-apply", "--uno"];
   }
   applyVariable = toArray(applyVariable || []);
-  const hasApply = code.original.includes("@apply") || applyVariable.some((s) => code.original.includes(s));
-  const hasScreen = code.original.includes("@screen");
-  const hasThemeFn$1 = hasThemeFn(code.original);
+  const parseCode = originalCode || code.original;
+  const hasApply = parseCode.includes("@apply") || applyVariable.some((s) => parseCode.includes(s));
+  const hasScreen = parseCode.includes("@screen");
+  const hasThemeFn$1 = hasThemeFn(parseCode);
   if (!hasApply && !hasThemeFn$1 && !hasScreen)
     return;
-  const ast = parse(originalCode || code.original, {
+  const ast = parse(parseCode, {
     parseCustomProperty: true,
     parseAtrulePrelude: false,
     positions: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/transformer-directives",
   "type": "module",
-  "version": "0.62.2",
+  "version": "0.62.4",
   "description": "UnoCSS transformer for `@apply` directive",
   "author": "hannoeru <me@hanlee.co>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   ],
   "dependencies": {
     "css-tree": "^2.3.1",
-    "@unocss/rule-utils": "0.62.2",
-    "@unocss/core": "0.62.2"
+    "@unocss/rule-utils": "0.62.4",
+    "@unocss/core": "0.62.4"
   },
   "devDependencies": {
     "magic-string": "^0.30.11"