feat: enhance stylusCompiler to support debug logging and improved error handling

fix: update transformCss to correctly handle CSS class patterns

refactor: change import path for CssType in transformVue and utils

chore: add isNodeEnvironment utility function to check runtime environment

test: update snapshots to reflect changes in component structure and styles

Author: Simon-He95

package.json

@@ -80,26 +80,41 @@
     "test": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "peerDependencies": {
+    "less": "^3.0.0 || ^4.0.0",
+    "less-plugin-module-resolver": "^1.0.0",
+    "sass": "^1.0.0",
+    "stylus": "^0.50.0 || ^0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "less": {
+      "optional": true
+    },
+    "less-plugin-module-resolver": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "stylus": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@babel/core": "^7.27.4",
     "@rollup/pluginutils": "^5.2.0",
-    "@simon_he/clack-prompts": "^0.8.11",
     "@unocss/core": "^0.50.8",
     "@unocss/preset-uno": "^0.50.8",
     "@vue/babel-plugin-jsx": "^1.4.0",
     "@vue/compiler-sfc": "^3.5.17",
     "fast-glob": "^3.3.3",
-    "less": "^4.3.0",
-    "less-plugin-module-resolver": "^1.0.3",
     "node-html-parser": "^7.0.1",
-    "picocolors": "^1.1.1",
-    "sass": "^1.89.2",
-    "stylus": "^0.63.0",
     "transform-to-unocss-core": "^0.0.68",
     "unplugin": "^2.3.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.16.1",
+    "@simon_he/clack-prompts": "^0.8.11",
     "@simon_he/colorize": "^0.0.1",
     "@types/babel__core": "^7.20.5",
     "@types/less": "^3.0.8",
@@ -108,11 +123,16 @@
     "bumpp": "^8.2.1",
     "eslint": "^8.57.1",
     "find-up": "^6.3.0",
+    "less": "^4.3.0",
+    "less-plugin-module-resolver": "^1.0.3",
     "lint-staged": "^13.3.0",
     "magic-string": "^0.30.17",
+    "picocolors": "^1.1.1",
     "prettier": "^3.6.0",
     "rimraf": "^6.0.1",
+    "sass": "^1.89.2",
     "simple-git-hooks": "^2.13.0",
+    "stylus": "^0.63.0",
     "transform-to-unocss": "workspace:^",
     "tsdown": "^0.9.9",
     "tsx": "^3.14.0",

pnpm-lock.yaml

@@ -1,30 +1,24 @@
-import type { CssType } from './utils'
+import type { CssType } from './type'
+import process from 'node:process'
 import { lessCompiler } from './lessCompiler'
 import { sassCompiler } from './sassCompiler'
 import { stylusCompiler } from './stylusCompiler'
+import { isNodeEnvironment } from './utils'
 
-/**
- * Compiles CSS from different preprocessors (Sass, Less, Stylus) to standard CSS
- * @param css - The CSS/preprocessor code to compile
- * @param lang - The language type ('css' | 'scss' | 'less' | 'styl')
- * @param filepath - The file path for resolving imports and relative paths.
- *                   In plugin mode, this should always be provided by the build tool.
- * @param globalCss - Global CSS configuration for preprocessors
- * @returns Compiled CSS string or original CSS if no compilation needed
- */
 export function compilerCss(
   css: string,
   lang: CssType,
-  filepath?: string,
-  globalCss?: any,
+  filepath: string = isNodeEnvironment() ? process.cwd() : '',
+  globalCss?: string,
+  debug?: boolean,
 ) {
   switch (lang) {
-    case 'styl':
-      return stylusCompiler(css, filepath, globalCss?.styl?.additionalData)
+    case 'stylus':
+      return stylusCompiler(css, filepath, globalCss, debug)
     case 'less':
-      return lessCompiler(css, filepath, globalCss?.less?.additionalData)
+      return lessCompiler(css, filepath, globalCss, debug)
     case 'scss':
-      return sassCompiler(css, filepath, globalCss?.scss?.additionalData)
+      return sassCompiler(css, filepath, globalCss, debug)
     default:
       return css
   }

src/compilerCss.ts

@@ -1,39 +1,58 @@
-import path from 'node:path'
-import process from 'node:process'
-import * as Url from 'node:url'
-
 export async function lessCompiler(
   css: string,
-  filepath?: string,
+  filepath: string,
   globalCss?: string,
-  alias?: { [key: string]: string },
+  debug?: boolean,
 ) {
   if (typeof window !== 'undefined')
     throw new Error('lessCompiler is not supported in this browser')
-  const { LessPluginModuleResolver } = await import(
-    'less-plugin-module-resolver'
-  )
 
-  let result = globalCss
-    ? `${globalCss.replace(/@(?:include|import)\s+["']([^"']*)['"]/g, (_, v) =>
-      _.replace(v, Url.pathToFileURL(path.resolve(process.cwd(), v)) as any))}${css}`
-    : css
+  if (debug) {
+    console.log(
+      `[transform-to-tailwindcss] Compiling LESS file: ${filepath || 'unknown file'}`,
+    )
+  }
+
+  let result = globalCss ? `${globalCss}${css}` : css
+
   try {
+    // 使用用户项目中的 less 版本（通过 peerDependencies）
+    const less = await import('less')
+    const { LessPluginModuleResolver } = await import(
+      'less-plugin-module-resolver'
+    )
+
     result = (
-      await (
-        await import('less')
-      ).default.render(result, {
+      await less.default.render(result, {
         filename: filepath,
         plugins: [
           new LessPluginModuleResolver({
-            alias: alias || {},
+            alias: {},
           }),
         ],
       })
     ).css
     return result
   }
   catch (error: any) {
+    if (
+      error.code === 'MODULE_NOT_FOUND'
+      || error.message.includes('Cannot resolve module')
+    ) {
+      const missingModule = error.message.includes(
+        'less-plugin-module-resolver',
+      )
+        ? 'less-plugin-module-resolver'
+        : 'less'
+      throw new Error(
+        `${missingModule} not found. Please install it in your project:\n`
+        + `npm install ${missingModule}\n`
+        + `or\n`
+        + `yarn add ${missingModule}\n`
+        + `or\n`
+        + `pnpm add ${missingModule}`,
+      )
+    }
     console.error(
       `Error:\n transform-to-unocss(lessCompiler) ${error.toString()}`,
     )