@unocss/vite 0.50.0 → 0.50.2

package/dist/index.cjs

@@ -399,14 +399,12 @@ function GlobalModeBuildPlugin(ctx) {
         ];
         if (config.build.rollupOptions.output) {
           const outputOptions = config.build.rollupOptions.output;
-          if (Array.isArray(outputOptions)) {
-            distDirs.push(
-              ...outputOptions.map((option) => option.dir).filter(Boolean)
-            );
-          } else {
-            if (outputOptions.dir)
-              distDirs.push(outputOptions.dir);
-          }
+          const outputDirs = Array.isArray(outputOptions) ? outputOptions.map((option) => option.dir).filter(Boolean) : outputOptions.dir ? [outputOptions.dir] : [];
+          outputDirs.forEach((dir) => {
+            distDirs.push(dir);
+            if (!path.isAbsolute(dir))
+              distDirs.push(path.resolve(config.root, dir));
+          });
         }
         const cssPostPlugin = config.plugins.find((i) => i.name === "vite:css-post");
         const cssPlugin = config.plugins.find((i) => i.name === "vite:css");
@@ -867,19 +865,6 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
   const classes = [...code.matchAll(classesRE)];
   const classDirectives = [...code.matchAll(classesDirectivesRE)];
   const classDirectivesShorthand = [...code.matchAll(classDirectivesShorthandRE)];
-  if (!classes.length && !classDirectives.length && !classDirectivesShorthand.length) {
-    if (preflights || safelist) {
-      if (alreadyHasStyles) {
-        return {
-          code: code.replace(/(<style[^>]*>)/, `$1${styles}`)
-        };
-      }
-      return { code: `${code}
-<style>${styles}</style>` };
-    } else {
-      return;
-    }
-  }
   const originalShortcuts = uno.config.shortcuts;
   const shortcuts = {};
   const toGenerate = /* @__PURE__ */ new Set();
@@ -919,13 +904,14 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
   async function sortKnownAndUnknownClasses(str) {
     const classArr = str.split(/\s+/);
     const result = await Promise.all(classArr.filter(Boolean).map(async (t) => [t, !!await uno.parseToken(t)]));
-    const known = result.filter(([, matched]) => matched).map(([t]) => t).sort();
+    const known = result.filter(([, matched2]) => matched2).map(([t]) => t).sort();
     if (!known.length)
       return null;
-    const replacements = result.filter(([, matched]) => !matched).map(([i]) => i);
+    const replacements = result.filter(([, matched2]) => !matched2).map(([i]) => i);
     const className = queueCompiledClass(known);
     return [className, ...replacements].join(" ");
   }
+  const processedMap = /* @__PURE__ */ new Set();
   for (const match of classes) {
     let body = core.expandVariantGroup(match[2].trim());
     const inlineConditionals = [...body.matchAll(classesFromInlineConditionalsRE)];
@@ -936,8 +922,10 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
     }
     const replacement = await sortKnownAndUnknownClasses(body);
     if (replacement) {
-      const start = match.index;
-      s.overwrite(start + 7, start + match[0].length - 1, replacement);
+      const start = match.index + 7;
+      const end = match.index + match[0].length - 1;
+      processedMap.add(start);
+      s.overwrite(start, end, replacement);
     }
   }
   for (const match of classDirectives) {
@@ -947,6 +935,7 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
       continue;
     const className = queueCompiledClass([token]);
     const start = match.index + "class:".length;
+    processedMap.add(start);
     s.overwrite(start, start + match[1].length, className);
   }
   for (const match of classDirectivesShorthand) {
@@ -956,8 +945,44 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
       continue;
     const className = queueCompiledClass([token]);
     const start = match.index + "class:".length;
+    processedMap.add(start);
     s.overwrite(start, start + match[1].length, `${className}={${token}}`);
   }
+  const { matched } = await uno.generate(code, { preflights: false, safelist: false, minify: true });
+  for (const token of matched) {
+    const match = token.match(core.attributifyRE);
+    if (match) {
+      const [, name, value] = match;
+      if (!value) {
+        let start = 0;
+        code.split(/([\s"'`;*]|:\(|\)"|\)\s)/g).forEach((i) => {
+          const end = start + i.length;
+          if (i === name && !processedMap.has(start)) {
+            const className = queueCompiledClass([name]);
+            s.appendLeft(start, `class:${className}={true} `);
+            s.overwrite(start, end, "");
+          }
+          start = end;
+        });
+      } else {
+        const regex = new RegExp(`(${core.escapeRegExp(name)}=)(['"])[^\\2]*?${core.escapeRegExp(value)}[^\\2]*?\\2`, "g");
+        for (const match2 of code.matchAll(regex)) {
+          const escaped = match2[1];
+          const body = match2[0].slice(escaped.length);
+          let bodyIndex = body.match(`[\\b\\s'"]${core.escapeRegExp(value)}[\\b\\s'"]`)?.index ?? -1;
+          if (body[bodyIndex]?.match(/[\s'"]/))
+            bodyIndex++;
+          if (bodyIndex < 0)
+            return;
+          const [, base] = await uno.matchVariants(value);
+          const variants = value.replace(base, "");
+          const className = queueCompiledClass([`${variants + name}-${base}`]);
+          s.appendLeft(match2.index, `class:${className}={true} `);
+          s.overwrite(match2.index, match2.index + match2[0].length, "");
+        }
+      }
+    }
+  }
   uno.config.shortcuts = [...originalShortcuts, ...Object.entries(shortcuts)];
   const { css } = await uno.generate(toGenerate, { preflights: false, safelist: false, minify: true });
   styles += wrapSelectorsWithGlobal(css);

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import UnocssInspector from '@unocss/inspector';
-import { cssIdRE, createGenerator, BetterMap, notNull, expandVariantGroup, toEscapedSelector } from '@unocss/core';
+import { cssIdRE, createGenerator, BetterMap, notNull, expandVariantGroup, attributifyRE, escapeRegExp, toEscapedSelector } from '@unocss/core';
 import { createFilter } from '@rollup/pluginutils';
 import { loadConfig } from '@unocss/config';
 import { createHash } from 'crypto';
 import MagicString from 'magic-string';
-import { resolve, dirname } from 'path';
+import { resolve, isAbsolute, dirname } from 'path';
 import fs from 'fs/promises';
 import fg from 'fast-glob';
 import remapping from '@ampproject/remapping';
@@ -386,14 +386,12 @@ function GlobalModeBuildPlugin(ctx) {
         ];
         if (config.build.rollupOptions.output) {
           const outputOptions = config.build.rollupOptions.output;
-          if (Array.isArray(outputOptions)) {
-            distDirs.push(
-              ...outputOptions.map((option) => option.dir).filter(Boolean)
-            );
-          } else {
-            if (outputOptions.dir)
-              distDirs.push(outputOptions.dir);
-          }
+          const outputDirs = Array.isArray(outputOptions) ? outputOptions.map((option) => option.dir).filter(Boolean) : outputOptions.dir ? [outputOptions.dir] : [];
+          outputDirs.forEach((dir) => {
+            distDirs.push(dir);
+            if (!isAbsolute(dir))
+              distDirs.push(resolve(config.root, dir));
+          });
         }
         const cssPostPlugin = config.plugins.find((i) => i.name === "vite:css-post");
         const cssPlugin = config.plugins.find((i) => i.name === "vite:css");
@@ -854,19 +852,6 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
   const classes = [...code.matchAll(classesRE)];
   const classDirectives = [...code.matchAll(classesDirectivesRE)];
   const classDirectivesShorthand = [...code.matchAll(classDirectivesShorthandRE)];
-  if (!classes.length && !classDirectives.length && !classDirectivesShorthand.length) {
-    if (preflights || safelist) {
-      if (alreadyHasStyles) {
-        return {
-          code: code.replace(/(<style[^>]*>)/, `$1${styles}`)
-        };
-      }
-      return { code: `${code}
-<style>${styles}</style>` };
-    } else {
-      return;
-    }
-  }
   const originalShortcuts = uno.config.shortcuts;
   const shortcuts = {};
   const toGenerate = /* @__PURE__ */ new Set();
@@ -906,13 +891,14 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
   async function sortKnownAndUnknownClasses(str) {
     const classArr = str.split(/\s+/);
     const result = await Promise.all(classArr.filter(Boolean).map(async (t) => [t, !!await uno.parseToken(t)]));
-    const known = result.filter(([, matched]) => matched).map(([t]) => t).sort();
+    const known = result.filter(([, matched2]) => matched2).map(([t]) => t).sort();
     if (!known.length)
       return null;
-    const replacements = result.filter(([, matched]) => !matched).map(([i]) => i);
+    const replacements = result.filter(([, matched2]) => !matched2).map(([i]) => i);
     const className = queueCompiledClass(known);
     return [className, ...replacements].join(" ");
   }
+  const processedMap = /* @__PURE__ */ new Set();
   for (const match of classes) {
     let body = expandVariantGroup(match[2].trim());
     const inlineConditionals = [...body.matchAll(classesFromInlineConditionalsRE)];
@@ -923,8 +909,10 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
     }
     const replacement = await sortKnownAndUnknownClasses(body);
     if (replacement) {
-      const start = match.index;
-      s.overwrite(start + 7, start + match[0].length - 1, replacement);
+      const start = match.index + 7;
+      const end = match.index + match[0].length - 1;
+      processedMap.add(start);
+      s.overwrite(start, end, replacement);
     }
   }
   for (const match of classDirectives) {
@@ -934,6 +922,7 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
       continue;
     const className = queueCompiledClass([token]);
     const start = match.index + "class:".length;
+    processedMap.add(start);
     s.overwrite(start, start + match[1].length, className);
   }
   for (const match of classDirectivesShorthand) {
@@ -943,8 +932,44 @@ async function transformSvelteSFC(code, id, uno, options = {}) {
       continue;
     const className = queueCompiledClass([token]);
     const start = match.index + "class:".length;
+    processedMap.add(start);
     s.overwrite(start, start + match[1].length, `${className}={${token}}`);
   }
+  const { matched } = await uno.generate(code, { preflights: false, safelist: false, minify: true });
+  for (const token of matched) {
+    const match = token.match(attributifyRE);
+    if (match) {
+      const [, name, value] = match;
+      if (!value) {
+        let start = 0;
+        code.split(/([\s"'`;*]|:\(|\)"|\)\s)/g).forEach((i) => {
+          const end = start + i.length;
+          if (i === name && !processedMap.has(start)) {
+            const className = queueCompiledClass([name]);
+            s.appendLeft(start, `class:${className}={true} `);
+            s.overwrite(start, end, "");
+          }
+          start = end;
+        });
+      } else {
+        const regex = new RegExp(`(${escapeRegExp(name)}=)(['"])[^\\2]*?${escapeRegExp(value)}[^\\2]*?\\2`, "g");
+        for (const match2 of code.matchAll(regex)) {
+          const escaped = match2[1];
+          const body = match2[0].slice(escaped.length);
+          let bodyIndex = body.match(`[\\b\\s'"]${escapeRegExp(value)}[\\b\\s'"]`)?.index ?? -1;
+          if (body[bodyIndex]?.match(/[\s'"]/))
+            bodyIndex++;
+          if (bodyIndex < 0)
+            return;
+          const [, base] = await uno.matchVariants(value);
+          const variants = value.replace(base, "");
+          const className = queueCompiledClass([`${variants + name}-${base}`]);
+          s.appendLeft(match2.index, `class:${className}={true} `);
+          s.overwrite(match2.index, match2.index + match2[0].length, "");
+        }
+      }
+    }
+  }
   uno.config.shortcuts = [...originalShortcuts, ...Object.entries(shortcuts)];
   const { css } = await uno.generate(toGenerate, { preflights: false, safelist: false, minify: true });
   styles += wrapSelectorsWithGlobal(css);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.50.0",
+  "version": "0.50.2",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,17 +44,17 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@unocss/config": "0.50.0",
-    "@unocss/core": "0.50.0",
-    "@unocss/inspector": "0.50.0",
-    "@unocss/scope": "0.50.0",
-    "@unocss/transformer-directives": "0.50.0",
+    "@unocss/config": "0.50.2",
+    "@unocss/core": "0.50.2",
+    "@unocss/inspector": "0.50.2",
+    "@unocss/scope": "0.50.2",
+    "@unocss/transformer-directives": "0.50.2",
     "chokidar": "^3.5.3",
     "fast-glob": "^3.2.12",
-    "magic-string": "^0.29.0"
+    "magic-string": "^0.30.0"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.50.0",
+    "@unocss/shared-integration": "0.50.2",
     "vite": "^4.1.4"
   },
   "scripts": {