fix: build style i metropolis when fixing multiple tabs(close:#53 )

Author: baiwusanyu-c

package.json

@@ -75,7 +75,7 @@
   "peerDependencies": {
     "baiwusanyu-utils": "^1.0.5",
     "chalk": "^4.1.2",
-    "estree-walker-ts": "^1.0.0-beta.2",
+    "estree-walker-ts": "^1.0.0",
     "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.1",
     "hash-sum": "^2.0.0",
@@ -86,7 +86,7 @@
   "dependencies": {
     "baiwusanyu-utils": "^1.0.5",
     "chalk": "^4.1.2",
-    "estree-walker-ts": "^1.0.0-beta.2",
+    "estree-walker-ts": "^1.0.0",
     "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.1",
     "hash-sum": "^2.0.0",

packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap

@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`inject-css > injectCssOnBuild: basic 1`] = `
-"<style lang=\\"scss\\" > 
+"
+<style lang=\\"scss\\" > 
 
 body { background-color: black; }
 /* foo.scss -> test2.css -> test.css */
@@ -14,8 +15,30 @@ div {
  </style>"
 `;
 
+exports[`inject-css > injectCssOnBuild: mutiple style tags 1`] = `
+"
+<style lang=\\"scss\\" > 
+
+body { background-color: black; }
+/* foo.scss -> test2.css -> test.css */
+/* foo.scss -> test.scss -> test2.css */
+
+/*@import \\"./assets/less/less-foo\\";*/
+div {
+  color: v-bind(color)
+}
+ </style>
+<style lang=\\"scss\\" > 
+ .el-popup-parent--hidden {
+    .fixed-header {
+      padding-right: 17px;
+    }
+  } </style> "
+`;
+
 exports[`inject-css > injectCssOnBuild: no lang 1`] = `
-"<style lang=\\"css\\" > 
+"
+<style lang=\\"css\\" > 
 
 body { background-color: black; }
 /* foo.scss -> test2.css -> test.css */

packages/core/inject/__test__/inject-css.spec.ts

@@ -112,6 +112,58 @@ describe('inject-css', () => {
     expect(result.toString()).toMatchSnapshot()
   })
 
+  // fix: #53
+  test('injectCssOnBuild: mutiple style tags', () => {
+    const code = '<style lang="scss">\n'
+      + '/* foo.scss -> test2.css -> test.css */\n'
+      + '/* foo.scss -> test.scss -> test2.css */\n'
+      + '\n'
+      + '/*@import "./assets/less/less-foo";*/\n'
+      + 'div {\n'
+      + '  color: v-bind(color)\n'
+      + '}\n'
+      + "@import './assets/scss/foo.scss';\n"
+      + '</style> '
+      + '<style lang="scss">\n'
+      + '  .el-popup-parent--hidden {\n'
+      + '    .fixed-header {\n'
+      + '      padding-right: 17px;\n'
+      + '    }\n'
+      + '  }\n'
+      + '</style>'
+    const mgcStr = new MagicString(code)
+    const injectCSSContent = new Set([{
+      content: '@import \'./assets/scss/foo.scss\';\nbody { background-color: black; }',
+      lang: 'scss',
+      styleTagIndex: 0,
+    }])
+    const descriptor = {
+      styles: [
+        {
+          lang: 'scss',
+          content: '/* foo.scss -> test2.css -> test.css */\n'
+            + '/* foo.scss -> test.scss -> test2.css */\n'
+            + '\n'
+            + '/*@import "./assets/less/less-foo";*/\n'
+            + 'div {\n'
+            + '  color: v-bind(color)\n'
+            + '}\n'
+            + "@import './assets/scss/foo.scss';",
+        },
+        {
+          lang: 'scss',
+          content: ' .el-popup-parent--hidden {\n'
+            + '    .fixed-header {\n'
+            + '      padding-right: 17px;\n'
+            + '    }\n'
+            + '  }',
+        },
+      ],
+    }
+    const result = injectCssOnBuild(mgcStr, injectCSSContent, descriptor as any)
+    expect(result.toString()).toMatchSnapshot()
+  })
+
   test('injectCssOnBuild: no styles', () => {
     const code = 'test'
     const injectCSSContent = new Set([{

packages/core/inject/inject-css.ts

@@ -37,7 +37,7 @@ export function injectCssOnBuild(
     })
     const lang = value.lang || 'css'
     const scoped = value.scoped ? 'scoped' : ''
-    resCode = `<style lang="${lang}" ${scoped}> ${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)} </style>`
+    resCode = `${resCode}\n<style lang="${lang}" ${scoped}> ${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)} </style>`
   })
   resCode && (mgcStr = removeStyleTagsAndContent(mgcStr))
   return mgcStr.prependRight(mgcStr.length(), resCode)