fix: :root Selector should not be scoped (vuejs#85)

Author: joe223

lib/stylePlugins/scoped.ts

@@ -46,6 +46,15 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
           if (n.type !== 'pseudo' && n.type !== 'combinator') {
             node = n
           }
+
+          if (
+            n.type === 'pseudo' &&
+            n.value === ':root' &&
+            n === selector.last
+          ) {
+            n.value += ' '
+            node = n
+          }
         })
 
         if (node) {

test/stylePluginScoped.spec.ts

@@ -135,3 +135,16 @@ test('spaces before pseudo element', () => {
   expect(code).toContain('.abc[test],')
   expect(code).toContain('[test]::selection {')
 })
+
+test('scoped :root selector', () => {
+  const { code } = compileStyle({
+    source: `:root { --color: red; }
+:root p { --color: blue; }
+`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain(':root [test] { --color: red;')
+  expect(code).toContain(':root p[test] { --color: blue;')
+})