@unocss/vite 0.45.26 → 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

@@ -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;
         };
       }
     }

package/dist/index.mjs

@@ -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.26",
+  "version": "0.45.28",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,16 +44,16 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
-    "@unocss/config": "0.45.26",
-    "@unocss/core": "0.45.26",
-    "@unocss/inspector": "0.45.26",
-    "@unocss/scope": "0.45.26",
-    "@unocss/transformer-directives": "0.45.26",
-    "magic-string": "^0.26.3"
+    "@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.26",
-    "vite": "^3.1.2"
+    "@unocss/shared-integration": "0.45.28",
+    "vite": "^3.1.6"
   },
   "scripts": {
     "build": "unbuild",