Merge pull request #2268 from didi/fix-style-parser-syntax-error

fix: 单行注释在解析后导致后续的样式失效

Author: hiyuki

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

@@ -193,7 +193,17 @@ async function stripByPostcss(options) {
   const syntax = styleSyntaxProcesserMap[options.lang]?.()
   const defs = options.defs ?? {}
 
-  const afterConditionStrip = stripCondition(options.css, defs)
+  function stripContentCondition(content) {
+    content = stripCondition(content, defs)
+
+    if (options.lang === 'stylus') {
+      content = content.replace(/\t/g, '  ')
+    }
+
+    return content
+  }
+
+  const afterConditionStrip = stripContentCondition(options.css, defs)
 
     /**
    * @type {import('postcss').AcceptedPlugin[]}
@@ -204,7 +214,7 @@ async function stripByPostcss(options) {
         let content = await fs.readFile(filename, 'utf-8')
         const processer = postcss(plugins)
 
-        content = stripCondition(content, defs)
+        content = stripContentCondition(content, defs)
 
         const { css } = await processer.process(content, {
           syntax,
@@ -228,11 +238,23 @@ async function stripByPostcss(options) {
           })
         })
       }
-    })
+    }),
+    {
+      // less/scss syntax 在 postcss 重新生成 css 后，`//` 注释后面不会保留换行，会和后续的 css 语句和注释连在一起，导致后续语法错误
+      postcssPlugin: 'mpx-strip-conditional-loader-append-command',
+      CommentExit(comment) {
+        comment.raws.right ??= ''
+
+        if (comment.raws.right.endsWith('\n')) {
+          return
+        }
+
+        comment.raws.right += '\n'
+      }
+    }
   ]
 
   const processer = postcss(plugins)
-
   return processer.process(afterConditionStrip, {
     from: options.resourcePath,
     syntax

packages/webpack-plugin/package.json

@@ -30,6 +30,9 @@
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
     "@mpxjs/utils": "^2.10.16",
+    "postcss-less": "^6.0.0",
+    "postcss-scss": "^4.0.9",
+    "postcss-styl": "^0.12.3",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",

packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/index.styl

@@ -0,0 +1,5 @@
+@name: red; // hello world
+
+.selector {
+    color: blue // hello world
+}

packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/less/index.less

@@ -0,0 +1,18 @@
+## Config
+
+```json
+{
+    "lang": "less",
+    "resourcePath": "index.less",
+    "defs": {}
+}
+```
+
+## Result
+
+```less
+@name: red; // hello world
+ .selector {
+    color: blue // hello world
+}
+```

packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/less/output.md

@@ -0,0 +1,5 @@
+
+$color: red; // this is a comment
+.selector {
+  color: $color; // another comment
+}

packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/sass/index.scss

@@ -0,0 +1,20 @@
+## Config
+
+```json
+{
+    "lang": "scss",
+    "resourcePath": "index.scss",
+    "defs": {}
+}
+```
+
+## Result
+
+```scss
+
+$color: red; // this is a comment
+ .selector {
+  color: $color; // another comment
+
+}
+```

packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/sass/output.md

@@ -0,0 +1,13 @@
+// @import "./s1.styl"
+
+/**
+@import "./s2.styl"
+*/
+
+@import "./s3.styl"
+
+$namespace = red // hello world
+.selector1 // hello world
+    color: blue // hello world
+.selector2
+    color: red

…xtures/css-condition/comment/config.json …css-condition/comment/stylus/config.jsonpackages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/config.json renamed to packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/stylus/config.json packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/config.json renamed to packages/webpack-plugin/test/platform/common/fixtures/css-condition/comment/stylus/config.json

@@ -15,11 +15,19 @@
 ```stylus
 // @import "./s1.styl"
 
+
 /**
 @import "./s2.styl"
 */
 
 .s3
     color green
 
+$namespace = red // hello world
+
+.selector1 // hello world
+    color: blue // hello world
+
+.selector2
+    color: red
 ```