wip: more consistent compiler-sfc usage + inline mode for ssr

packages/compiler-sfc/__tests__/compileStyle.spec.ts

@@ -16,7 +16,7 @@ export function compileScoped(
   const res = compileStyle({
     source,
     filename: 'test.css',
-    id: 'test',
+    id: 'data-v-test',
     scoped: true,
     ...options
   })
@@ -32,61 +32,61 @@ export function compileScoped(
 describe('SFC scoped CSS', () => {
   test('simple selectors', () => {
     expect(compileScoped(`h1 { color: red; }`)).toMatch(
-      `h1[test] { color: red;`
+      `h1[data-v-test] { color: red;`
     )
     expect(compileScoped(`.foo { color: red; }`)).toMatch(
-      `.foo[test] { color: red;`
+      `.foo[data-v-test] { color: red;`
     )
   })
 
   test('descendent selector', () => {
     expect(compileScoped(`h1 .foo { color: red; }`)).toMatch(
-      `h1 .foo[test] { color: red;`
+      `h1 .foo[data-v-test] { color: red;`
     )
   })
 
   test('multiple selectors', () => {
     expect(compileScoped(`h1 .foo, .bar, .baz { color: red; }`)).toMatch(
-      `h1 .foo[test], .bar[test], .baz[test] { color: red;`
+      `h1 .foo[data-v-test], .bar[data-v-test], .baz[data-v-test] { color: red;`
     )
   })
 
   test('pseudo class', () => {
     expect(compileScoped(`.foo:after { color: red; }`)).toMatch(
-      `.foo[test]:after { color: red;`
+      `.foo[data-v-test]:after { color: red;`
     )
   })
 
   test('pseudo element', () => {
     expect(compileScoped(`::selection { display: none; }`)).toMatch(
-      '[test]::selection {'
+      '[data-v-test]::selection {'
     )
   })
 
   test('spaces before pseudo element', () => {
     const code = compileScoped(`.abc, ::selection { color: red; }`)
-    expect(code).toMatch('.abc[test],')
-    expect(code).toMatch('[test]::selection {')
+    expect(code).toMatch('.abc[data-v-test],')
+    expect(code).toMatch('[data-v-test]::selection {')
   })
 
   test('::v-deep', () => {
     expect(compileScoped(`:deep(.foo) { color: red; }`)).toMatchInlineSnapshot(`
-      "[test] .foo { color: red;
+      "[data-v-test] .foo { color: red;
       }"
     `)
     expect(compileScoped(`::v-deep(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
-      "[test] .foo { color: red;
+      "[data-v-test] .foo { color: red;
       }"
     `)
     expect(compileScoped(`::v-deep(.foo .bar) { color: red; }`))
       .toMatchInlineSnapshot(`
-      "[test] .foo .bar { color: red;
+      "[data-v-test] .foo .bar { color: red;
       }"
     `)
     expect(compileScoped(`.baz .qux ::v-deep(.foo .bar) { color: red; }`))
       .toMatchInlineSnapshot(`
-      ".baz .qux[test] .foo .bar { color: red;
+      ".baz .qux[data-v-test] .foo .bar { color: red;
       }"
     `)
   })
@@ -94,22 +94,22 @@ describe('SFC scoped CSS', () => {
   test('::v-slotted', () => {
     expect(compileScoped(`:slotted(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
-    ".foo[test-s] { color: red;
+    ".foo[data-v-test-s] { color: red;
     }"
   `)
     expect(compileScoped(`::v-slotted(.foo) { color: red; }`))
       .toMatchInlineSnapshot(`
-      ".foo[test-s] { color: red;
+      ".foo[data-v-test-s] { color: red;
       }"
     `)
     expect(compileScoped(`::v-slotted(.foo .bar) { color: red; }`))
       .toMatchInlineSnapshot(`
-      ".foo .bar[test-s] { color: red;
+      ".foo .bar[data-v-test-s] { color: red;
       }"
     `)
     expect(compileScoped(`.baz .qux ::v-slotted(.foo .bar) { color: red; }`))
       .toMatchInlineSnapshot(`
-      ".baz .qux .foo .bar[test-s] { color: red;
+      ".baz .qux .foo .bar[data-v-test-s] { color: red;
       }"
     `)
   })
@@ -142,7 +142,7 @@ describe('SFC scoped CSS', () => {
     expect(compileScoped(`@media print { .foo { color: red }}`))
       .toMatchInlineSnapshot(`
       "@media print {
-      .foo[test] { color: red
+      .foo[data-v-test] { color: red
       }}"
     `)
   })
@@ -151,7 +151,7 @@ describe('SFC scoped CSS', () => {
     expect(compileScoped(`@supports(display: grid) { .foo { display: grid }}`))
       .toMatchInlineSnapshot(`
       "@supports(display: grid) {
-      .foo[test] { display: grid
+      .foo[data-v-test] { display: grid
       }}"
     `)
   })
@@ -222,7 +222,7 @@ describe('SFC scoped CSS', () => {
   // vue-loader/#1370
   test('spaces after selector', () => {
     expect(compileScoped(`.foo , .bar { color: red; }`)).toMatchInlineSnapshot(`
-      ".foo[test], .bar[test] { color: red;
+      ".foo[data-v-test], .bar[data-v-test] { color: red;
       }"
     `)
   })
@@ -231,12 +231,12 @@ describe('SFC scoped CSS', () => {
     test('::v-deep as combinator', () => {
       expect(compileScoped(`::v-deep .foo { color: red; }`))
         .toMatchInlineSnapshot(`
-        "[test] .foo { color: red;
+        "[data-v-test] .foo { color: red;
         }"
       `)
       expect(compileScoped(`.bar ::v-deep .foo { color: red; }`))
         .toMatchInlineSnapshot(`
-        ".bar[test] .foo { color: red;
+        ".bar[data-v-test] .foo { color: red;
         }"
       `)
       expect(
@@ -247,7 +247,7 @@ describe('SFC scoped CSS', () => {
     test('>>> (deprecated syntax)', () => {
       const code = compileScoped(`>>> .foo { color: red; }`)
       expect(code).toMatchInlineSnapshot(`
-        "[test] .foo { color: red;
+        "[data-v-test] .foo { color: red;
         }"
       `)
       expect(
@@ -258,7 +258,7 @@ describe('SFC scoped CSS', () => {
     test('/deep/ (deprecated syntax)', () => {
       const code = compileScoped(`/deep/ .foo { color: red; }`)
       expect(code).toMatchInlineSnapshot(`
-        "[test] .foo { color: red;
+        "[data-v-test] .foo { color: red;
         }"
       `)
       expect(