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

Author: hrobertson

lib/stylePlugins/scoped.ts

@@ -46,6 +46,10 @@ 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.value = n.spaces.before = n.spaces.after = ''
+          }
         })
 
         if (node) {

test/stylePluginScoped.spec.ts

@@ -135,3 +135,19 @@ 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: red; }
+div:root { color: red; }
+`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toMatch(/^\[test\] { color: red;/m)
+  expect(code).toMatch(/^ ?p\[test\] { color: red;/m)
+  expect(code).toMatch(/^div\[test\] { color: red;/m)
+})