@unocss/transformer-directives 0.56.5 → 0.57.0

package/dist/index.cjs

@@ -6,45 +6,11 @@ const core = require('@unocss/core');
 const cssTree = require('css-tree');
 const ruleUtils = require('@unocss/rule-utils');
 
-const themeFnRE = /theme\((.*?)\)/g;
 function handleThemeFn({ code, uno, options }, node) {
   const { throwOnMissing = true } = options;
   const offset = node.value.loc.start.offset;
   const str = code.original.slice(offset, node.value.loc.end.offset);
-  const matches = Array.from(str.matchAll(themeFnRE));
-  if (!matches.length)
-    return;
-  for (const match of matches) {
-    const rawArg = match[1].trim();
-    if (!rawArg)
-      throw new Error("theme() expect exact one argument, but got 0");
-    const [rawKey, alpha] = rawArg.slice(1, -1).split("/");
-    let value = uno.config.theme;
-    const keys = rawKey.trim().split(".");
-    keys.every((key) => {
-      if (value[key] != null)
-        value = value[key];
-      else if (value[+key] != null)
-        value = value[+key];
-      else
-        return false;
-      return true;
-    });
-    if (typeof value === "string") {
-      if (alpha) {
-        const color = ruleUtils.parseCssColor(value);
-        if (color)
-          value = ruleUtils.colorToString(color, alpha);
-      }
-      code.overwrite(
-        offset + match.index,
-        offset + match.index + match[0].length,
-        value
-      );
-    } else if (throwOnMissing) {
-      throw new Error(`theme of "${rawArg.slice(1, -1)}" did not found`);
-    }
-  }
+  code.overwrite(offset, node.value.loc.end.offset, ruleUtils.transformThemeFn(str, uno.config.theme, throwOnMissing));
 }
 
 const screenRuleRE = /(@screen) (.+) /g;
@@ -66,9 +32,9 @@ function handleScreen({ code, uno }, node) {
       breakpoints = uno.userConfig.theme.breakpoints;
     if (!breakpoints)
       breakpoints = uno.config.theme.breakpoints;
-    return 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 = Object.entries(resolveBreakpoints() ?? {}).map(([point, size], idx) => [point, size, idx]);
+  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) {
@@ -194,7 +160,7 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   applyVariable = core.toArray(applyVariable || []);
   const hasApply = code.original.includes("@apply") || applyVariable.some((s) => code.original.includes(s));
   const hasScreen = code.original.includes("@screen");
-  const hasThemeFn = code.original.match(themeFnRE);
+  const hasThemeFn = ruleUtils.hasThemeFn(code.original);
   if (!hasApply && !hasThemeFn && !hasScreen)
     return;
   const ast = cssTree.parse(originalCode || code.original, {

package/dist/index.mjs

@@ -1,46 +1,12 @@
 import { expandVariantGroup, notNull, regexScopePlaceholder, cssIdRE, toArray } from '@unocss/core';
 import { generate, parse, clone, walk } from 'css-tree';
-import { parseCssColor, colorToString } from '@unocss/rule-utils';
+import { transformThemeFn, hasThemeFn } from '@unocss/rule-utils';
 
-const themeFnRE = /theme\((.*?)\)/g;
 function handleThemeFn({ code, uno, options }, node) {
   const { throwOnMissing = true } = options;
   const offset = node.value.loc.start.offset;
   const str = code.original.slice(offset, node.value.loc.end.offset);
-  const matches = Array.from(str.matchAll(themeFnRE));
-  if (!matches.length)
-    return;
-  for (const match of matches) {
-    const rawArg = match[1].trim();
-    if (!rawArg)
-      throw new Error("theme() expect exact one argument, but got 0");
-    const [rawKey, alpha] = rawArg.slice(1, -1).split("/");
-    let value = uno.config.theme;
-    const keys = rawKey.trim().split(".");
-    keys.every((key) => {
-      if (value[key] != null)
-        value = value[key];
-      else if (value[+key] != null)
-        value = value[+key];
-      else
-        return false;
-      return true;
-    });
-    if (typeof value === "string") {
-      if (alpha) {
-        const color = parseCssColor(value);
-        if (color)
-          value = colorToString(color, alpha);
-      }
-      code.overwrite(
-        offset + match.index,
-        offset + match.index + match[0].length,
-        value
-      );
-    } else if (throwOnMissing) {
-      throw new Error(`theme of "${rawArg.slice(1, -1)}" did not found`);
-    }
-  }
+  code.overwrite(offset, node.value.loc.end.offset, transformThemeFn(str, uno.config.theme, throwOnMissing));
 }
 
 const screenRuleRE = /(@screen) (.+) /g;
@@ -62,9 +28,9 @@ function handleScreen({ code, uno }, node) {
       breakpoints = uno.userConfig.theme.breakpoints;
     if (!breakpoints)
       breakpoints = uno.config.theme.breakpoints;
-    return 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 = Object.entries(resolveBreakpoints() ?? {}).map(([point, size], idx) => [point, size, idx]);
+  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) {
@@ -190,8 +156,8 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   applyVariable = toArray(applyVariable || []);
   const hasApply = code.original.includes("@apply") || applyVariable.some((s) => code.original.includes(s));
   const hasScreen = code.original.includes("@screen");
-  const hasThemeFn = code.original.match(themeFnRE);
-  if (!hasApply && !hasThemeFn && !hasScreen)
+  const hasThemeFn$1 = hasThemeFn(code.original);
+  if (!hasApply && !hasThemeFn$1 && !hasScreen)
     return;
   const ast = parse(originalCode || code.original, {
     parseAtrulePrelude: false,
@@ -212,7 +178,7 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   const processNode = async (node, _item, _list) => {
     if (hasScreen && node.type === "Atrule")
       handleScreen(ctx, node);
-    if (hasThemeFn && node.type === "Declaration")
+    if (hasThemeFn$1 && node.type === "Declaration")
       handleThemeFn(ctx, node);
     if (hasApply && node.type === "Rule")
       await handleApply(ctx, node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/transformer-directives",
-  "version": "0.56.5",
+  "version": "0.57.0",
   "description": "UnoCSS transformer for `@apply` directive",
   "author": "hannoeru <me@hanlee.co>",
   "license": "MIT",
@@ -33,11 +33,11 @@
   ],
   "dependencies": {
     "css-tree": "^2.3.1",
-    "@unocss/core": "0.56.5",
-    "@unocss/rule-utils": "0.56.5"
+    "@unocss/core": "0.57.0",
+    "@unocss/rule-utils": "0.57.0"
   },
   "devDependencies": {
-    "magic-string": "^0.30.3"
+    "magic-string": "^0.30.5"
   },
   "scripts": {
     "build": "unbuild",