feat: use sveltePreprocess options from vite plugins if presents (#13)

* feat: use `sveltePreprocess` options from vite plugins if present

solves windicss compatibility problem


Co-authored-by: dominikg <[email protected]>
Co-authored-by: Christian Kaisermann <[email protected]>

Author: 3 people

.changeset/fresh-penguins-heal.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Allow other vite plugins to define preprocessors

.eslintrc.js

@@ -143,6 +143,13 @@ module.exports = {
 				node: true,
 				browser: false
 			}
+		},
+		{
+			/* required because App.svelte contains windicss rule that breaks the parser */
+			files: ['packages/playground/windicss/src/App.svelte'],
+			settings: {
+				'svelte3/ignore-styles': () => true
+			}
 		}
 	]
 };

packages/playground/windicss/package.json

@@ -1,20 +1,20 @@
 {
   "name": "playground-windicss",
-	"private": true,
+  "private": true,
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },
   "dependencies": {
-    "windicss": "^2.5.2"
+    "windicss": "^2.5.4"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
+    "svelte-hmr": "^0.14.0",
     "vite": "^2.1.2",
-    "vite-plugin-windicss": "^0.9.4"
+    "vite-plugin-windicss": "^0.9.9"
   }
 }

packages/playground/windicss/src/App.svelte

@@ -9,30 +9,21 @@
 
 <style>
 	h1 {
-		@apply text-svelte-500 p-2 bg-green-200;
+		@apply text-svelte-500 p-2 bg-green-200 hover:(bg-blue-400 text-white);
 	}
-
-	/* works */
 	@screen sm {
 		h1 {
 			background-color: rebeccapurple;
 		}
 	}
-
-	/* does not work */
-	/*
-    @screen sm {
-        h1 {
-            @apply text-blue-500;
-        }
-    }
-    */
-	/* does not work either */
-	/*
-    @media (min-width: 640px) {
-        h1 {
-            @apply text-blue-500;
-        }
-    }
-    */
+	@screen sm {
+			h1 {
+					@apply text-blue-500;
+			}
+	}
+	@media (min-width: 640px) {
+			h1 {
+					@apply text-blue-500;
+			}
+	}
 </style>

packages/playground/windicss/vite.config.js

@@ -6,11 +6,8 @@ module.exports = defineConfig(({ command, mode }) => {
 	const isProduction = mode === 'production';
 	return {
 		plugins: [
-			// uses enforce: pre
 			svelte(),
-			vitePluginWindicss({
-				transformCSS: 'pre'
-			})
+			vitePluginWindicss()
 		],
 		build: {
 			minify: isProduction

packages/vite-plugin-svelte/README.md

@@ -38,6 +38,25 @@ It supports all options from rollup-plugin-svelte and some additional options to
 
 For more Information check [options.ts](src/utils/options.ts)
 
+## Integrations for other vite plugins
+
+### Add an extra preprocessor
+
+vite-plugin-svelte uses the svelte compiler to split `.svelte` files into js and css and the svelte compiler requires that the css passed to it is already plain css.
+If you are building a plugin for vite that transforms css and want it to work out of the box with vite-plugin-svelte, you can add a `sveltePreprocess: PreprocessorGroup` to your vite plugin definition and vite-plugin-svelte will pick it up and add it to the list of svelte preprocessors used at runtime.
+
+```js
+const vitePluginCoolCss = {
+	name: 'vite-plugin-coolcss',
+	sveltePreprocess: {
+		/* your PreprocessorGroup here */
+	}
+	/*... your cool css plugin implementation here .. */
+};
+```
+
+Check out [windicss](https://github.com/windicss/vite-plugin-windicss/blob/517eca0cebc879d931c6578a08accadfb112157c/packages/vite-plugin-windicss/src/index.ts#L167)
+
 ## License
 
 MIT

packages/vite-plugin-svelte/src/index.ts

@@ -8,7 +8,7 @@ import { handleHotUpdate } from './handleHotUpdate';
 import { log } from './utils/log';
 import { createCompileSvelte } from './utils/compile';
 import { buildIdParser, IdParser } from './utils/id';
-import { validateInlineOptions, Options, ResolvedOptions, resolveOptions } from './utils/options';
+import { validateInlineOptions, Options, ResolvedOptions, resolveOptions, PreprocessorGroup } from './utils/options';
 import { VitePluginSvelteCache } from './utils/VitePluginSvelteCache';
 
 import { SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './utils/contants';
@@ -25,6 +25,14 @@ export {
 	Processed
 } from './utils/options';
 
+// extend the Vite plugin interface to be able to have `sveltePreprocess` injection
+declare module 'vite' {
+	// eslint-disable-next-line no-unused-vars
+	interface Plugin {
+		sveltePreprocess?: PreprocessorGroup
+	}
+}
+
 const pkg_export_errors = new Set();
 
 export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plugin {

packages/vite-plugin-svelte/src/utils/preprocess.ts

@@ -1,7 +1,7 @@
 import { ResolvedConfig, TransformResult } from 'vite';
 import { Preprocessor, PreprocessorGroup, ResolvedOptions } from './options';
 import { TransformPluginContext } from 'rollup';
-// import type { WindiPluginUtils } from '@windicss/plugin-utils'
+import { log } from './log';
 const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss'];
 
 const supportedScriptLangs = ['ts'];
@@ -58,63 +58,24 @@ export function createVitePreprocessorGroup(
 	} as PreprocessorGroup;
 }
 
-/*
-function createWindicssStylePreprocessorFromVite(
-  windiPlugin: Plugin
-): PreprocessorGroup {
-  const cssTransform = windiPlugin.transform!.bind(
-    (null as unknown) as TransformPluginContext
-  )
-  return {
-    style: async ({attributes,content, filename }) => {
-      const lang = attributes.lang as string || 'css'
-      const transformResult: string = (await cssTransform(
-        content,
-        `${filename}.${lang}`
-      )) as unknown as string
-
-
-      return {
-        code: transformResult
-      }
-    }
-  } as PreprocessorGroup
-}
-
-
-
-function createWindicssApiStylePreprocessorFromVite(
-  windiPlugin: Plugin
-): PreprocessorGroup {
-  const windiAPI = windiPlugin.api as WindiPluginUtils
-
-  return {
-    style: async ({  content, filename }) => {
-      windiAPI.extractFile(content,filename,false);
-      const transformResult = await windiAPI.transformGroupsWithSourcemap(content)
-      if(transformResult) {
-        return {
-          code: transformResult.code,
-          map: transformResult.map as object
-        }
-      }
-    }
-  } as PreprocessorGroup
-}
-
- */
-
 export function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
 	const extraPreprocessors = [];
 	if (options.useVitePreprocess) {
+		log.debug('adding vite preprocessor');
 		extraPreprocessors.push(createVitePreprocessorGroup(config, options));
 	}
-	// TODO
-	/*
-  const windiCssPlugin = config.plugins.find(p => p.name === 'vite-plugin-windicss:css');
-  if (windiCssPlugin) {
-    extraPreprocessors.unshift(createWindicssStylePreprocessorFromVite(windiCssPlugin))
-  }
-   */
+
+	const pluginsWithPreprocessors = config.plugins.filter((p) => p?.sveltePreprocess);
+	if (pluginsWithPreprocessors.length > 0) {
+		log.debug(
+			`adding preprocessors from other vite plugins: ${pluginsWithPreprocessors
+				.map((p) => p.name)
+				.join(', ')}`
+		);
+		extraPreprocessors.push(
+			...pluginsWithPreprocessors.map((p) => p.sveltePreprocess as PreprocessorGroup)
+		);
+	}
+
 	return extraPreprocessors;
 }