feat(svelte)!: move out extractorSvelte to a separate package (#2368)

unocss · Apr 9, 2023 · 65371ae · 65371ae
1 parent b08d40f
commit 65371ae
Show file tree

Hide file tree

Showing 30 changed files with 305 additions and 127 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,5 +6,6 @@ interactive/data/guides.ts
 defaultConfig.ts
 packages/preset-icons/src/collections.json
 packages/eslint-plugin/fixtures
+bench/source/gen*.js
 !.vitepress
 docs/.vitepress/cache/deps/*.*
diff --git a/alias.ts b/alias.ts
@@ -11,6 +11,7 @@ export const alias: Record<string, string> = {
   '@unocss/config': r('./packages/config/src/'),
   '@unocss/core': r('./packages/core/src/'),
   '@unocss/extractor-pug': r('./packages/extractor-pug/src/'),
+  '@unocss/extractor-svelte': r('./packages/extractor-svelte/src/'),
   '@unocss/inspector': r('./packages/inspector/node/'),
   '@unocss/nuxt': r('./packages/nuxt/src/'),
   '@unocss/preset-attributify': r('./packages/preset-attributify/src/'),

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -63,7 +63,7 @@ const Transformers: DefaultTheme.NavItemWithLink[] = [
 
 const Extractors: DefaultTheme.NavItemWithLink[] = [
   { text: 'Pug extractor', link: '/extractors/pug' },
-  // { text: 'Svelte extractor', link: '/extractors/svelte' },
+  { text: 'Svelte extractor', link: '/extractors/svelte' },
 ]
 
 const Tools: DefaultTheme.NavItemWithLink[] = [

diff --git a/docs/extractors/pug.md b/docs/extractors/pug.md
@@ -5,7 +5,7 @@ description: Pug extractor for UnoCSS (@unocss/extractor-pug)
 
 # Pug extractor
 
-Pug extractor for UnoCSS: `@unocss/extractor-pug`.
+Support extracting classes from Pug template.
 
 ## Installation
 
@@ -21,8 +21,6 @@ Pug extractor for UnoCSS: `@unocss/extractor-pug`.
   ```
 :::
 
-## Usage
-
 ```ts
 import { defineConfig } from 'unocss'
 import extractorPug from '@unocss/extractor-pug'

diff --git a/docs/extractors/svelte.md b/docs/extractors/svelte.md
@@ -2,6 +2,45 @@
 title: Svelte extractor
 ---
 
-#  Svelte extractor
+# Svelte extractor
+
+Supports extracting classes from `class:` directive.
+
+```html
+<div class:text-orange-400={foo} />
+```
+
+Will be extracted as `text-orange-400` and generates:
+
+```css
+.text-orange-400 {
+  color: #f6993f;
+}
+```
+
+## Installation
+
+::: code-group
+  ```bash [pnpm]
+  pnpm add -D @unocss/extractor-svelte
+  ```
+  ```bash [yarn]
+  yarn add -D @unocss/extractor-sve
+  ```
+  ```bash [npm]
+  npm install -D @unocss/extractor-sve
+  ```
+:::
+
+```ts
+// uno.config.js
+import { defineConfig } from 'unocss'
+import extractorSvelte from '@unocss/extractor-svelte'
+
+export default defineConfig({
+  extractors: [
+    extractorSvelte(),
+  ],
+})
+```
 
-// TODO:
diff --git a/docs/integrations/vite.md b/docs/integrations/vite.md
@@ -189,12 +189,14 @@ You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or
 // vite.config.js
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import UnoCSS from 'unocss/vite'
-import { extractorSvelte } from '@unocss/core'
+import extractorSvelte from '@unocss/extractor-svelte'
 
 export default {
   plugins: [
     UnoCSS({
-      extractors: [extractorSvelte],
+      extractors: [
+        extractorSvelte
+      ],
       /* more options */
     }),
     svelte(),
@@ -214,13 +216,15 @@ You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or
 // vite.config.js
 import { sveltekit } from '@sveltejs/kit/vite'
 import UnoCSS from 'unocss/vite'
-import { extractorSvelte } from '@unocss/core'
+import extractorSvelte from '@unocss/extractor-svelte'
 
 /** @type {import('vite').UserConfig} */
 const config = {
   plugins: [
     UnoCSS({
-      extractors: [extractorSvelte],
+      extractors: [
+        extractorSvelte()
+      ],
       /* more options */
     }),
     sveltekit(),
@@ -249,6 +253,7 @@ Alternatively, if you only want them to apply to a specific component just add t
 // vite.config.js
 import { sveltekit } from '@sveltejs/kit/vite'
 import UnoCSS from 'unocss/vite'
+
 /** @type {import('vite').UserConfig} */
 const config = {
   plugins: [

diff --git a/examples/sveltekit-scoped/uno.config.ts b/examples/sveltekit-scoped/uno.config.ts
@@ -1,2 +1,24 @@
-// Placed blank file here to make the latest UnoCSS VSCode extension work (v.0.45.26)
-// At the moment, placing the UnoCSS config currently seen in vite.config.ts does not work from this file
+import { defineConfig } from 'unocss/vite'
+import presetIcons from '@unocss/preset-icons'
+import presetUno from '@unocss/preset-uno'
+import transformerDirectives from '@unocss/transformer-directives'
+
+export default defineConfig({
+  shortcuts: [
+    { logo: 'i-logos:svelte-icon w-7em h-7em transform transition-300' },
+  ],
+  transformers: [
+    transformerDirectives(),
+  ],
+  presets: [
+    presetUno(),
+    presetIcons({
+      prefix: 'i-',
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+  safelist: ['bg-orange-300'],
+})
diff --git a/examples/sveltekit-scoped/vite.config.ts b/examples/sveltekit-scoped/vite.config.ts
@@ -1,31 +1,11 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vite'
 import UnoCSS from 'unocss/vite'
-import presetIcons from '@unocss/preset-icons'
-import presetUno from '@unocss/preset-uno'
-import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   plugins: [
     UnoCSS({
       mode: 'svelte-scoped',
-      shortcuts: [
-        { logo: 'i-logos:svelte-icon w-7em h-7em transform transition-300' },
-      ],
-      transformers: [
-        transformerDirectives(),
-      ],
-      presets: [
-        presetUno(),
-        presetIcons({
-          prefix: 'i-',
-          extraProperties: {
-            'display': 'inline-block',
-            'vertical-align': 'middle',
-          },
-        }),
-      ],
-      safelist: ['bg-orange-300'],
     }),
     sveltekit(),
   ],

diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
@@ -15,6 +15,7 @@
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@unocss/core": "link:../../packages/core",
+    "@unocss/extractor-svelte": "link:../../packages/extractor-svelte",
     "@unocss/preset-icons": "link:../../packages/preset-icons",
     "svelte": "^3.58.0",
     "svelte-check": "^3.1.4",

diff --git a/examples/sveltekit/uno.config.ts b/examples/sveltekit/uno.config.ts
@@ -1,8 +1,36 @@
-// placed blank file here to make the latest UnoCSS VSCode extension work (v.0.45.26)
+import { defineConfig } from 'unocss'
+import extractorSvelte from '@unocss/extractor-svelte'
+import presetIcons from '@unocss/preset-icons'
+import presetUno from '@unocss/preset-uno'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
 
-// import { presetIcons, presetUno, extractorSvelte } from 'unocss'
-// import { defineConfig } from 'unocss/vite'
-
-// export default defineConfig({
-// placing the UnoCSS config currently seen in vite.config.ts does not work from this file
-// })
+export default defineConfig({
+  extractors: [
+    extractorSvelte(),
+  ],
+  shortcuts: [
+    { logo: 'i-logos:svelte-icon w-6em h-6em transform transition-800 hover:rotate-180' },
+  ],
+  presets: [
+    presetUno(),
+    presetIcons({
+      collections: {
+        custom: {
+          // do not remove LF: testing trimCustomSvg on universal icon loader
+          circle: `<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="50"/>
+</svg>
+`,
+        },
+        customfsl: FileSystemIconLoader(
+          './icons',
+          svg => svg.replace('<svg ', '<svg fill="currentColor" '),
+        ),
+      },
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+})
diff --git a/examples/sveltekit/vite.config.ts b/examples/sveltekit/vite.config.ts
@@ -1,41 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vite'
 import UnoCSS from 'unocss/vite'
-import { extractorSvelte } from '@unocss/core'
-import presetIcons from '@unocss/preset-icons'
-import presetUno from '@unocss/preset-uno'
-import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
 
 export default defineConfig({
   plugins: [
-    UnoCSS({
-      extractors: [extractorSvelte],
-      shortcuts: [
-        { logo: 'i-logos:svelte-icon w-6em h-6em transform transition-800 hover:rotate-180' },
-      ],
-      presets: [
-        presetUno(),
-        presetIcons({
-          collections: {
-            custom: {
-              // do not remove LF: testing trimCustomSvg on universal icon loader
-              circle: `<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-<circle cx="60" cy="60" r="50"/>
-</svg>
-`,
-            },
-            customfsl: FileSystemIconLoader(
-              './icons',
-              svg => svg.replace('<svg ', '<svg fill="currentColor" '),
-            ),
-          },
-          extraProperties: {
-            'display': 'inline-block',
-            'vertical-align': 'middle',
-          },
-        }),
-      ],
-    }),
+    UnoCSS(),
     sveltekit(),
   ],
 })
diff --git a/examples/vite-svelte-postcss/package.json b/examples/vite-svelte-postcss/package.json
@@ -12,7 +12,8 @@
     "@iconify-json/logos": "^1.1.24",
     "@sveltejs/vite-plugin-svelte": "^2.0.4",
     "@tsconfig/svelte": "^4.0.1",
-    "@unocss/postcss": "link:..\\..\\packages\\postcss",
+    "@unocss/extractor-svelte": "link:../../packages/extractor-svelte",
+    "@unocss/postcss": "link:../../packages/postcss",
     "svelte": "^3.58.0",
     "svelte-check": "^3.1.4",
     "tslib": "^2.5.0",

diff --git a/examples/vite-svelte-postcss/uno.config.ts b/examples/vite-svelte-postcss/uno.config.ts
@@ -1,15 +1,17 @@
 import {
   defineConfig,
-  extractorSvelte,
   presetAttributify,
   presetIcons,
   presetTypography,
   presetUno,
   presetWebFonts,
 } from 'unocss'
+import extractorSvelte from '@unocss/extractor-svelte'
 
 export default defineConfig({
-  extractors: [extractorSvelte],
+  extractors: [
+    extractorSvelte(),
+  ],
   presets: [
     presetUno({
       attributifyPseudo: true,

diff --git a/examples/vite-svelte/package.json b/examples/vite-svelte/package.json
@@ -13,6 +13,7 @@
     "@sveltejs/vite-plugin-svelte": "^2.0.4",
     "@tsconfig/svelte": "^4.0.1",
     "@unocss/core": "link:../../packages/core",
+    "@unocss/extractor-svelte": "link:../../packages/extractor-svelte",
     "@unocss/preset-icons": "link:../../packages/preset-icons",
     "svelte": "^3.58.0",
     "svelte-check": "^3.1.4",

diff --git a/examples/vite-svelte/uno.config.ts b/examples/vite-svelte/uno.config.ts
@@ -0,0 +1,24 @@
+import presetIcons from '@unocss/preset-icons'
+import presetUno from '@unocss/preset-uno'
+import extractorSvelte from '@unocss/extractor-svelte'
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  extractors: [
+    extractorSvelte(),
+  ],
+  shortcuts: [
+    { logo: 'i-logos-svelte-icon w-6em h-6em transform transition-800 hover:rotate-180' },
+    { foo: 'bg-yellow-400' },
+    { bar: 'bg-green-400' },
+  ],
+  presets: [
+    presetUno(),
+    presetIcons({
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+})
diff --git a/examples/vite-svelte/vite.config.js b/examples/vite-svelte/vite.config.js
@@ -1,30 +1,11 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import UnoCSS from 'unocss/vite'
-import presetIcons from '@unocss/preset-icons'
-import presetUno from '@unocss/preset-uno'
-import { extractorSvelte } from '@unocss/core'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    UnoCSS({
-      extractors: [extractorSvelte],
-      shortcuts: [
-        { logo: 'i-logos-svelte-icon w-6em h-6em transform transition-800 hover:rotate-180' },
-        { foo: 'bg-yellow-400' },
-        { bar: 'bg-green-400' },
-      ],
-      presets: [
-        presetUno(),
-        presetIcons({
-          extraProperties: {
-            'display': 'inline-block',
-            'vertical-align': 'middle',
-          },
-        }),
-      ],
-    }),
+    UnoCSS(),
     svelte(),
   ],
 })
diff --git a/packages/README.md b/packages/README.md
@@ -20,6 +20,7 @@
 | [@unocss/transformer-attributify-jsx](./transformer-attributify-jsx) | Support valueless attributify in JSX/TSX | ✅ | No |
 | [@unocss/transformer-attributify-jsx-babel](./transformer-attributify-jsx) | Support valueless attributify in JSX/TSX (Babel) | No | No |
 | [@unocss/extractor-pug](./extractor-pug) | Extractor for Pug | No | - |
+| [@unocss/extractor-svelte](./extractor-svelte) | Extractor for Svelte | No | - |
 | [@unocss/autocomplete](./autocomplete) | Utils for autocomplete | No | - |
 | [@unocss/config](./config) | Configuration file loader | ✅ | - |
 | [@unocss/reset](./reset) | Collection of common CSS resets | ✅ | No |

diff --git a/packages/core/src/extractors/index.ts b/packages/core/src/extractors/index.ts
@@ -6,4 +6,3 @@ export {
   defaultSplitRE,
   splitWithVariantGroupRE,
 } from './split'
-export { extractorSvelte } from './svelte'