fix(mini-runner): @import rule must come first

package.json

@@ -72,6 +72,7 @@
     "@types/autoprefixer": "9.7.0",
     "@types/babel-types": "^7.0.7",
     "@types/babel__traverse": "^7.0.7",
+    "@types/convert-source-map": "^1.5.2",
     "@types/debug": "4.1.5",
     "@types/detect-port": "1.3.0",
     "@types/fs-extra": "^8.0.1",

packages/taro-mini-runner/package.json

@@ -52,6 +52,7 @@
     "@tarojs/taro-loader": "3.4.2",
     "babel-loader": "8.2.1",
     "babel-preset-taro": "3.4.2",
+    "convert-source-map": "^1.8.0",
     "copy-webpack-plugin": "5.1.2",
     "css-loader": "3.4.2",
     "csso-webpack-plugin": "2.0.0-beta.1",
@@ -68,6 +69,7 @@
     "mini-css-extract-plugin": "0.9.0",
     "miniprogram-simulate": "^1.1.5",
     "mkdirp": "^1.0.4",
+    "offset-sourcemap-lines": "^1.0.1",
     "ora": "4.0.3",
     "postcss": "8.3.5",
     "postcss-html-transform": "3.4.2",

packages/taro-mini-runner/src/__tests__/__snapshots__/common-style.spec.ts.snap

@@ -1063,8 +1063,8 @@ require(\\"./taro\\");
 {\\"pages\\":[\\"pages/index/index\\",\\"pages/about/index\\"],\\"window\\":{\\"backgroundTextStyle\\":\\"light\\",\\"navigationBarBackgroundColor\\":\\"#fff\\",\\"navigationBarTitleText\\":\\"WeChat\\",\\"navigationBarTextStyle\\":\\"black\\"}}
 
 /** filePath: dist/app.wxss **/
-.body{background-color:#e8e8ed}
 @import \\"./common.wxss\\";
+.body{background-color:#e8e8ed}
 
 /** filePath: dist/base.wxml **/
 <wxs module=\\"xs\\" src=\\"./utils.wxs\\" />

packages/taro-mini-runner/src/plugins/MiniPlugin.ts

@@ -11,6 +11,8 @@ import * as NaturalChunkOrderPlugin from 'webpack/lib/optimize/NaturalChunkOrder
 import * as SplitChunksPlugin from 'webpack/lib/optimize/SplitChunksPlugin'
 import * as RuntimeChunkPlugin from 'webpack/lib/optimize/RuntimeChunkPlugin'
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import * as convert from 'convert-source-map'
+import offsetLines from 'offset-sourcemap-lines'
 import { ConcatSource } from 'webpack-sources'
 import { urlToRequest } from 'loader-utils'
 import { minify } from 'html-minifier'
@@ -1158,21 +1160,46 @@ export default class TaroMiniPlugin {
 
     if (!assets[appStyle]) return
 
-    const originSource: string = assets[appStyle].source()
-    const source = new ConcatSource()
-    source.add(originSource)
+    const commonStyles: string[] = []
 
     Object.keys(assets).forEach(assetName => {
       const fileName = path.basename(assetName, path.extname(assetName))
       if ((REG_STYLE.test(assetName) || REG_STYLE_EXT.test(assetName)) && this.options.commonChunks.includes(fileName)) {
-        source.add('\n')
-        source.add(`@import ${JSON.stringify(urlToRequest(assetName))};`)
-        assets[appStyle] = {
-          size: () => source.source().length,
-          source: () => source.source()
-        }
+        commonStyles.push(`@import ${JSON.stringify(urlToRequest(assetName))};\n`)
       }
     })
+
+    if (commonStyles.length > 0) {
+      const source = new ConcatSource()
+      let rawSource = assets[appStyle].source()
+      source.add(commonStyles.join(''))
+
+      const rawConvSourceMap = convert.fromSource(rawSource)
+
+      if (rawConvSourceMap) {
+        rawSource = convert.removeComments(rawSource)
+        source.add(rawSource)
+        const offsettedMap = offsetLines(rawConvSourceMap.toObject(), commonStyles.length)
+        source.add(convert.fromObject(offsettedMap).toComment())
+      } else {
+        source.add(rawSource)
+        const appStyleMap = appStyle + '.map'
+        if (assets[appStyleMap]) {
+          const mapContext = assets[appStyleMap].source()
+          const offsettedMap = offsetLines(JSON.parse(mapContext), commonStyles.length)
+          const offsettedMapText = JSON.stringify(offsettedMap)
+          assets[appStyleMap] = {
+            size: () => offsettedMapText.length,
+            source: () => offsettedMapText
+          }
+        }
+      }
+
+      assets[appStyle] = {
+        size: () => source.source().length,
+        source: () => source.source()
+      }
+    }
   }
 
   addTarBarFilesToDependencies (compilation: webpack.compilation.Compilation) {

yarn.lock

@@ -6743,6 +6743,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/convert-source-map@^1.5.2":
+  version "1.5.2"
+  resolved "https://registry.npmmirror.com/@types/convert-source-map/-/convert-source-map-1.5.2.tgz#318dc22d476632a4855594c16970c6dc3ed086e7"
+  integrity sha512-tHs++ZeXer40kCF2JpE51Hg7t4HPa18B1b1Dzy96S0eCw8QKECNMYMfwa1edK/x8yCN0r4e6ewvLcc5CsVGkdg==
+
 "@types/cors@^2.8.6":
   version "2.8.12"
   resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080"
@@ -12390,7 +12395,7 @@ convert-source-map@^0.3.3:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
   integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
 
-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0, convert-source-map@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -23940,6 +23945,13 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
+offset-sourcemap-lines@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/offset-sourcemap-lines/-/offset-sourcemap-lines-1.0.1.tgz#5854dff74b73fc06efcb61d7b721a8113d99be92"
+  integrity sha512-8giJa0GProV9hPLOp9qAobkvi6OiZnzeM6fdubVjhqcrISX8FYMk1jMVzG6R9d7HQWLysG22jyXEIF6sWu4fJw==
+  dependencies:
+    source-map "^0.5.0"
+
 omggif@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"