fix(h5): mixing <style> and <style scoped> (#3410)

packages/uni-cli-shared/__tests__/cssScoped.spec.ts

+import { addScoped } from '../src/vite/plugins/cssScoped'
+describe('css scoped', () => {
+  test('add scoped', () => {
+    expect(addScoped(`<style></style>`)).toBe(`<style scoped></style>`)
+    expect(addScoped(`<style lang="scss"></style>`)).toBe(
+      `<style lang="scss" scoped></style>`
+    )
+    expect(addScoped(`<style  scoped></style>`)).toBe(`<style  scoped></style>`)
+    expect(
+      addScoped(`<style></style><style scoped></style><style  scoped></style>`)
+    ).toBe(
+      `<style scoped></style><style scoped></style><style  scoped></style>`
+    )
+  })
+})

packages/uni-cli-shared/src/vite/plugins/cssScoped.ts

@@ -9,11 +9,13 @@ const debugScoped = debug('uni:scoped')
 
 const SCOPED_RE = /<style\s[^>]*scoped[^>]*>/i
 
-function addScoped(code: string) {
-  if (SCOPED_RE.test(code)) {
-    return code
-  }
-  return code.replace(/(<style\b[^><]*)>/gi, '$1 scoped>')
+export function addScoped(code: string) {
+  return code.replace(/(<style\b[^><]*)>/gi, (str, $1) => {
+    if ($1.includes('scoped')) {
+      return str
+    }
+    return `${$1} scoped>`
+  })
 }
 
 function removeScoped(code: string) {