feat: 支持多种格式注释&支持Mpx文件过滤

Author: Blackgan3

packages/webpack-plugin/lib/index.js

@@ -58,7 +58,6 @@ const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
-const styleStripConditionalPath = normalize.lib('style-compiler/strip-conditional-loader')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
@@ -1918,42 +1917,9 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
-
-        // 样式 loader 类型检测和条件编译 loader 插入的工具函数
-        const STYLE_LOADER_TYPES = ['stylus-loader', 'sass-loader', 'less-loader', 'css-loader', wxssLoaderPath]
-        const injectStyleStripLoader = (loaders) => {
-          // 检查是否已经存在 stripLoader
-          const hasStripLoader = loaders.some(loader => {
-            const loaderPath = toPosix(loader.loader)
-            return loaderPath.includes('style-compiler/strip-conditional-loader')
-          })
-          if (hasStripLoader) {
-            return
-          }
-          const loaderTypes = new Map(STYLE_LOADER_TYPES.map(type => [`node_modules/${type}`, -1]))
-          loaders.forEach((loader, index) => {
-            const currentLoader = toPosix(loader.loader)
-            for (const [key] of loaderTypes) {
-              if (currentLoader.includes(key)) {
-                loaderTypes.set(key, index)
-                break
-              }
-            }
-          })
-          const targetIndex = STYLE_LOADER_TYPES
-            .map(type => loaderTypes.get(`node_modules/${type}`))
-            .find(index => index !== -1)
-
-          if (targetIndex !== undefined) {
-            loaders.splice(targetIndex + 1, 0, { loader: styleStripConditionalPath })
-          }
-        }
         if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
           const type = queryObj.type
           const extract = queryObj.extract
-          if (type === 'styles') {
-            injectStyleStripLoader(loaders)
-          }
 
           switch (type) {
             case 'styles':
@@ -2006,7 +1972,6 @@ try {
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
         if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
-          injectStyleStripLoader(loaders)
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1

packages/webpack-plugin/lib/style-compiler/strip-conditional-loader.js

@@ -11,7 +11,12 @@ class Node {
 
 // 提取 css string 为 token
 function tokenize(cssString) {
-  const regex = /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*\*\//g
+  // Support /* ... */, // ..., and <!-- ... --> styles
+  // 1. : /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*\*\//g
+  // 2. : /\/\/\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*$/gm
+  // 3. : /<!--\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*-->/g
+  // Combined:
+  const regex = /(?:\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*\*\/)|(?:\/\/\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*)|(?:<!--\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*-->)/g
   const tokens = []
   let lastIndex = 0
   let match
@@ -22,11 +27,15 @@ function tokenize(cssString) {
       const text = cssString.substring(lastIndex, match.index)
       tokens.push({ type: 'text', content: text })
     }
-    // match[1] 为关键字：if, elif, else, endif
-    // match[2] 为条件（如果存在）
+    // 1,2: (/* ... */)
+    // 3,4: (// ...)
+    // 5,6: (<!-- ... -->)
+    const type = match[1] || match[3] || match[5]
+    const condition = (match[2] || match[4] || match[6])
+
     tokens.push({
-      type: match[1], // 'if'、'elif'、'else' 或 'endif'
-      condition: match[2] ? match[2].trim() : null
+      type: type,
+      condition: condition ? condition.trim() : null
     })
     lastIndex = regex.lastIndex
   }
@@ -137,30 +146,30 @@ const rawReadFileSync = fs.readFileSync
 const rawReadFile = fs.readFile
 
 function rewriteFSForCss() {
-  proxyReadFileSync = function (path, options) {
-    return rawReadFileSync.call(fs, path, options)
-  }
-  proxyReadFile = function (path, options, callback) {
-    return rawReadFile.call(fs, path, options, callback)
-  }
-  fs.readFileSync = function (path, options) {
-    return proxyReadFileSync(path, options)
+  fs.readFileSync = function () {
+    return (proxyReadFileSync || rawReadFileSync).apply(fs, arguments)
   }
-  fs.readFile = function (path, options, callback) {
-    return proxyReadFile(path, options, callback)
+  fs.readFile = function () {
+    return (proxyReadFile || rawReadFile).apply(fs, arguments)
   }
 }
 
 function startFSStripForCss(defs) {
   function shouldStrip(path) {
-    return typeof path === 'string' && /\.(styl|scss|sass|less|css)$/.test(path)
+    return typeof path === 'string' && /\.(styl|scss|sass|less|css|mpx)$/.test(path)
   }
   proxyReadFileSync = function (path, options) {
     const content = rawReadFileSync.call(fs, path, options)
     if (shouldStrip(path)) {
       try {
         if (typeof content === 'string') {
           return stripCondition(content, defs)
+        } else if (Buffer.isBuffer(content)) {
+          const str = content.toString('utf-8')
+          const result = stripCondition(str, defs)
+          if (result !== str) {
+            return Buffer.from(result, 'utf-8')
+          }
         }
       } catch (e) {
         return content
@@ -169,31 +178,38 @@ function startFSStripForCss(defs) {
     return content
   }
 
-  proxyReadFile = function (path, options, callback) {
-    let cb = callback
-    if (typeof options === 'function') {
-      cb = options
-      options = null
+  proxyReadFile = function () {
+    const args = Array.from(arguments)
+    const callback = args[args.length - 1]
+    const path = args[0]
+
+    if (typeof callback !== 'function') {
+      return rawReadFile.apply(fs, args)
     }
 
     const wrappedCallback = (err, data) => {
-      if (err) return cb(err)
+      if (err) return callback(err)
       if (shouldStrip(path)) {
         try {
           if (typeof data === 'string') {
             const result = stripCondition(data, defs)
-            return cb(null, result)
+            return callback(null, result)
+          } else if (Buffer.isBuffer(data)) {
+            const content = data.toString('utf-8')
+            const result = stripCondition(content, defs)
+            if (result !== content) {
+              return callback(null, Buffer.from(result, 'utf-8'))
+            }
           }
         } catch (e) {
-          return cb(null, data)
+          return callback(null, data)
         }
       }
-      cb(null, data)
+      callback(null, data)
     }
-    if (options) {
-      return rawReadFile.call(fs, path, options, wrappedCallback)
-    }
-    return rawReadFile.call(fs, path, wrappedCallback)
+
+    args[args.length - 1] = wrappedCallback
+    return rawReadFile.apply(fs, args)
   }
 }
 /**