@unocss/vite 0.45.25 → 0.45.28

package/README.md

@@ -249,28 +249,41 @@ You have a `Vite + Svelte` example project on [examples/vite-svelte](https://git
 
 To support `class:foo` and `class:foo={bar}` add the plugin and configure `extractorSvelte` on `extractors` option.
 
-You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/routes/__layout.svelte` on linked example project below.
+You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shortcuts` to include multiples rules, see `src/routes/+layout.svelte` on linked example project below.
 
 ```ts
 // vite.config.js
 import { sveltekit } from '@sveltejs/kit/vite'
-import UnoCss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 import { extractorSvelte } from '@unocss/core'
 
 /** @type {import('vite').UserConfig} */
 const config = {
   plugins: [
-    sveltekit(),
-    UnoCss({
+    UnoCSS({
       extractors: [extractorSvelte],
       /* more options */
     }),
+    sveltekit(),
   ],
 }
 ```
 
 You have a `SvelteKit` example project on [examples/sveltekit](https://github.com/unocss/unocss/tree/main/examples/sveltekit) directory.
 
+### 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`: 
+
+```html
+<style uno:preflights uno:safelist global></style>
+```
+
+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.
+
+
 ### Web Components
 
 To work with web components you need to enable `shadow-dom` mode on the plugin.

package/dist/index.cjs

@@ -8,7 +8,7 @@ const pluginutils = require('@rollup/pluginutils');
 const config = require('@unocss/config');
 const crypto = require('crypto');
 const MagicString = require('magic-string');
-const pathe = require('pathe');
+const path = require('path');
 const remapping = require('@ampproject/remapping');
 const fs = require('fs');
 const url = require('url');
@@ -305,7 +305,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         }
       },
       async configResolved(config) {
-        const distDir = pathe.resolve(config.root, config.build.outDir);
+        const distDir = path.resolve(config.root, config.build.outDir);
         cssPostPlugins.set(distDir, config.plugins.find((i) => i.name === "vite:css-post"));
         cssPlugins.set(distDir, config.plugins.find((i) => i.name === "vite:css"));
         await ready;
@@ -665,8 +665,10 @@ function VueScopedPlugin({ uno, ready }) {
 
 function SvelteScopedPlugin({ uno, ready }) {
   let filter = pluginutils.createFilter([/\.svelte$/], defaultExclude);
-  async function transformSFC(code) {
-    const { css } = await uno.generate(code);
+  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)
       return null;
     if (code.match(/<style[^>]*>[\s\S]*?<\/style\s*>/))
@@ -687,14 +689,14 @@ function SvelteScopedPlugin({ uno, ready }) {
     transform(code, id) {
       if (!filter(id))
         return;
-      return transformSFC(code);
+      return transformSFC(code, id);
     },
     handleHotUpdate(ctx) {
       const read = ctx.read;
       if (filter(ctx.file)) {
         ctx.read = async () => {
           const code = await read();
-          return await transformSFC(code) || code;
+          return await transformSFC(code, ctx.file) || code;
         };
       }
     }
@@ -874,7 +876,7 @@ function createTransformerPlugins(ctx) {
   }));
 }
 
-const _dirname = typeof __dirname !== "undefined" ? __dirname : pathe.dirname(url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+const _dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
 const DEVTOOLS_MODULE_ID = "virtual:unocss-devtools";
 const MOCK_CLASSES_MODULE_ID = "virtual:unocss-mock-classes";
 const MOCK_CLASSES_PATH = "/@unocss/mock-classes";
@@ -984,7 +986,7 @@ function createDevtoolsPlugin(ctx) {
         if (id === DEVTOOLS_PATH) {
           if (!clientCode) {
             clientCode = [
-              await fs__default.promises.readFile(pathe.resolve(_dirname, "client.mjs"), "utf-8"),
+              await fs__default.promises.readFile(path.resolve(_dirname, "client.mjs"), "utf-8"),
               `import('${MOCK_CLASSES_MODULE_ID}')`,
               `import('${DEVTOOLS_CSS_PATH}')`
             ].join("\n").replace("__POST_PATH__", (config.server?.origin ?? "") + POST_PATH);

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { createFilter } from '@rollup/pluginutils';
 import { loadConfig } from '@unocss/config';
 import { createHash } from 'crypto';
 import MagicString from 'magic-string';
-import { resolve, dirname } from 'pathe';
+import { resolve, dirname } from 'path';
 import remapping from '@ampproject/remapping';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
@@ -654,8 +654,10 @@ function VueScopedPlugin({ uno, ready }) {
 
 function SvelteScopedPlugin({ uno, ready }) {
   let filter = createFilter([/\.svelte$/], defaultExclude);
-  async function transformSFC(code) {
-    const { css } = await uno.generate(code);
+  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)
       return null;
     if (code.match(/<style[^>]*>[\s\S]*?<\/style\s*>/))
@@ -676,14 +678,14 @@ function SvelteScopedPlugin({ uno, ready }) {
     transform(code, id) {
       if (!filter(id))
         return;
-      return transformSFC(code);
+      return transformSFC(code, id);
     },
     handleHotUpdate(ctx) {
       const read = ctx.read;
       if (filter(ctx.file)) {
         ctx.read = async () => {
           const code = await read();
-          return await transformSFC(code) || code;
+          return await transformSFC(code, ctx.file) || code;
         };
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.45.25",
+  "version": "0.45.28",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,17 +44,16 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
-    "@unocss/config": "0.45.25",
-    "@unocss/core": "0.45.25",
-    "@unocss/inspector": "0.45.25",
-    "@unocss/scope": "0.45.25",
-    "@unocss/transformer-directives": "0.45.25",
-    "magic-string": "^0.26.3",
-    "pathe": "^0.3.7"
+    "@unocss/config": "0.45.28",
+    "@unocss/core": "0.45.28",
+    "@unocss/inspector": "0.45.28",
+    "@unocss/scope": "0.45.28",
+    "@unocss/transformer-directives": "0.45.28",
+    "magic-string": "^0.26.6"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.45.25",
-    "vite": "^3.1.2"
+    "@unocss/shared-integration": "0.45.28",
+    "vite": "^3.1.6"
   },
   "scripts": {
     "build": "unbuild",