@unocss/transformer-directives 0.62.3 → 0.63.0

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 { transformThemeString, hasThemeFn, hasIconFn } from '@unocss/rule-utils';
 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}`;
-}
 
 async function handleApply(ctx, node) {
   const { code, uno, options, filename } = ctx;
@@ -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) => {
@@ -145,7 +89,58 @@ function removeComments(value) {
   return value.replace(/(\/\*(?:.|\n)*?\*\/)|(\/\/.*)/g, "");
 }
 
-function handleFunction({ code, uno, options }, node) {
+async function transformIconString(uno, icon, color) {
+  const presetIcons = uno.userConfig.presets?.flat()?.findLast((i) => i.name === "@unocss/preset-icons");
+  if (!presetIcons) {
+    console.warn("@unocss/preset-icons not found, icon() directive will be keep as-is");
+    return;
+  }
+  const {
+    scale = 1,
+    prefix = "i-",
+    collections: customCollections,
+    extraProperties = {},
+    customizations = {},
+    autoInstall = false,
+    collectionsNodeResolvePath,
+    unit
+  } = presetIcons.options;
+  const api = presetIcons.api;
+  const loaderOptions = {
+    addXmlNs: true,
+    scale,
+    customCollections,
+    autoInstall,
+    cwd: collectionsNodeResolvePath,
+    // avoid warn from @iconify/loader: we'll warn below if not found
+    warn: void 0,
+    customizations: {
+      ...customizations,
+      additionalProps: { ...extraProperties },
+      trimCustomSvg: true,
+      async iconCustomizer(collection, icon2, props) {
+        await customizations.iconCustomizer?.(collection, icon2, props);
+        if (unit) {
+          if (!props.width)
+            props.width = `${scale}${unit}`;
+          if (!props.height)
+            props.height = `${scale}${unit}`;
+        }
+      }
+    }
+  };
+  const loader = await api.createNodeLoader?.() || (async () => void 0);
+  for (const p of toArray(prefix)) {
+    if (icon.startsWith(p)) {
+      icon = icon.slice(p.length);
+      const parsed = await api.parseIconWithLoader(icon, loader, loaderOptions);
+      if (parsed)
+        return `url("data:image/svg+xml;utf8,${color ? api.encodeSvgForCss(parsed.svg).replace(/currentcolor/gi, color) : api.encodeSvgForCss(parsed.svg)}")`;
+    }
+  }
+}
+
+async function handleFunction({ code, uno, options }, node) {
   const { throwOnMissing = true } = options;
   switch (node.name) {
     case "theme": {
@@ -155,9 +150,75 @@ function handleFunction({ code, uno, options }, node) {
       const value = transformThemeString(themeStr, uno.config.theme, throwOnMissing);
       if (value)
         code.overwrite(node.loc.start.offset, node.loc.end.offset, value);
+      break;
+    }
+    case "icon": {
+      const params = node.children.toArray().filter((i) => i.type === "String").map((i) => i.value);
+      if (params.length === 0)
+        throw new Error("icon() expects at least one argument");
+      const value = await transformIconString(uno, ...params);
+      if (value)
+        code.overwrite(node.loc.start.offset, node.loc.end.offset, value);
+      break;
+    }
+  }
+}
+
+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;
@@ -171,8 +232,8 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   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)
+  const hasFn = hasThemeFn(parseCode) || hasIconFn(parseCode);
+  if (!hasApply && !hasFn && !hasScreen)
     return;
   const ast = parse(parseCode, {
     parseCustomProperty: true,
@@ -196,7 +257,7 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
     if (hasScreen && node.type === "Atrule")
       handleScreen(ctx, node);
     if (node.type === "Function")
-      handleFunction(ctx, node);
+      await handleFunction(ctx, node);
     if (hasApply && node.type === "Rule")
       await handleApply(ctx, node);
   };

package/package.json

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