feat: automatically identify server in vite (#28)

Author: baiwusanyu-c

README.ZH-CN.md

@@ -159,7 +159,8 @@ export interface Options {
 
    /**
     * 标记是否为开发服务器使用
-    * 因为 unplugin-vue-cssvars uses 在开发服务器上和打包中使用了不同策略
+    * 因为 unplugin-vue-cssvars 在开发服务器上和打包中使用了不同策略,
+    * vite 中如果不传递它，unplugin-vue-cssvars 将自动识别 config 的 command 来决定 server 值
     * @default true
     */
    server?: boolean

README.md

@@ -162,6 +162,8 @@ export interface Options {
    /**
     * Flag whether to start with server at development time,
     * because unplugin-vue-cssvars uses different strategies for building and server development
+    * If it is not passed in vite, unplugin-vue-cssvars will automatically 
+    * recognize the command of config to determine the server value
     * @default true
     */
    server?: boolean

package.json

@@ -63,23 +63,23 @@
     "test:coverage": "vitest --coverage"
   },
   "peerDependencies": {
-    "chalk": "^5.2.0",
+     "chalk": "^4.1.2",
     "estree-walker": "^3.0.3",
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.0.1",
     "hash-sum": "^2.0.0",
     "magic-string": "^0.27.0",
-    "unplugin": "^0.9.6",
+    "unplugin": "^1.3.1",
     "vue": "^3.2.47"
   },
   "dependencies": {
-    "chalk": "^5.2.0",
+     "chalk": "^4.1.2",
     "estree-walker": "^3.0.3",
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.0.1",
     "hash-sum": "^2.0.0",
     "magic-string": "^0.27.0",
-    "unplugin": "^0.9.6",
+    "unplugin": "^1.3.1",
     "vue": "^3.2.47"
   },
   "devDependencies": {

packages/core/index.ts

@@ -11,6 +11,7 @@ import {
   injectCssOnBuild,
   injectCssOnServer,
 } from './inject'
+import type { ResolvedConfig } from 'vite'
 import type { TMatchVariable } from './parser'
 import type { Options } from './types'
 
@@ -25,6 +26,7 @@ const unplugin = createUnplugin<Options>(
     const CSSFileModuleMap = preProcessCSS(userOptions)
     const vbindVariableList = new Map<string, TMatchVariable>()
     let isScriptSetup = false
+    let isServer = false
     return [
       {
         name: NAME,
@@ -41,18 +43,27 @@ const unplugin = createUnplugin<Options>(
               const {
                 vbindVariableListByPath,
                 injectCSSContent,
-              } = getVBindVariableListByPath(descriptor, id, CSSFileModuleMap, !!userOptions.server)
+              } = getVBindVariableListByPath(descriptor, id, CSSFileModuleMap, isServer)
               const variableName = getVariable(descriptor)
               vbindVariableList.set(id, matchVariable(vbindVariableListByPath, variableName))
 
-              if (!userOptions.server)
+              if (!isServer)
                 code = injectCssOnBuild(code, injectCSSContent, descriptor)
             }
             return code
           } catch (err: unknown) {
             this.error(`${NAME} ${err}`)
           }
         },
+        vite: {
+          // Vite plugin
+          configResolved(config: ResolvedConfig) {
+            if (userOptions.server !== undefined)
+              isServer = userOptions.server
+            else
+              isServer = config.command === 'serve'
+          },
+        },
       },
       {
         name: `${NAME}:inject`,
@@ -61,7 +72,7 @@ const unplugin = createUnplugin<Options>(
           // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
           try {
             // transform in dev
-            if (userOptions.server) {
+            if (isServer) {
               if (id.endsWith('.vue')) {
                 const injectRes = injectCSSVars(code, vbindVariableList.get(id), isScriptSetup)
                 code = injectRes.code

packages/core/option/index.ts

@@ -13,7 +13,6 @@ const defaultOption: Options = {
   exclude: DEFAULT_EXCLUDE_REG,
   revoke: true,
   includeCompile: SUPPORT_FILE_LIST,
-  server: true,
 }
 
 export function initOption(option: Options) {

play/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite serve --host",
     "build": "vite build",
     "preview": "vite preview --host"
   },

play/vite.config.ts

@@ -29,7 +29,6 @@ export default defineConfig({
     viteVueCSSVars({
       include: [/.vue/],
       includeCompile: ['**/**.scss'],
-      server: false,
     }),
   ],
 })