fix(compiler-sfc): don't inject scope id before child combinator >

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 70c6af557abb592445b1f1c08554923282bc22d0..c29598f1501051720aa8978863ba5efcb2522de9 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -520,5 +520,12 @@ describe('SFC style preprocessors', () => {
       "[data-v-test]:last-child [data-v-test]:active { color: red;
       }"
     `)
+    expect(compileScoped(`main { > * { background-color: yellow; } }`))
+      .toMatchInlineSnapshot(`
+        "main {
+        > [data-v-test] { background-color: yellow;
+        }
+        }"
+      `)
   })
 })

diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index 4845d8eee39568b6e91aa49ece544740635ff7fe..51e30fc088ca385ef1ac5c004bca7b7fbb930037 100644 (file)
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -255,6 +255,13 @@ function rewriteSelector(
       )
       shouldInject = false
     }
+  } else {
+    // #13387 don't inject [id] at the selector start if node is null
+    // and the selector starts with `>`
+    const { type, value } = selector.first
+    if (type === 'combinator' && value === '>') {
+      shouldInject = false
+    }
   }
 
   if (node) {
@@ -266,8 +273,8 @@ function rewriteSelector(
     selector.first.spaces.before = ''
   }
 
+  const idToAdd = slotted ? id + '-s' : id
   if (shouldInject) {
-    const idToAdd = slotted ? id + '-s' : id
     selector.insertAfter(
       // If node is null it means we need to inject [id] at the start
       // insertAfter can handle `null` here
@@ -279,20 +286,21 @@ function rewriteSelector(
         quoteMark: `"`,
       }),
     )
-    // Used for trailing universal selectors (#12906)
-    // `.foo * {}` -> `.foo[xxxxxxx] [xxxxxxx] {}`
-    if (starNode) {
-      selector.insertBefore(
-        starNode,
-        selectorParser.attribute({
-          attribute: idToAdd,
-          value: idToAdd,
-          raws: {},
-          quoteMark: `"`,
-        }),
-      )
-      selector.removeChild(starNode)
-    }
+  }
+
+  // Used for trailing universal selectors (#12906)
+  // `.foo * {}` -> `.foo[xxxxxxx] [xxxxxxx] {}`
+  if (starNode) {
+    selector.insertBefore(
+      starNode,
+      selectorParser.attribute({
+        attribute: idToAdd,
+        value: idToAdd,
+        raws: {},
+        quoteMark: `"`,
+      }),
+    )
+    selector.removeChild(starNode)
   }
 }