feat: Preprocessor dependency decoupling

Author: baiwusanyu-c

README.ZH-CN.md

@@ -143,8 +143,47 @@ export interface Options {
    * 时压缩选项，`revoke` 则可以在打包时将注入的代码删除
    */
   revoke?: boolean
+
+   /**
+    * 预处理器
+    * unplugin-vue-cssvars包没有集成预处理器，
+    * 当你想在预处理器文件中使用unplugin-vue-cssvars时，
+    * 请将预处理器传递给unplugin-vue-cssvars
+    * @property { sass | less | stylus }
+    */
+   preprocessor?: PreProcessor
+
+   /**
+    * 选择需要处理编译的文件，默认是css
+    * 例如：如果你想要处理.scss文件，那么你可以传入 ['** /**.sass']
+    * @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
+    * @default ['** /**.css']
+    */
+   includeCompile?: Array<string>
 }
 ```
+### 使用预处理器
+`unplugin-vue-cssvars` 包没有集成预处理器， 当你想在预处理器文件中使用 `unplugin-vue-cssvars` 时， 请将预处理器传递给 `unplugin-vue-cssvars`
+
+````typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { viteVueCSSVars } from 'unplugin-vue-cssvars'
+import sass from 'sass'
+import type { PluginOption } from 'vite'
+export default defineConfig({
+  plugins: [
+    viteVueCSSVars({
+       preprocessor: { sass },
+       includeCompile: ['**/**.css', '**/**.scss'],
+     }) as PluginOption,
+  ],
+})
+````
+在上面的例子中，如果你的项目使用了 `scss`，那么你需要配置 `preprocessor: { sass }`, 
+值得注意的是，你还需要配置 `includeCompile: ['**/**.css', '**/**.scss']`,
+因为读取哪些文件（.sass 或 .less，还是 .styl）来使用 `unplugin-vue-cssvars` 完全由你来控制。
+
 ### 关于 revoke 详细说明
 > 💡 正式版本以解决重复代码问题，正式版本不再需要设置
 

README.md

@@ -143,8 +143,49 @@ export interface Options {
     * there may be duplicate css after packaging, here we clear it
     */
    revoke?: boolean
+
+   /**
+    * preprocessor
+    * the unplugin-vue-cssvars package does not integrate a preprocessor,
+    * when you want to use unplugin-vue-cssvars in the preprocessor file,
+    * please pass the preprocessor to unplugin-vue-cssvars
+    * @property { sass | less | stylus }
+    */
+   preprocessor?: PreProcessor
+
+   /**
+    * Specify the file to be compiled, for example,
+    * if you want to compile scss, then you can pass in ['** /**.sass']
+    * @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
+    * @default ['** /**.css']
+    */
+   includeCompile?: Array<string>
 }
 ```
+### use preprocessor
+the `unplugin-vue-cssvars` package does not integrate a preprocessor,
+when you want to use `unplugin-vue-cssvars` in the preprocessor file,
+please pass the preprocessor to `unplugin-vue-cssvars`
+
+````typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { viteVueCSSVars } from 'unplugin-vue-cssvars'
+import sass from 'sass'
+import type { PluginOption } from 'vite'
+export default defineConfig({
+  plugins: [
+    viteVueCSSVars({
+       preprocessor: { sass },
+       includeCompile: ['**/**.css', '**/**.scss'],
+     }) as PluginOption,
+  ],
+})
+````
+In the above example, if your project uses `scss`, then you need to configure `preprocessor: { sass }`,
+It is worth noting that you also need to configure `includeCompile: ['**/**.css', '**/**.scss']`,
+Because it is entirely up to you to read which files (.sass or .less, or .styl) to use `unplugin-vue-cssvars`.
+
 ### Details about revoke
 > 💡 v1.0.0 version to solve the problem of duplicate code, no longer need to set
 

build/index.ts

@@ -17,7 +17,7 @@ const baseConfig = {
   ],
   format: ['cjs', 'esm'],
   clean: true,
-  minify: false,
+  minify: true,
   dts: false,
   outDir: path.resolve(process.cwd(), '../dist'),
 

package.json

@@ -18,7 +18,8 @@
     "rspack",
     "webpack",
     "webpack4",
-    "webpack5"
+    "webpack5",
+    "stylus"
   ],
   "license": "MIT",
   "author": "baiwusanyu-c",
@@ -90,9 +91,7 @@
     "@types/estree": "^0.0.48",
     "@types/fs-extra": "^11.0.1",
     "@types/gulp": "^4.0.10",
-    "@types/less": "^3.0.3",
     "@types/node": "^18.0.0",
-    "@types/stylus": "^0.48.38",
     "@unplugin-vue-cssvars/build": "workspace:*",
     "@unplugin-vue-cssvars/core": "workspace:*",
     "@unplugin-vue-cssvars/entry": "workspace:*",
@@ -110,14 +109,11 @@
     "git-ensure": "^0.1.0",
     "gulp": "^4.0.2",
     "jsdom": "^20.0.0",
-    "less": "^4.1.3",
     "lint-staged": "^13.1.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^4.3.1",
     "rollup": "^3.19.1",
-    "sass": "^1.59.3",
     "simple-git-hooks": "^2.8.1",
-    "stylus": "^0.59.0",
     "typescript": "4.9.4",
     "vite": "^4.0.1",
     "vitest": "^0.29.2"

packages/core/option/index.ts

@@ -2,6 +2,7 @@ import { resolve } from 'path'
 import {
   DEFAULT_EXCLUDE_REG,
   DEFAULT_INCLUDE_REG,
+  SUPPORT_FILE_LIST,
   extend,
 } from '@unplugin-vue-cssvars/utils'
 import type { Options } from '../types'
@@ -11,6 +12,8 @@ const defaultOption: Options = {
   include: DEFAULT_INCLUDE_REG,
   exclude: DEFAULT_EXCLUDE_REG,
   revoke: true,
+  preprocessor: {},
+  includeCompile: SUPPORT_FILE_LIST,
 }
 
 export function initOption(option: Options) {

packages/core/package.json

@@ -11,6 +11,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "@unplugin-vue-cssvars/utils": "workspace:*"
+    "@types/less": "^3.0.3",
+    "@types/stylus": "^0.48.38",
+    "@unplugin-vue-cssvars/utils": "workspace:*",
+    "sass": "^1.60.0"
   }
 }

packages/core/runtime/pre-process-css.ts

@@ -8,18 +8,15 @@ import {
   INJECT_PREFIX_FLAG,
   INJECT_SUFFIX_FLAG,
   SUPPORT_FILE,
-  SUPPORT_FILE_LIST,
   completeSuffix,
   transformSymbol,
 } from '@unplugin-vue-cssvars/utils'
 import MagicString from 'magic-string'
-import sass from 'sass'
-import less from 'less'
-import stylus from 'stylus'
 import { parseImports } from '../parser'
 import { transformQuotes } from '../transform/transform-quotes'
+import type { ICSSFileMap, PreProcessor, SearchGlobOptions } from '../types'
 import type { ImportStatement } from '../parser'
-import type { ICSSFileMap, SearchGlobOptions } from '../types'
+
 import type { CssNode } from 'css-tree'
 
 /**
@@ -85,10 +82,10 @@ export function walkCSSTree(
  * @param options 选项参数 Options
  */
 export function preProcessCSS(options: SearchGlobOptions): ICSSFileMap {
-  const { rootDir } = options
+  const { rootDir, preprocessor, includeCompile } = options
 
   // 获得文件列表
-  const files = fg.sync(SUPPORT_FILE_LIST, {
+  const files = fg.sync(includeCompile!, {
     ignore: FG_IGNORE_LIST,
     cwd: rootDir,
   })
@@ -112,7 +109,7 @@ export function preProcessCSS(options: SearchGlobOptions): ICSSFileMap {
     const orgCode = fs.readFileSync(resolve(rootDir!, file), { encoding: 'utf-8' })
     const { imports } = parseImports(orgCode, [transformQuotes])
     const codeNoImporter = getContentNoImporter(orgCode, imports)
-    let code = generateCSSCode(codeNoImporter, fileSuffix)
+    let code = generateCSSCode(codeNoImporter, fileSuffix, preprocessor!)
     code = setImportToCompileRes(code, imports)
 
     // parse css ast
@@ -154,29 +151,41 @@ export function preProcessCSS(options: SearchGlobOptions): ICSSFileMap {
   return cssFiles
 }
 
-export function generateCSSCode(code: string, suffix: string) {
+export function generateCSSCode(code: string, suffix: string, preprocessor: PreProcessor) {
   let res = ''
   switch (suffix) {
     case `.${SUPPORT_FILE.SCSS}`: // scss
       // @import 有 css 和 scss的同名文件，会编译 scss
       // @import 编译 scss，会一直编译，一直到遇到 import 了一个 css 或没有 import 为止
       // 这里先分析出 imports，在根据其内容将 sass 中 import 删除
       // 编译 sass 为 css，再复原
-      res = sass.compileString(code).css
+      if (!preprocessor.sass)
+        throw new Error('[unplugin-vue-cssvars]: Missing preprocessor \'sass\' dependency, please see readme to resolve this problem')
+
+      res = preprocessor.sass.compileString(code).css
       break
     case `.${SUPPORT_FILE.SASS}`: // sass
-      res = sass.compileString(code, { syntax: 'indented' }).css
+      if (!preprocessor.sass)
+        throw new Error('[unplugin-vue-cssvars]: Missing preprocessor \'sass\' dependency, please see readme to resolve this problem')
+
+      res = preprocessor.sass.compileString(code, { syntax: 'indented' }).css
       break
     case `.${SUPPORT_FILE.LESS}`: // less
-      less.render(code, {}, (error, output) => {
+      if (!preprocessor.less)
+        throw new Error('[unplugin-vue-cssvars]: Missing preprocessor \'less\' dependency, please see readme to resolve this problem')
+
+      preprocessor.less.render(code, {}, (error, output) => {
         if (error)
           throw error
 
         res = output ? output.css : ''
       })
       break
     case `.${SUPPORT_FILE.STYL}`: // stylus
-      stylus.render(code, {}, (error: Error, css: string) => {
+      if (!preprocessor.stylus)
+        throw new Error('[unplugin-vue-cssvars]: Missing preprocessor \'stylus\' dependency, please see readme to resolve this problem')
+
+      preprocessor.stylus.render(code, {}, (error: Error, css: string) => {
         if (error)
           throw error
 

packages/core/types.ts

@@ -1,5 +1,8 @@
 import type { Node } from '@babel/types'
 import type { FilterPattern } from '@rollup/pluginutils'
+import type * as less from 'less'
+import type * as sass from 'sass'
+import type * as stylus from 'stylus'
 export interface Options {
   /**
    * Provide path which will be transformed
@@ -22,8 +25,30 @@ export interface Options {
    * there may be duplicate css after packaging, here we clear it
    */
   revoke?: boolean
+
+  /**
+   * preprocessor
+   * the unplugin-vue-cssvars package does not integrate a preprocessor,
+   * when you want to use unplugin-vue-cssvars in the preprocessor file,
+   * please pass the preprocessor to unplugin-vue-cssvars
+   * @property { sass | less | stylus }
+   */
+  preprocessor?: PreProcessor
+
+  /**
+   * Specify the file to be compiled, for example,
+   * if you want to compile scss, then you can pass in ['** /**.sass']
+   * @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
+   * @default ['** /**.css']
+   */
+  includeCompile?: Array<string>
 }
 
+export declare interface PreProcessor {
+  sass?: typeof sass
+  less?: typeof less
+  stylus?: typeof stylus
+}
 export declare type SearchGlobOptions = Options
 
 export interface ICSSFile {

play/src/App.vue

@@ -70,7 +70,7 @@ export default {
   </div>
 </template>
 
-<style scoped lang="sass">
+<style scoped lang="scss">
 /* foo.scss -> test2.css -> test.css */
 /* foo.scss -> test.scss -> test2.css */
 
@@ -79,5 +79,5 @@ export default {
    color: v-bind(color2)
  }*/
 
-@import ./assets/sass/foo
+@import './assets/scss/foo';
 </style>

play/vite.config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
     vue(),
     viteVueCSSVars({
       include: [/App.vue/],
+      includeCompile: ['**/**.css'],
     }),
   ],
 })