refactor: enhance function signatures with debug and globalCss parameters for improved flexibility

Author: Simon-He95

src/cli.ts

@@ -6,7 +6,7 @@ import { setTimeout } from 'node:timers/promises'
 import * as p from '@simon_he/clack-prompts'
 import colorize from '@simon_he/colorize'
 import fg from 'fast-glob'
-import { transfromCode } from './transformCode'
+import { transformCode } from './transformCode'
 import { TRANSFER_FLAG } from './utils'
 
 export async function cli() {
@@ -47,7 +47,7 @@ Options:
     s.start('Converting...')
     const suffix = fileDir.slice(fileDir.lastIndexOf('.') + 1) as SuffixType
     const code = await fs.promises.readFile(fileDir, 'utf-8')
-    const codeTransfer = await transfromCode(code, {
+    const codeTransfer = await transformCode(code, {
       filepath: fileDir,
       type: suffix,
       debug: isDebug,
@@ -128,7 +128,7 @@ Options:
           return
         }
         const code = await fs.promises.readFile(filepath, 'utf-8')
-        const codeTransfer = await transfromCode(code, {
+        const codeTransfer = await transformCode(code, {
           filepath,
           type: suffix,
           debug: isDebug,

src/compilerCss.ts

@@ -3,6 +3,15 @@ import { lessCompiler } from './lessCompiler'
 import { sassCompiler } from './sassCompiler'
 import { stylusCompiler } from './stylusCompiler'
 
+/**
+ * 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,

src/index.ts

@@ -1,5 +1,5 @@
 import { transformAstro } from './transformAstro'
-import { transfromCode } from './transformCode'
+import { transformCode } from './transformCode'
 import { transformHtml } from './transformHtml'
 import { transformJsx } from './transformJsx'
 import { transformSvelte } from './transformSvelte'
@@ -21,11 +21,11 @@ export {
   rollupTransformToUnocss,
   rspackTransformToUnocss,
   transformAstro,
+  transformCode,
   transformHtml,
   transformJsx,
   transformSvelte,
   transformVue,
-  transfromCode,
   viteTransformToUnocss,
   webpackTransformToUnocss,
 }

src/transformAstro.ts

@@ -2,19 +2,29 @@ import { prettierCode } from './prettierCode'
 import { transformVue } from './transformVue'
 import { wrapperVueTemplate } from './wrapperVueTemplate'
 
-export async function transformAstro(
-  code: string,
-  isRem?: boolean,
-  globalCss?: any,
-) {
+interface Options {
+  filepath?: string
+  isRem?: boolean
+  globalCss?: any
+  debug?: boolean
+}
+
+export async function transformAstro(code: string, options?: Options) {
+  const { filepath, isRem, globalCss, debug = false } = options || {}
   const match = code.match(/(---.*---)?(.*(?=<style>))(<style>.*<\/style>)?/s)
   if (!match)
     return code
 
   const [_all, _js, template, css] = match
   const _css = css ? css.replace(/<style>(.*)<\/style>/s, '$1') : ''
   const _template = wrapperVueTemplate(template, _css)
-  const vue = await transformVue(_template, { isJsx: true, isRem, globalCss })
+  const vue = await transformVue(_template, {
+    isJsx: true,
+    isRem,
+    globalCss,
+    filepath,
+    debug,
+  })
   vue.replace(
     /<template>(.*)<\/template>\s*<style scoped>(.*)<\/style>/s,
     (_, newTemplate, newCss) =>

src/transformCode.ts

@@ -14,7 +14,7 @@ interface Options {
   debug?: boolean
 }
 
-export async function transfromCode(code: string, options: Options) {
+export async function transformCode(code: string, options: Options) {
   const {
     filepath,
     isRem,
@@ -25,25 +25,28 @@ export async function transfromCode(code: string, options: Options) {
   } = options || {}
 
   if (debug) {
-    console.log('[DEBUG] transfromCode started:', {
-      filepath,
-      type,
-      isJsx,
-      isRem,
-      codeLength: code.length,
-    })
+    console.log(
+      '[DEBUG] transformCode started:',
+      JSON.stringify({
+        filepath,
+        type,
+        isJsx,
+        isRem,
+        codeLength: code.length,
+      }),
+    )
   }
 
   // 删除代码中的注释部分
   // code = code.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '')
   if (type === 'tsx')
-    return transformJsx(code, filepath, isRem, globalCss)
+    return transformJsx(code, { filepath, isRem, globalCss, debug })
   if (type === 'html')
-    return transformHtml(code, filepath, isRem)
+    return transformHtml(code, { filepath, globalCss, debug })
   if (type === 'svelte')
-    return transformSvelte(code, isRem, globalCss)
+    return transformSvelte(code, { filepath, isRem, globalCss, debug })
   if (type === 'astro')
-    return transformAstro(code, isRem, globalCss)
+    return transformAstro(code, { filepath, isRem, globalCss, debug })
 
   return transformVue(code, { isJsx, filepath, isRem, globalCss, debug })
 }

src/transformCss.ts

@@ -53,11 +53,19 @@ export async function transformCss(
   filepath?: string,
   _isRem?: boolean,
   debug = false,
+  globalCss?: any,
 ): Promise<string> {
   isRem = _isRem
   const allChanges: AllChange[] = []
   const { parse } = await getVueCompilerSfc()
-  let newCode = (await importCss(code, style, filepath, isJsx, debug)) as string
+  let newCode = (await importCss(
+    code,
+    style,
+    filepath,
+    isJsx,
+    debug,
+    globalCss,
+  )) as string
 
   if (debug) {
     console.log(
@@ -330,6 +338,7 @@ async function importCss(
   filepath?: string,
   isJsx?: boolean,
   debug = false,
+  globalCss?: any,
 ) {
   if (debug) {
     console.log(
@@ -367,14 +376,20 @@ async function importCss(
       'utf-8',
     )
     const type = getCssType(url)
-    const css = await compilerCss(content, type)
+    const css = await compilerCss(content, type, url, globalCss)
 
     const [_, beforeStyle] = code.match(/<style.*>(.*)<\/style>/s)!
     code = code.replace(beforeStyle, '')
 
     const vue = wrapperVueTemplate(code, css)
 
-    const transfer = await transformVue(vue, { isJsx, isRem })
+    const transfer = await transformVue(vue, {
+      isJsx,
+      isRem,
+      filepath,
+      globalCss,
+      debug,
+    })
 
     if (diffTemplateStyle(transfer, vue)) {
       code = originCode

src/transformHtml.ts

@@ -8,14 +8,25 @@ import { wrapperVueTemplate } from './wrapperVueTemplate'
 const linkCssReg = /<link.*href="(.+css)".*>/g
 const styleReg = /\s*<style[^>]*>(.*)<\/style>\s*/s
 
-export async function transformHtml(
-  code: string,
-  filepath?: string,
-  isRem?: boolean,
-) {
+interface Options {
+  filepath?: string
+  isRem?: boolean
+  globalCss?: any
+  debug?: boolean
+}
+
+export async function transformHtml(code: string, options?: Options) {
+  const { filepath, isRem, globalCss, debug = false } = options || {}
   const css = await getLinkCss(code, filepath!)
   const style = getStyleCss(code)
-  const newCode = await generateNewCode(css, style, code, isRem)
+  const newCode = await generateNewCode(
+    css,
+    style,
+    code,
+    isRem,
+    globalCss,
+    debug,
+  )
   return prettierCode(newCode)
 }
 
@@ -58,13 +69,20 @@ async function generateNewCode(
   style: string,
   code: string,
   isRem?: boolean,
+  globalCss?: any,
+  debug = false,
 ) {
   // 先处理style
   let template = getBody(code)
   const originBody = template
   if (style) {
     const vue = wrapperVueTemplate(template, style)
-    const transferCode = await transformVue(vue, { isJsx: true, isRem })
+    const transferCode = await transformVue(vue, {
+      isJsx: true,
+      isRem,
+      globalCss,
+      debug,
+    })
     template = transferCode
 
     // 如果没有style scoped 删除style
@@ -76,7 +94,12 @@ async function generateNewCode(
       const { url, content } = c
       const vue = wrapperVueTemplate(template, content)
 
-      const transferCode = await transformVue(vue, { isJsx: true, isRem })
+      const transferCode = await transformVue(vue, {
+        isJsx: true,
+        isRem,
+        globalCss,
+        debug,
+      })
 
       if (diffTemplateStyle(template, transferCode)) {
         // 新增的css全部被转换了,这个link可以被移除了

src/transformJsx.ts

@@ -4,12 +4,15 @@ import { parse as babelParse, traverse as babelTraverse } from '@babel/core'
 import vueJsxPlugin from '@vue/babel-plugin-jsx'
 import { transformVue } from './transformVue'
 
-export async function transformJsx(
-  code: string,
-  filepath?: string,
-  isRem?: boolean,
-  globalCss?: any,
-) {
+interface Options {
+  filepath?: string
+  isRem?: boolean
+  globalCss?: any
+  debug?: boolean
+}
+
+export async function transformJsx(code: string, options?: Options) {
+  const { filepath, isRem, globalCss, debug = false } = options || {}
   try {
     const ast = babelParse(code, {
       babelrc: false,
@@ -49,6 +52,8 @@ export async function transformJsx(
       isJsx,
       isRem,
       globalCss,
+      filepath,
+      debug,
     })
     // vueTransfer = vueTransfer.replace(/class/g, 'className')
     if (cssPath) {