From 0157ab628539812b9a7e6266912d5a3d83531e4d Mon Sep 17 00:00:00 2001
From: xuegan <xuegan@didiglobal.com>
Date: Wed, 6 May 2026 19:56:48 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20css=20strip-conditional=20=E5=AF=B9?=
 =?UTF-8?q?=E4=BA=8EMpx=E6=96=87=E4=BB=B6=E6=B7=BB=E5=8A=A0<style>?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=99=90=E5=88=B6=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/style-compiler/strip-conditional.js   |  73 ++++++++-
 .../common/style-strip-condition.spec.js      | 154 +++++++++++++++++-
 2 files changed, 222 insertions(+), 5 deletions(-)

diff --git a/packages/webpack-plugin/lib/style-compiler/strip-conditional.js b/packages/webpack-plugin/lib/style-compiler/strip-conditional.js
index b3de8cc391..a99aa500b6 100644
--- a/packages/webpack-plugin/lib/style-compiler/strip-conditional.js
+++ b/packages/webpack-plugin/lib/style-compiler/strip-conditional.js
@@ -143,6 +143,60 @@ function stripCondition(content, defs) {
   return traverseAndEvaluate(ast, defs)
 }
 
+/**
+ * 检测内容中是否包含条件编译指令
+ * @param {string} content
+ * @returns {boolean}
+ */
+function hasConditionalDirective(content) {
+  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*-->)/
+  return regex.test(content)
+}
+
+/**
+ * 处理 .mpx 文件内容：
+ * 1. 仅对 <style> 块中的内容进行条件编译裁剪
+ * 2. 非 <style> 区域出现条件指令时通过 logStripError 报错并返回原始内容
+ * @param {string} content .mpx 文件完整内容
+ * @param {Record<string, any>} defs 条件变量定义
+ * @param {string} path 文件路径
+ * @returns {string} 处理后的内容
+ */
+function stripConditionForMpx(content, defs, path) {
+  // 匹配 <style ...> ... </style> 块（支持多个 style 块）
+  const styleRegex = /(<style[^>]*>)([\s\S]*?)(<\/style>)/gi
+  let lastIndex = 0
+  let result = ''
+  let match
+
+  while ((match = styleRegex.exec(content)) !== null) {
+    // match.index 到 match[1] 结束前的内容为非 style 区域
+    const beforeStyle = content.substring(lastIndex, match.index)
+    // 检测非 style 区域是否包含条件指令
+    if (hasConditionalDirective(beforeStyle)) {
+      logStripError(path, new Error('@mpx conditional directives are only allowed inside <style> blocks in .mpx files'))
+      return content
+    }
+    result += beforeStyle
+    // 处理 style 块内容
+    const styleOpen = match[1]
+    const styleContent = match[2]
+    const styleClose = match[3]
+    const strippedStyle = stripCondition(styleContent, defs)
+    result += styleOpen + strippedStyle + styleClose
+    lastIndex = styleRegex.lastIndex
+  }
+
+  // 处理最后一个 style 块之后的剩余内容
+  const remaining = content.substring(lastIndex)
+  if (hasConditionalDirective(remaining)) {
+    logStripError(path, new Error('@mpx conditional directives are only allowed inside <style> blocks in .mpx files'))
+    return content
+  }
+  result += remaining
+  return result
+}
+
 let proxyReadFileSync
 let proxyReadFile
 const rawReadFileSync = fs.readFileSync
@@ -180,15 +234,24 @@ function startFSStripForCss(defs) {
   function shouldStrip(path) {
     return typeof path === 'string' && /\.(styl|scss|sass|less|css|mpx)$/.test(path)
   }
+  function isMpxFile(path) {
+    return typeof path === 'string' && /\.mpx$/.test(path)
+  }
+  function doStrip(content, path) {
+    if (isMpxFile(path)) {
+      return stripConditionForMpx(content, defs, path)
+    }
+    return stripCondition(content, defs)
+  }
   proxyReadFileSync = function (path, options) {
     const content = rawReadFileSync.call(fs, path, options)
     if (shouldStrip(path)) {
       try {
         if (typeof content === 'string') {
-          return stripCondition(content, defs)
+          return doStrip(content, path)
         } else if (Buffer.isBuffer(content)) {
           const str = content.toString('utf-8')
-          const result = stripCondition(str, defs)
+          const result = doStrip(str, path)
           if (result !== str) {
             return Buffer.from(result, 'utf-8')
           }
@@ -215,11 +278,11 @@ function startFSStripForCss(defs) {
       if (shouldStrip(path)) {
         try {
           if (typeof data === 'string') {
-            const result = stripCondition(data, defs)
+            const result = doStrip(data, path)
             return callback(null, result)
           } else if (Buffer.isBuffer(data)) {
             const content = data.toString('utf-8')
-            const result = stripCondition(content, defs)
+            const result = doStrip(content, path)
             if (result !== content) {
               return callback(null, Buffer.from(result, 'utf-8'))
             }
@@ -238,6 +301,8 @@ function startFSStripForCss(defs) {
 }
 
 module.exports.stripCondition = stripCondition
+module.exports.stripConditionForMpx = stripConditionForMpx
+module.exports.hasConditionalDirective = hasConditionalDirective
 module.exports.rewriteFSForCss = rewriteFSForCss
 module.exports.startFSStripForCss = startFSStripForCss
 module.exports.registerStripCompilation = registerStripCompilation
diff --git a/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js b/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
index 96ff347d5a..08352f919a 100644
--- a/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
+++ b/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
@@ -1,4 +1,4 @@
-const { stripCondition } = require('../../../lib/style-compiler/strip-conditional')
+const { stripCondition, stripConditionForMpx, hasConditionalDirective } = require('../../../lib/style-compiler/strip-conditional')
 
 describe('strip-conditional unit tests', () => {
   describe('stripCondition logic', () => {
@@ -222,4 +222,156 @@ describe('strip-conditional unit tests', () => {
       })
     })
   })
+
+  describe('hasConditionalDirective', () => {
+    it('should detect block comment directives', () => {
+      expect(hasConditionalDirective('/* @mpx-if (x) */ .a {} /* @mpx-endif */')).toBe(true)
+    })
+
+    it('should detect line comment directives', () => {
+      expect(hasConditionalDirective('// @mpx-if (x)\n.a {}\n// @mpx-endif')).toBe(true)
+    })
+
+    it('should detect HTML comment directives', () => {
+      expect(hasConditionalDirective('<!-- @mpx-if (x) --><view/><!-- @mpx-endif -->')).toBe(true)
+    })
+
+    it('should return false for content without directives', () => {
+      expect(hasConditionalDirective('.container { color: red; }')).toBe(false)
+      expect(hasConditionalDirective('<template><view></view></template>')).toBe(false)
+    })
+  })
+
+  describe('stripConditionForMpx', () => {
+    const defs = {
+      __mpx_mode__: 'wx',
+      platform: 'wx',
+      theme: 'dark'
+    }
+
+    it('should only strip conditions inside <style> blocks', () => {
+      const input = `<template>
+  <view class="container">Hello</view>
+</template>
+<style>
+/* @mpx-if (platform === 'wx') */
+.wx-only { color: red; }
+/* @mpx-endif */
+/* @mpx-if (platform === 'ali') */
+.ali-only { color: blue; }
+/* @mpx-endif */
+</style>`
+      const result = stripConditionForMpx(input, defs)
+      expect(result).toContain('<view class="container">Hello</view>')
+      expect(result).toContain('.wx-only { color: red; }')
+      expect(result).not.toContain('.ali-only { color: blue; }')
+    })
+
+    it('should handle multiple <style> blocks', () => {
+      const input = `<template>
+  <view>Test</view>
+</template>
+<style>
+/* @mpx-if (platform === 'wx') */
+.block1 { color: red; }
+/* @mpx-endif */
+</style>
+<style lang="less">
+/* @mpx-if (theme === 'dark') */
+.block2 { background: #000; }
+/* @mpx-endif */
+/* @mpx-if (theme === 'light') */
+.block3 { background: #fff; }
+/* @mpx-endif */
+</style>`
+      const result = stripConditionForMpx(input, defs)
+      expect(result).toContain('.block1 { color: red; }')
+      expect(result).toContain('.block2 { background: #000; }')
+      expect(result).not.toContain('.block3 { background: #fff; }')
+    })
+
+    it('should return original content and log error when conditional directive appears in <template> section', () => {
+      const input = `<template>
+  <!-- @mpx-if (platform === 'wx') -->
+  <view>Wx Only</view>
+  <!-- @mpx-endif -->
+</template>
+<style>
+.container { color: red; }
+</style>`
+      const result = stripConditionForMpx(input, defs, '/test/app.mpx')
+      expect(result).toBe(input)
+    })
+
+    it('should return original content and log error when conditional directive appears in <script> section', () => {
+      const input = `<template>
+  <view>Test</view>
+</template>
+<script>
+// @mpx-if (platform === 'wx')
+console.log('wx')
+// @mpx-endif
+</script>
+<style>
+.container { color: red; }
+</style>`
+      const result = stripConditionForMpx(input, defs, '/test/app.mpx')
+      expect(result).toBe(input)
+    })
+
+    it('should return original content and log error when conditional directive appears after last </style>', () => {
+      const input = `<style>
+.a { color: red; }
+</style>
+/* @mpx-if (platform === 'wx') */
+.orphan { color: green; }
+/* @mpx-endif */`
+      const result = stripConditionForMpx(input, defs, '/test/app.mpx')
+      expect(result).toBe(input)
+    })
+
+    it('should preserve non-style content unchanged', () => {
+      const input = `<template>
+  <view class="box">{{message}}</view>
+</template>
+<script>
+import { createComponent } from '@mpxjs/core'
+createComponent({ data: { message: 'hi' } })
+</script>
+<style>
+/* @mpx-if (platform === 'wx') */
+.box { padding: 10px; }
+/* @mpx-endif */
+</style>`
+      const result = stripConditionForMpx(input, defs)
+      expect(result).toContain('<view class="box">{{message}}</view>')
+      expect(result).toContain("import { createComponent } from '@mpxjs/core'")
+      expect(result).toContain('.box { padding: 10px; }')
+    })
+
+    it('should work with .mpx file that has no <style> and no directives', () => {
+      const input = `<template>
+  <view>Hello</view>
+</template>
+<script>
+console.log('test')
+</script>`
+      const result = stripConditionForMpx(input, defs)
+      expect(result).toBe(input)
+    })
+
+    it('should handle style block with attributes correctly', () => {
+      const input = `<template>
+  <view>Test</view>
+</template>
+<style lang="stylus" scoped>
+/* @mpx-if (platform === 'wx') */
+.styled { font-size: 14px; }
+/* @mpx-endif */
+</style>`
+      const result = stripConditionForMpx(input, defs)
+      expect(result).toContain('.styled { font-size: 14px; }')
+      expect(result).toContain('<style lang="stylus" scoped>')
+    })
+  })
 })

From eca58500b81ed89264c04cd464edf9b8fbea9e7d Mon Sep 17 00:00:00 2001
From: xuegan <xuegan@didiglobal.com>
Date: Sun, 10 May 2026 00:49:36 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E4=B8=8E=E5=8F=82=E6=95=B0=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/style-compiler/strip-conditional.js   | 49 +++++++++++--------
 .../common/style-strip-condition.spec.js      | 45 ++++++-----------
 2 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/packages/webpack-plugin/lib/style-compiler/strip-conditional.js b/packages/webpack-plugin/lib/style-compiler/strip-conditional.js
index a99aa500b6..570e5b57ab 100644
--- a/packages/webpack-plugin/lib/style-compiler/strip-conditional.js
+++ b/packages/webpack-plugin/lib/style-compiler/strip-conditional.js
@@ -133,12 +133,12 @@ function traverseAndEvaluate(ast, defs) {
 }
 
 /**
- *
+ *处理普通字符串的内部方法
  * @param {string} content
  * @param {Record<string, any>} defs
  * @returns
  */
-function stripCondition(content, defs) {
+function doStripCondition(content, defs) {
   const ast = parse(content)
   return traverseAndEvaluate(ast, defs)
 }
@@ -159,10 +159,10 @@ function hasConditionalDirective(content) {
  * 2. 非 <style> 区域出现条件指令时通过 logStripError 报错并返回原始内容
  * @param {string} content .mpx 文件完整内容
  * @param {Record<string, any>} defs 条件变量定义
- * @param {string} path 文件路径
+ * @param {string=} path 文件路径
  * @returns {string} 处理后的内容
  */
-function stripConditionForMpx(content, defs, path) {
+function stripConditionMpx(content, defs, path) {
   // 匹配 <style ...> ... </style> 块（支持多个 style 块）
   const styleRegex = /(<style[^>]*>)([\s\S]*?)(<\/style>)/gi
   let lastIndex = 0
@@ -182,7 +182,7 @@ function stripConditionForMpx(content, defs, path) {
     const styleOpen = match[1]
     const styleContent = match[2]
     const styleClose = match[3]
-    const strippedStyle = stripCondition(styleContent, defs)
+    const strippedStyle = doStripCondition(styleContent, defs)
     result += styleOpen + strippedStyle + styleClose
     lastIndex = styleRegex.lastIndex
   }
@@ -197,6 +197,26 @@ function stripConditionForMpx(content, defs, path) {
   return result
 }
 
+function isMpxFile(path) {
+  return typeof path === 'string' && /\.mpx$/.test(path)
+}
+
+/**
+ * 统一条件编译裁剪入口：
+ * - 传入 .mpx 文件路径时，仅裁剪 <style> 块中的条件编译
+ * - 未传入 path 或传入普通样式文件路径时，按普通样式字符串裁剪
+ * @param {string} content
+ * @param {Record<string, any>} defs
+ * @param {string=} path
+ * @returns {string}
+ */
+function stripCondition(content, defs, path) {
+  if (isMpxFile(path)) {
+    return stripConditionMpx(content, defs, path)
+  }
+  return doStripCondition(content, defs)
+}
+
 let proxyReadFileSync
 let proxyReadFile
 const rawReadFileSync = fs.readFileSync
@@ -234,24 +254,15 @@ function startFSStripForCss(defs) {
   function shouldStrip(path) {
     return typeof path === 'string' && /\.(styl|scss|sass|less|css|mpx)$/.test(path)
   }
-  function isMpxFile(path) {
-    return typeof path === 'string' && /\.mpx$/.test(path)
-  }
-  function doStrip(content, path) {
-    if (isMpxFile(path)) {
-      return stripConditionForMpx(content, defs, path)
-    }
-    return stripCondition(content, defs)
-  }
   proxyReadFileSync = function (path, options) {
     const content = rawReadFileSync.call(fs, path, options)
     if (shouldStrip(path)) {
       try {
         if (typeof content === 'string') {
-          return doStrip(content, path)
+          return stripCondition(content, defs, path)
         } else if (Buffer.isBuffer(content)) {
           const str = content.toString('utf-8')
-          const result = doStrip(str, path)
+          const result = stripCondition(str, defs, path)
           if (result !== str) {
             return Buffer.from(result, 'utf-8')
           }
@@ -278,11 +289,11 @@ function startFSStripForCss(defs) {
       if (shouldStrip(path)) {
         try {
           if (typeof data === 'string') {
-            const result = doStrip(data, path)
+            const result = stripCondition(data, defs, path)
             return callback(null, result)
           } else if (Buffer.isBuffer(data)) {
             const content = data.toString('utf-8')
-            const result = doStrip(content, path)
+            const result = stripCondition(content, defs, path)
             if (result !== content) {
               return callback(null, Buffer.from(result, 'utf-8'))
             }
@@ -301,8 +312,6 @@ function startFSStripForCss(defs) {
 }
 
 module.exports.stripCondition = stripCondition
-module.exports.stripConditionForMpx = stripConditionForMpx
-module.exports.hasConditionalDirective = hasConditionalDirective
 module.exports.rewriteFSForCss = rewriteFSForCss
 module.exports.startFSStripForCss = startFSStripForCss
 module.exports.registerStripCompilation = registerStripCompilation
diff --git a/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js b/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
index 08352f919a..1b6850fdb4 100644
--- a/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
+++ b/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
@@ -1,4 +1,4 @@
-const { stripCondition, stripConditionForMpx, hasConditionalDirective } = require('../../../lib/style-compiler/strip-conditional')
+const { stripCondition, registerStripCompilation } = require('../../../lib/style-compiler/strip-conditional')
 
 describe('strip-conditional unit tests', () => {
   describe('stripCondition logic', () => {
@@ -223,26 +223,7 @@ describe('strip-conditional unit tests', () => {
     })
   })
 
-  describe('hasConditionalDirective', () => {
-    it('should detect block comment directives', () => {
-      expect(hasConditionalDirective('/* @mpx-if (x) */ .a {} /* @mpx-endif */')).toBe(true)
-    })
-
-    it('should detect line comment directives', () => {
-      expect(hasConditionalDirective('// @mpx-if (x)\n.a {}\n// @mpx-endif')).toBe(true)
-    })
-
-    it('should detect HTML comment directives', () => {
-      expect(hasConditionalDirective('<!-- @mpx-if (x) --><view/><!-- @mpx-endif -->')).toBe(true)
-    })
-
-    it('should return false for content without directives', () => {
-      expect(hasConditionalDirective('.container { color: red; }')).toBe(false)
-      expect(hasConditionalDirective('<template><view></view></template>')).toBe(false)
-    })
-  })
-
-  describe('stripConditionForMpx', () => {
+  describe('stripCondition for .mpx', () => {
     const defs = {
       __mpx_mode__: 'wx',
       platform: 'wx',
@@ -261,7 +242,7 @@ describe('strip-conditional unit tests', () => {
 .ali-only { color: blue; }
 /* @mpx-endif */
 </style>`
-      const result = stripConditionForMpx(input, defs)
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toContain('<view class="container">Hello</view>')
       expect(result).toContain('.wx-only { color: red; }')
       expect(result).not.toContain('.ali-only { color: blue; }')
@@ -284,13 +265,15 @@ describe('strip-conditional unit tests', () => {
 .block3 { background: #fff; }
 /* @mpx-endif */
 </style>`
-      const result = stripConditionForMpx(input, defs)
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toContain('.block1 { color: red; }')
       expect(result).toContain('.block2 { background: #000; }')
       expect(result).not.toContain('.block3 { background: #fff; }')
     })
 
     it('should return original content and log error when conditional directive appears in <template> section', () => {
+      const compilation = { errors: [] }
+      registerStripCompilation(compilation)
       const input = `<template>
   <!-- @mpx-if (platform === 'wx') -->
   <view>Wx Only</view>
@@ -299,8 +282,12 @@ describe('strip-conditional unit tests', () => {
 <style>
 .container { color: red; }
 </style>`
-      const result = stripConditionForMpx(input, defs, '/test/app.mpx')
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toBe(input)
+      expect(compilation.errors).toHaveLength(1)
+      expect(compilation.errors[0].file).toBe('/test/app.mpx')
+      expect(compilation.errors[0].message).toContain('@mpx conditional directives are only allowed inside <style> blocks in .mpx files')
+      registerStripCompilation(null)
     })
 
     it('should return original content and log error when conditional directive appears in <script> section', () => {
@@ -315,7 +302,7 @@ console.log('wx')
 <style>
 .container { color: red; }
 </style>`
-      const result = stripConditionForMpx(input, defs, '/test/app.mpx')
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toBe(input)
     })
 
@@ -326,7 +313,7 @@ console.log('wx')
 /* @mpx-if (platform === 'wx') */
 .orphan { color: green; }
 /* @mpx-endif */`
-      const result = stripConditionForMpx(input, defs, '/test/app.mpx')
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toBe(input)
     })
 
@@ -343,7 +330,7 @@ createComponent({ data: { message: 'hi' } })
 .box { padding: 10px; }
 /* @mpx-endif */
 </style>`
-      const result = stripConditionForMpx(input, defs)
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toContain('<view class="box">{{message}}</view>')
       expect(result).toContain("import { createComponent } from '@mpxjs/core'")
       expect(result).toContain('.box { padding: 10px; }')
@@ -356,7 +343,7 @@ createComponent({ data: { message: 'hi' } })
 <script>
 console.log('test')
 </script>`
-      const result = stripConditionForMpx(input, defs)
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toBe(input)
     })
 
@@ -369,7 +356,7 @@ console.log('test')
 .styled { font-size: 14px; }
 /* @mpx-endif */
 </style>`
-      const result = stripConditionForMpx(input, defs)
+      const result = stripCondition(input, defs, '/test/app.mpx')
       expect(result).toContain('.styled { font-size: 14px; }')
       expect(result).toContain('<style lang="stylus" scoped>')
     })

From ceb48dc9f1ced3900186fda41327a6a22bf65a07 Mon Sep 17 00:00:00 2001
From: xuegan <xuegan@didiglobal.com>
Date: Sun, 10 May 2026 01:00:00 +0800
Subject: [PATCH 3/3] fix master conflict

---
 .../test/platform/common/style-strip-condition.spec.js           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js b/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
index 7157961a43..955c213f97 100644
--- a/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
+++ b/packages/webpack-plugin/test/platform/common/style-strip-condition.spec.js
@@ -1,7 +1,6 @@
 const postcss = require('postcss')
 const stylus = require('stylus')
 const { SourceMapConsumer } = require('source-map')
-const { stripCondition } = require('../../../lib/style-compiler/strip-conditional')
 const removeStripConditionalComments = require('../../../lib/style-compiler/plugins/remove-strip-conditional-comments')
 const { parseComponent } = require('../../../lib/template-compiler/compiler')
 const { STYLE_PAD_PLACEHOLDER } = require('../../../lib/utils/const')