@unocss/vite 0.45.30 → 0.46.0

package/README.md

@@ -273,7 +273,11 @@ You have a `SvelteKit` example project on [examples/sveltekit](https://github.co
 
 ### Svelte/SvelteKit Scoped Mode
 
-Adding `mode: 'svelte-scoped'` to your UnoCSS config options will place styles right inside of each component's style block instead of in a global `uno.css` file. Because there is no `import 'uno.css'` in your root `+layout.svelte` preflights and safelist classes have no where to be placed. Add the `uno:preflights` or `uno:safelist` attributes to the style block of any component where you want to place them. To use both globally, add the following to your root `+layout.svelte`: 
+Adding `mode: 'svelte-scoped'` to your UnoCSS config options will place styles right inside of each component's style block instead of in a global `uno.css` file. Due to automatic class name compilation, classes that depend on attributes in parent components (like `dir="rtl"` or `.dark`) will just work. Also, you can pass class to children components as long as you pass them using a prop named `class`, e.g. `class="text-lg bg-red-100"`. 
+
+Support for `class:foo` and `class:foo={bar}` is already included. There is no need to add the `extractorSvelte` when using `svelte-scoped` mode.
+
+Because there is no `import 'uno.css'` in your root `+layout.svelte` preflights and safelist classes have no where to be placed. Add the `uno:preflights` or `uno:safelist` attributes to the style block of any component where you want to place them. To use both globally, add the following to your root `+layout.svelte`: 
 
 ```html
 <style uno:preflights uno:safelist global></style>
@@ -281,8 +285,24 @@ Adding `mode: 'svelte-scoped'` to your UnoCSS config options will place styles r
 
 Alternatively, if you only want them to apply to a specific component just add them to that component's `style` tag and don't add the `global` attribute.
 
-You have a `SvelteKit scoped` example project on [examples/sveltekit-scoped](https://github.com/unocss/unocss/tree/main/examples/sveltekit-scoped) directory.
+```ts
+// vite.config.js
+import { sveltekit } from '@sveltejs/kit/vite'
+import UnoCSS from 'unocss/vite'
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [
+    UnoCSS({
+      mode: 'svelte-scoped',
+      /* options */
+    }),
+    sveltekit(),
+  ],
+}
+```
 
+There is a `SvelteKit scoped` example project in the [examples/sveltekit-scoped](https://github.com/unocss/unocss/tree/main/examples/sveltekit-scoped#readme) directory with more detailed explanation of how this mode works.
 
 ### Web Components
 

package/dist/index.cjs

@@ -663,23 +663,166 @@ function VueScopedPlugin({ uno, ready }) {
   };
 }
 
-function SvelteScopedPlugin({ uno, ready }) {
-  let filter = pluginutils.createFilter([/\.svelte$/], defaultExclude);
-  async function transformSFC(code, id) {
-    const preflights = code.includes("uno:preflights");
-    const safelist = code.includes("uno:safelist");
-    const { css } = await uno.generate(code, { id, preflights, safelist });
-    if (!css)
+const SELECTOR_REGEX = /(?<![\d(])([[\.][\S\s]+?)({[\S\s]+?})/g;
+function wrapSelectorsWithGlobal(css) {
+  return css.replace(SELECTOR_REGEX, ":global($1)$2");
+}
+
+function hash(str) {
+  let i;
+  let l;
+  let hval = 2166136261;
+  for (i = 0, l = str.length; i < l; i++) {
+    hval ^= str.charCodeAt(i);
+    hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
+  }
+  return `00000${(hval >>> 0).toString(36)}`.slice(-6);
+}
+
+const classesRE = /class=(["'\`])([\S\s]+?)\1/g;
+const classesDirectivesRE = /class:([\S]+?)={/g;
+const classDirectivesShorthandRE = /class:([^=>\s/]+)[{>\s/]/g;
+const classesFromInlineConditionalsRE = /'([\S\s]+?)'/g;
+async function transformSvelteSFC(code, id, uno, options = {}) {
+  const {
+    classPrefix = "uno-",
+    combine = true,
+    hashFn = hash
+  } = options;
+  let styles = "";
+  let map;
+  const alreadyHasStyles = code.match(/<style[^>]*>[\s\S]*?<\/style\s*>/);
+  const preflights = code.includes("uno:preflights");
+  const safelist = code.includes("uno:safelist");
+  if (preflights || safelist) {
+    const { css: css2 } = await uno.generate("", { preflights, safelist });
+    styles = css2;
+  }
+  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();
+  const s = new MagicString__default(code);
+  let idHash;
+  if (!combine)
+    idHash = hashFn(id);
+  function isOriginalOriginalShortcut(token) {
+    return !!originalShortcuts.find((s2) => s2[0] === token);
+  }
+  function queueCompiledClass(tokens) {
+    if (combine) {
+      const _shortcuts = tokens.filter((t) => isOriginalOriginalShortcut(t));
+      for (const s2 of _shortcuts)
+        toGenerate.add(s2);
+      const _tokens = tokens.filter((t) => !isOriginalOriginalShortcut(t));
+      if (!_tokens.length)
+        return _shortcuts.join(" ");
+      const hash2 = hashFn(_tokens.join(" ") + id);
+      const className = `${classPrefix}${hash2}`;
+      shortcuts[className] = _tokens;
+      toGenerate.add(className);
+      return [className, ..._shortcuts].join(" ");
+    } else {
+      return tokens.map((token) => {
+        if (isOriginalOriginalShortcut(token)) {
+          toGenerate.add(token);
+          return token;
+        }
+        const className = `_${token}_${idHash}`;
+        shortcuts[className] = [token];
+        toGenerate.add(className);
+        return className;
+      }).join(" ");
+    }
+  }
+  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();
+    if (!known.length)
       return null;
-    if (code.match(/<style[^>]*>[\s\S]*?<\/style\s*>/))
-      return code.replace(/(<style[^>]*>)/, `$1${css}`);
-    return `${code}
-<style>${css}</style>`;
+    const replacements = result.filter(([, matched]) => !matched).map(([i]) => i);
+    const className = queueCompiledClass(known);
+    return [className, ...replacements].join(" ");
   }
+  for (const match of classes) {
+    let body = core.expandVariantGroup(match[2].trim());
+    const inlineConditionals = [...body.matchAll(classesFromInlineConditionalsRE)];
+    for (const conditional of inlineConditionals) {
+      const replacement2 = await sortKnownAndUnknownClasses(conditional[1].trim());
+      if (replacement2)
+        body = body.replace(conditional[0], `'${replacement2}'`);
+    }
+    const replacement = await sortKnownAndUnknownClasses(body);
+    if (replacement) {
+      const start = match.index;
+      s.overwrite(start + 7, start + match[0].length - 1, replacement);
+    }
+  }
+  for (const match of classDirectives) {
+    const token = match[1];
+    const result = !!await uno.parseToken(token);
+    if (!result)
+      continue;
+    const className = queueCompiledClass([token]);
+    const start = match.index + "class:".length;
+    s.overwrite(start, start + match[1].length, className);
+  }
+  for (const match of classDirectivesShorthand) {
+    const token = match[1];
+    const result = !!await uno.parseToken(token);
+    if (!result)
+      continue;
+    const className = queueCompiledClass([token]);
+    const start = match.index + "class:".length;
+    s.overwrite(start, start + match[1].length, `${className}={${token}}`);
+  }
+  uno.config.shortcuts = [...originalShortcuts, ...Object.entries(shortcuts)];
+  const { css } = await uno.generate(toGenerate, { preflights: false, safelist: false, minify: true });
+  styles += wrapSelectorsWithGlobal(css);
+  uno.config.shortcuts = originalShortcuts;
+  if (toGenerate.size > 0 || s.hasChanged()) {
+    code = s.toString();
+    map = s.generateMap({ hires: true, source: id });
+  } else {
+    return;
+  }
+  if (alreadyHasStyles) {
+    return {
+      code: code.replace(/(<style[^>]*>)/, `$1${styles}`),
+      map
+    };
+  }
+  return {
+    code: `${code}
+<style>${styles}</style>`,
+    map
+  };
+}
+
+function SvelteScopedPlugin({ ready, uno }) {
+  let viteConfig;
+  let filter = pluginutils.createFilter([/\.svelte$/], defaultExclude);
   return {
     name: "unocss:svelte-scoped",
     enforce: "pre",
-    async configResolved() {
+    async configResolved(_viteConfig) {
+      viteConfig = _viteConfig;
       const { config } = await ready;
       filter = pluginutils.createFilter(
         config.include || [/\.svelte$/],
@@ -689,14 +832,14 @@ function SvelteScopedPlugin({ uno, ready }) {
     transform(code, id) {
       if (!filter(id))
         return;
-      return transformSFC(code, id);
+      return transformSvelteSFC(code, id, uno, { combine: viteConfig.command === "build" });
     },
     handleHotUpdate(ctx) {
       const read = ctx.read;
       if (filter(ctx.file)) {
         ctx.read = async () => {
           const code = await read();
-          return await transformSFC(code, ctx.file) || code;
+          return (await transformSvelteSFC(code, ctx.file, uno, { combine: viteConfig.command === "build" }))?.code || code;
         };
       }
     }
@@ -1047,3 +1190,4 @@ exports.SvelteScopedPlugin = SvelteScopedPlugin;
 exports.VueScopedPlugin = VueScopedPlugin;
 exports["default"] = UnocssPlugin;
 exports.defineConfig = defineConfig;
+exports.transformSvelteSFC = transformSvelteSFC;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as vite from 'vite';
 import { Plugin } from 'vite';
-import { UserConfig, UnocssPluginContext, UserConfigDefaults } from '@unocss/core';
+import { UserConfig, UnocssPluginContext, UnoGenerator, UserConfigDefaults } from '@unocss/core';
 
 interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Theme> {
     /**
@@ -49,9 +49,40 @@ declare function PerModuleModePlugin({ uno, filter }: UnocssPluginContext): Plug
 
 declare function VueScopedPlugin({ uno, ready }: UnocssPluginContext): Plugin;
 
-declare function SvelteScopedPlugin({ uno, ready }: UnocssPluginContext): Plugin;
+interface TransformSFCOptions {
+    /**
+     * Prefix for compiled class name
+     * @default 'uno-'
+     */
+    classPrefix?: string;
+    /**
+     * Add hash and combine recognized tokens (optimal for production); set false in dev mode for easy dev tools toggling to allow for design adjustments in the browser
+     * @default true
+     */
+    combine?: boolean;
+    /**
+     * Hash function
+     */
+    hashFn?: (str: string) => string;
+}
+declare function transformSvelteSFC(code: string, id: string, uno: UnoGenerator, options?: TransformSFCOptions): Promise<{
+    code: string;
+    map?: SourceMap;
+} | undefined>;
+interface SourceMap {
+    file: string;
+    mappings: string;
+    names: string[];
+    sources: string[];
+    sourcesContent: string[];
+    version: number;
+    toString(): string;
+    toUrl(): string;
+}
+
+declare function SvelteScopedPlugin({ ready, uno }: UnocssPluginContext): Plugin;
 
 declare function defineConfig<Theme extends {}>(config: VitePluginConfig<Theme>): VitePluginConfig<Theme>;
 declare function UnocssPlugin<Theme extends {}>(configOrPath?: VitePluginConfig<Theme> | string, defaults?: UserConfigDefaults): Plugin[];
 
-export { ChunkModeBuildPlugin, GlobalModeBuildPlugin, GlobalModeDevPlugin, GlobalModePlugin, PerModuleModePlugin, SvelteScopedPlugin, VitePluginConfig, VueScopedPlugin, UnocssPlugin as default, defineConfig };
+export { ChunkModeBuildPlugin, GlobalModeBuildPlugin, GlobalModeDevPlugin, GlobalModePlugin, PerModuleModePlugin, SvelteScopedPlugin, TransformSFCOptions, VitePluginConfig, VueScopedPlugin, UnocssPlugin as default, defineConfig, transformSvelteSFC };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import UnocssInspector from '@unocss/inspector';
-import { cssIdRE, createGenerator, BetterMap, notNull, toEscapedSelector } from '@unocss/core';
+import { cssIdRE, createGenerator, BetterMap, notNull, expandVariantGroup, toEscapedSelector } from '@unocss/core';
 import { createFilter } from '@rollup/pluginutils';
 import { loadConfig } from '@unocss/config';
 import { createHash } from 'crypto';
@@ -652,23 +652,166 @@ function VueScopedPlugin({ uno, ready }) {
   };
 }
 
-function SvelteScopedPlugin({ uno, ready }) {
-  let filter = createFilter([/\.svelte$/], defaultExclude);
-  async function transformSFC(code, id) {
-    const preflights = code.includes("uno:preflights");
-    const safelist = code.includes("uno:safelist");
-    const { css } = await uno.generate(code, { id, preflights, safelist });
-    if (!css)
+const SELECTOR_REGEX = /(?<![\d(])([[\.][\S\s]+?)({[\S\s]+?})/g;
+function wrapSelectorsWithGlobal(css) {
+  return css.replace(SELECTOR_REGEX, ":global($1)$2");
+}
+
+function hash(str) {
+  let i;
+  let l;
+  let hval = 2166136261;
+  for (i = 0, l = str.length; i < l; i++) {
+    hval ^= str.charCodeAt(i);
+    hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
+  }
+  return `00000${(hval >>> 0).toString(36)}`.slice(-6);
+}
+
+const classesRE = /class=(["'\`])([\S\s]+?)\1/g;
+const classesDirectivesRE = /class:([\S]+?)={/g;
+const classDirectivesShorthandRE = /class:([^=>\s/]+)[{>\s/]/g;
+const classesFromInlineConditionalsRE = /'([\S\s]+?)'/g;
+async function transformSvelteSFC(code, id, uno, options = {}) {
+  const {
+    classPrefix = "uno-",
+    combine = true,
+    hashFn = hash
+  } = options;
+  let styles = "";
+  let map;
+  const alreadyHasStyles = code.match(/<style[^>]*>[\s\S]*?<\/style\s*>/);
+  const preflights = code.includes("uno:preflights");
+  const safelist = code.includes("uno:safelist");
+  if (preflights || safelist) {
+    const { css: css2 } = await uno.generate("", { preflights, safelist });
+    styles = css2;
+  }
+  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();
+  const s = new MagicString(code);
+  let idHash;
+  if (!combine)
+    idHash = hashFn(id);
+  function isOriginalOriginalShortcut(token) {
+    return !!originalShortcuts.find((s2) => s2[0] === token);
+  }
+  function queueCompiledClass(tokens) {
+    if (combine) {
+      const _shortcuts = tokens.filter((t) => isOriginalOriginalShortcut(t));
+      for (const s2 of _shortcuts)
+        toGenerate.add(s2);
+      const _tokens = tokens.filter((t) => !isOriginalOriginalShortcut(t));
+      if (!_tokens.length)
+        return _shortcuts.join(" ");
+      const hash2 = hashFn(_tokens.join(" ") + id);
+      const className = `${classPrefix}${hash2}`;
+      shortcuts[className] = _tokens;
+      toGenerate.add(className);
+      return [className, ..._shortcuts].join(" ");
+    } else {
+      return tokens.map((token) => {
+        if (isOriginalOriginalShortcut(token)) {
+          toGenerate.add(token);
+          return token;
+        }
+        const className = `_${token}_${idHash}`;
+        shortcuts[className] = [token];
+        toGenerate.add(className);
+        return className;
+      }).join(" ");
+    }
+  }
+  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();
+    if (!known.length)
       return null;
-    if (code.match(/<style[^>]*>[\s\S]*?<\/style\s*>/))
-      return code.replace(/(<style[^>]*>)/, `$1${css}`);
-    return `${code}
-<style>${css}</style>`;
+    const replacements = result.filter(([, matched]) => !matched).map(([i]) => i);
+    const className = queueCompiledClass(known);
+    return [className, ...replacements].join(" ");
   }
+  for (const match of classes) {
+    let body = expandVariantGroup(match[2].trim());
+    const inlineConditionals = [...body.matchAll(classesFromInlineConditionalsRE)];
+    for (const conditional of inlineConditionals) {
+      const replacement2 = await sortKnownAndUnknownClasses(conditional[1].trim());
+      if (replacement2)
+        body = body.replace(conditional[0], `'${replacement2}'`);
+    }
+    const replacement = await sortKnownAndUnknownClasses(body);
+    if (replacement) {
+      const start = match.index;
+      s.overwrite(start + 7, start + match[0].length - 1, replacement);
+    }
+  }
+  for (const match of classDirectives) {
+    const token = match[1];
+    const result = !!await uno.parseToken(token);
+    if (!result)
+      continue;
+    const className = queueCompiledClass([token]);
+    const start = match.index + "class:".length;
+    s.overwrite(start, start + match[1].length, className);
+  }
+  for (const match of classDirectivesShorthand) {
+    const token = match[1];
+    const result = !!await uno.parseToken(token);
+    if (!result)
+      continue;
+    const className = queueCompiledClass([token]);
+    const start = match.index + "class:".length;
+    s.overwrite(start, start + match[1].length, `${className}={${token}}`);
+  }
+  uno.config.shortcuts = [...originalShortcuts, ...Object.entries(shortcuts)];
+  const { css } = await uno.generate(toGenerate, { preflights: false, safelist: false, minify: true });
+  styles += wrapSelectorsWithGlobal(css);
+  uno.config.shortcuts = originalShortcuts;
+  if (toGenerate.size > 0 || s.hasChanged()) {
+    code = s.toString();
+    map = s.generateMap({ hires: true, source: id });
+  } else {
+    return;
+  }
+  if (alreadyHasStyles) {
+    return {
+      code: code.replace(/(<style[^>]*>)/, `$1${styles}`),
+      map
+    };
+  }
+  return {
+    code: `${code}
+<style>${styles}</style>`,
+    map
+  };
+}
+
+function SvelteScopedPlugin({ ready, uno }) {
+  let viteConfig;
+  let filter = createFilter([/\.svelte$/], defaultExclude);
   return {
     name: "unocss:svelte-scoped",
     enforce: "pre",
-    async configResolved() {
+    async configResolved(_viteConfig) {
+      viteConfig = _viteConfig;
       const { config } = await ready;
       filter = createFilter(
         config.include || [/\.svelte$/],
@@ -678,14 +821,14 @@ function SvelteScopedPlugin({ uno, ready }) {
     transform(code, id) {
       if (!filter(id))
         return;
-      return transformSFC(code, id);
+      return transformSvelteSFC(code, id, uno, { combine: viteConfig.command === "build" });
     },
     handleHotUpdate(ctx) {
       const read = ctx.read;
       if (filter(ctx.file)) {
         ctx.read = async () => {
           const code = await read();
-          return await transformSFC(code, ctx.file) || code;
+          return (await transformSvelteSFC(code, ctx.file, uno, { combine: viteConfig.command === "build" }))?.code || code;
         };
       }
     }
@@ -1027,4 +1170,4 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   return plugins.filter(Boolean);
 }
 
-export { ChunkModeBuildPlugin, GlobalModeBuildPlugin, GlobalModeDevPlugin, GlobalModePlugin, PerModuleModePlugin, SvelteScopedPlugin, VueScopedPlugin, UnocssPlugin as default, defineConfig };
+export { ChunkModeBuildPlugin, GlobalModeBuildPlugin, GlobalModeDevPlugin, GlobalModePlugin, PerModuleModePlugin, SvelteScopedPlugin, VueScopedPlugin, UnocssPlugin as default, defineConfig, transformSvelteSFC };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.45.30",
+  "version": "0.46.0",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,15 +44,15 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^5.0.1",
-    "@unocss/config": "0.45.30",
-    "@unocss/core": "0.45.30",
-    "@unocss/inspector": "0.45.30",
-    "@unocss/scope": "0.45.30",
-    "@unocss/transformer-directives": "0.45.30",
+    "@unocss/config": "0.46.0",
+    "@unocss/core": "0.46.0",
+    "@unocss/inspector": "0.46.0",
+    "@unocss/scope": "0.46.0",
+    "@unocss/transformer-directives": "0.46.0",
     "magic-string": "^0.26.7"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.45.30",
+    "@unocss/shared-integration": "0.46.0",
     "vite": "^3.1.8"
   },
   "scripts": {