@una-ui/extractor-vue-script 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/index.mjs

@@ -1,33 +1,138 @@
+import * as babel from '@babel/types';
 import { defaultSplitRE } from '@unocss/core';
+import { transform, NodeTypes } from '@vue/compiler-core';
+import { parse } from '@vue/compiler-sfc';
+import { parseModule } from 'magicast';
+import { parsePath } from 'ufo';
 
 function generateSelectors(prefix, values) {
   prefix = prefix.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
   return values.filter((v) => Boolean(v) && v !== ":").map((v) => `[${prefix}~="${v}"]`);
 }
-function splitCodeWithArbitraryVariants(code, prefixes) {
-  const result = [];
+function normalizePrefixes(prefixes) {
   const camelCasePrefixes = prefixes.map((prefix) => prefix.replace(/-([a-z])/g, (_, c) => c.toUpperCase()));
-  prefixes = [.../* @__PURE__ */ new Set([...prefixes, ...camelCasePrefixes])];
-  for (const prefix of prefixes) {
-    const regex = new RegExp(`\\b${prefix}\\s*:\\s*(?:['"]([^'"]*)['"]|{[^}]*\\bdefault\\s*:\\s*['"]([^'"]*)['"]\\s*,?.*?})`, "gms");
-    let match;
-    while (true) {
-      match = regex.exec(code);
-      if (match === null)
-        break;
-      const values = (match[1] ?? match[2]).split(defaultSplitRE);
-      const selectors = generateSelectors(prefix, values);
-      result.push(...selectors);
+  return [.../* @__PURE__ */ new Set([...prefixes, ...camelCasePrefixes])];
+}
+function getLiteralValue(node) {
+  if (node.type === "ConditionalExpression") {
+    return [node.consequent, node.alternate].map(getLiteralValue);
+  }
+  if (node.type === "StringLiteral") {
+    return node.value;
+  }
+  if (node.type === "TemplateLiteral") {
+    if (node.expressions.length > 0) {
+      return void 0;
     }
+    return node.quasis.map((q) => q.value.cooked).join("");
+  }
+  if (node.type === "ObjectExpression") {
+    return getObjectLiteralValue(node);
   }
-  return result;
+  return void 0;
+}
+function getObjectLiteralValue(node) {
+  return Object.fromEntries(
+    node.properties.filter((prop) => prop.type === "ObjectProperty").flatMap((prop) => {
+      const key = prop.key.type === "Identifier" ? prop.key.name : prop.key.type === "StringLiteral" ? prop.key.value : null;
+      if (!key) {
+        return [];
+      }
+      return [[key, getLiteralValue(prop.value)]];
+    })
+  );
+}
+function discoverVariants(node, prefixes) {
+  const result = [];
+  babel.traverse(node, {
+    enter(node2) {
+      if (node2.type === "ObjectExpression") {
+        const object = getObjectLiteralValue(node2);
+        for (let [key, value] of Object.entries(object)) {
+          if (prefixes.includes(key) && value) {
+            if (!Array.isArray(value)) {
+              value = [value];
+            }
+            for (let v of value) {
+              if (typeof v === "object" && v !== null && "default" in v) {
+                v = v.default;
+              }
+              if (typeof v !== "string") {
+                continue;
+              }
+              result.push([key, v]);
+            }
+          }
+        }
+      }
+      if (node2.type === "AssignmentPattern") {
+        const { left, right } = node2;
+        if (left.type === "Identifier" && right.type === "StringLiteral") {
+          const prefix = left.name;
+          const value = right.value;
+          if (prefixes.includes(prefix)) {
+            result.push([prefix, value]);
+          }
+        }
+      }
+    }
+  });
+  return result.flatMap(([key, v]) => {
+    const values = v.split(defaultSplitRE);
+    return generateSelectors(key, values);
+  });
+}
+function parseCodeAst(code, id) {
+  const { $ast: node } = parseModule(code, {
+    sourceFileName: id
+  });
+  return node;
+}
+function extractTemplateExpressions(node) {
+  const expressions = [];
+  transform(node, {
+    nodeTransforms: [
+      // readonly "transformer", doesn't do any changes
+      (node2) => {
+        if (node2.type === NodeTypes.ELEMENT) {
+          node2.props.forEach((prop) => {
+            if (prop.type === NodeTypes.DIRECTIVE && prop.exp?.ast) {
+              expressions.push(prop.exp.ast);
+            }
+          });
+        }
+      }
+    ]
+  });
+  return expressions;
 }
 function extractorVueScript(options) {
   return {
     name: "@una-ui/extractor-vue-script",
     order: 0,
-    async extract({ code }) {
-      return splitCodeWithArbitraryVariants(code, options?.prefixes ?? []);
+    async extract({ code, id }) {
+      const astExprs = [];
+      const cleanPath = parsePath(id).pathname;
+      if (cleanPath.endsWith(".vue")) {
+        const sfc = parse(code, {
+          filename: cleanPath
+        });
+        if (sfc.descriptor.script) {
+          astExprs.push(parseCodeAst(sfc.descriptor.script.content));
+        }
+        if (sfc.descriptor.scriptSetup) {
+          astExprs.push(parseCodeAst(sfc.descriptor.scriptSetup.content));
+        }
+        if (sfc.descriptor.template?.ast) {
+          astExprs.push(...extractTemplateExpressions(sfc.descriptor.template.ast));
+        }
+      } else {
+        astExprs.push(parseCodeAst(code, id));
+      }
+      const prefixes = normalizePrefixes(options?.prefixes ?? []);
+      return [...new Set(
+        astExprs.flatMap((node) => discoverVariants(node, prefixes))
+      )];
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/extractor-vue-script",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "Unocss extractor for Vue script",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -34,8 +34,15 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@babel/types": "^7.28.4",
+    "@vue/compiler-core": "^3.5.22",
+    "@vue/compiler-sfc": "^3.5.22",
+    "magicast": "^0.3.5",
+    "ufo": "^1.6.1"
+  },
   "devDependencies": {
-    "@unocss/core": "^66.2.0",
+    "@unocss/core": "^66.5.1",
     "vitest": "^3.2.4"
   },
   "scripts": {