@unocss/transformer-directives 0.62.4 → 0.63.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { expandVariantGroup, notNull, regexScopePlaceholder, toArray, cssIdRE } from '@unocss/core';
-import { transformThemeString, hasThemeFn } from '@unocss/rule-utils';
+import { transformThemeString, hasThemeFn, hasIconFn } from '@unocss/rule-utils';
 import { generate, parse, clone, List, walk } from 'css-tree';
 
 async function handleApply(ctx, node) {
@@ -89,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": {
@@ -99,6 +150,16 @@ 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;
     }
   }
 }
@@ -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.4",
+  "version": "0.63.1",
   "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/rule-utils": "0.62.4",
-    "@unocss/core": "0.62.4"
+    "css-tree": "^3.0.0",
+    "@unocss/rule-utils": "0.63.1",
+    "@unocss/core": "0.63.1"
   },
   "devDependencies": {
     "magic-string": "^0.30.11"