feat: support css preprocess options for different languages (#483)

README.md

@@ -224,6 +224,25 @@ Or import them from JavaScript:
 import './style.scss'
 ```
 
+#### Passing Options to Pre-Processor
+
+> 1.0.0-beta.9+
+> And if you want to pass options to the pre-processor, you can do that using the `cssPreprocessOptions` option in the config (see [Config File](#config-file) below).
+> For example, to pass some shared global variables to all your Less styles:
+
+```js
+// vite.config.js
+module.exports = {
+  cssPreprocessOptions: {
+    less: {
+      modifyVars: {
+        'preprocess-custom-color': 'green'
+      }
+    }
+  }
+}
+```
+
 ### JSX
 
 `.jsx` and `.tsx` files are also supported. JSX transpilation is also handled via `esbuild`.

package.json

@@ -93,7 +93,7 @@
     "rollup": "^2.20.0",
     "rollup-plugin-dynamic-import-variables": "^1.0.1",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^6.0.0-beta.8",
+    "rollup-plugin-vue": "^6.0.0-beta.9",
     "rollup-plugin-web-worker-loader": "^1.3.0",
     "selfsigned": "^1.10.7",
     "slash": "^3.0.0",

playground/vite.config.ts

@@ -17,8 +17,10 @@ const config: UserConfig = {
     link: ['optimize-linked']
   },
   cssPreprocessOptions: {
-    modifyVars: {
-      'preprocess-custom-color': 'green'
+    less: {
+      modifyVars: {
+        'preprocess-custom-color': 'green'
+      }
     }
   }
 }

src/node/build/buildPluginCss.ts

@@ -16,6 +16,7 @@ import {
   SFCAsyncStyleCompileOptions
 } from '@vue/compiler-sfc'
 import chalk from 'chalk'
+import { CssPreprocessOptions } from '../config'
 
 const debug = require('debug')('vite:build:css')
 
@@ -29,7 +30,7 @@ interface BuildCssOption {
   minify?: BuildConfig['minify']
   inlineLimit?: number
   cssCodeSplit?: boolean
-  preprocessOptions?: SFCAsyncStyleCompileOptions['preprocessOptions']
+  preprocessOptions?: CssPreprocessOptions
   modulesOptions?: SFCAsyncStyleCompileOptions['modulesOptions']
 }
 
@@ -40,7 +41,7 @@ export const createBuildCssPlugin = ({
   minify = false,
   inlineLimit = 0,
   cssCodeSplit = true,
-  preprocessOptions = {},
+  preprocessOptions,
   modulesOptions = {}
 }: BuildCssOption): Plugin => {
   const styles: Map<string, string> = new Map()
@@ -53,6 +54,11 @@ export const createBuildCssPlugin = ({
         // if this is a Vue SFC style request, it's already processed by
         // rollup-plugin-vue and we just need to rewrite URLs + collect it
         const isVueStyle = /\?vue&type=style/.test(id)
+        const preprocessLang = id.replace(
+          cssPreprocessLangRE,
+          '$2'
+        ) as SFCAsyncStyleCompileOptions['preprocessLang']
+
         const result = isVueStyle
           ? css
           : await compileCss(
@@ -64,10 +70,7 @@ export const createBuildCssPlugin = ({
                 filename: id,
                 scoped: false,
                 modules: cssModuleRE.test(id),
-                preprocessLang: id.replace(
-                  cssPreprocessLangRE,
-                  '$2'
-                ) as SFCAsyncStyleCompileOptions['preprocessLang'],
+                preprocessLang,
                 preprocessOptions,
                 modulesOptions
               },

src/node/build/index.ts

@@ -163,10 +163,7 @@ export async function createBaseRollupPlugins(
       postcssOptions,
       postcssPlugins,
       preprocessStyles: true,
-      preprocessOptions: {
-        includePaths: ['node_modules'],
-        ...cssPreprocessOptions
-      },
+      preprocessOptions: cssPreprocessOptions,
       preprocessCustomRequire: (id: string) => require(resolveFrom(root, id)),
       compilerOptions: options.vueCompilerOptions,
       cssModulesOptions: {
@@ -239,7 +236,7 @@ export async function build(options: BuildConfig): Promise<BuildResult> {
     shouldPreload = null,
     env = {},
     mode = 'production',
-    cssPreprocessOptions = {},
+    cssPreprocessOptions,
     cssModuleOptions = {}
   } = options
 

src/node/config.ts

@@ -23,6 +23,14 @@ import { IKoaProxiesOptions } from 'koa-proxies'
 import { ServerOptions } from 'https'
 import { lookupFile } from './utils'
 
+export type PreprocessLang = NonNullable<
+  SFCStyleCompileOptions['preprocessLang']
+>
+
+export type PreprocessOptions = SFCStyleCompileOptions['preprocessOptions']
+
+export type CssPreprocessOptions = Record<PreprocessLang, PreprocessOptions>
+
 export { Resolver, Transform }
 
 /**
@@ -120,7 +128,7 @@ export interface SharedConfig {
   /**
    * CSS preprocess options
    */
-  cssPreprocessOptions?: SFCStyleCompileOptions['preprocessOptions']
+  cssPreprocessOptions?: CssPreprocessOptions
   /**
    * CSS modules options
    */

src/node/server/serverPluginCss.ts

@@ -137,13 +137,15 @@ export const cssPlugin: ServerPlugin = ({ root, app, watcher, resolver }) => {
 
     const css = (await readBody(ctx.body))!
     const filePath = resolver.requestToFile(ctx.path)
+    const preprocessLang = ctx.path.replace(cssPreprocessLangRE, '$2')
+
     const result = await compileCss(root, ctx.path, {
       id: '',
       source: css,
       filename: filePath,
       scoped: false,
       modules: ctx.path.includes('.module'),
-      preprocessLang: ctx.path.replace(cssPreprocessLangRE, '$2') as any,
+      preprocessLang,
       preprocessOptions: ctx.config.cssPreprocessOptions,
       modulesOptions: ctx.config.cssModuleOptions
     })

src/node/server/serverPluginVue.ts

@@ -156,7 +156,7 @@ export const vuePlugin: ServerPlugin = ({
         index,
         filePath,
         publicPath,
-        config.cssPreprocessOptions
+        config
       )
       ctx.type = 'js'
       ctx.body = codegenCss(`${id}-${index}`, result.code, result.modules)

src/node/utils/cssUtils.ts

@@ -86,6 +86,26 @@ export async function compileCss(
     plugins: postcssPlugins
   } = await resolvePostcssOptions(root, isBuild)
 
+  if (preprocessLang) {
+    preprocessOptions = preprocessOptions[preprocessLang] || preprocessOptions
+    // include node_modules for imports by default
+    switch (preprocessLang) {
+      case 'scss':
+      case 'sass':
+        preprocessOptions = {
+          includePaths: ['node_modules'],
+          ...preprocessOptions
+        }
+        break
+      case 'less':
+      case 'stylus':
+        preprocessOptions = {
+          paths: ['node_modules'],
+          ...preprocessOptions
+        }
+    }
+  }
+
   return await compileStyleAsync({
     source,
     filename,
@@ -99,12 +119,9 @@ export async function compileCss(
       ...modulesOptions
     },
 
-    preprocessLang: preprocessLang,
+    preprocessLang,
     preprocessCustomRequire: (id: string) => require(resolveFrom(root, id)),
-    preprocessOptions: {
-      includePaths: ['node_modules'],
-      ...preprocessOptions
-    },
+    preprocessOptions,
 
     postcssOptions,
     postcssPlugins

yarn.lock

@@ -5843,10 +5843,10 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^2.1.2"
     terser "^4.6.2"
 
-rollup-plugin-vue@^6.0.0-beta.8:
-  version "6.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.8.tgz#7ad7cb9cdeee1475919c2f0e33fe0b2dfdeb59bd"
-  integrity sha512-lSUjMMiDvkf9yZEBsTH0IdN4zBNC+ZLfDcrI92oeJkuO4nzLuEbw1yxRwVWeeEmM9AZAzpDGcYKNwKQUakbOug==
+rollup-plugin-vue@^6.0.0-beta.9:
+  version "6.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.9.tgz#88d3381bb25c0d9bc534c50cc7eb4b0c3715862a"
+  integrity sha512-VlSbALaec9WHWiEIeLsoNdBQ24iSr/qaBvekewGzHcxphgy2o4Qz1/kbpuH1zHU1DsY8mn96qTprW9KhbuYaaA==
   dependencies:
     debug "^4.1.1"
     hash-sum "^2.0.0"