fix: support standalone pseudo element selectors (#33)

closes vuejs/vue-cli#2743

Author: haoqunjiang

lib/stylePlugins/scoped.ts

@@ -23,13 +23,12 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
     node.selector = selectorParser((selectors: any) => {
       selectors.each((selector: any) => {
         let node: any = null
-        let hasDeep: boolean = false
+
         selector.each((n: any) => {
           // ">>>" combinator
           if (n.type === 'combinator' && n.value === '>>>') {
             n.value = ' '
             n.spaces.before = n.spaces.after = ''
-            hasDeep = true
             return false
           }
           // /deep/ alias for >>>, since >>> doesn't work in SASS
@@ -39,28 +38,28 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
               prev.remove()
             }
             n.remove()
-            hasDeep = true
             return false
           }
           if (n.type !== 'pseudo' && n.type !== 'combinator') {
             node = n
           }
         })
+
         if (node) {
           node.spaces.after = ''
-          selector.insertAfter(
-            node,
-            selectorParser.attribute({
-              attribute: id
-            })
-          )
-        } else if (hasDeep) {
-          selector.prepend(
-            selectorParser.attribute({
-              attribute: id
-            })
-          )
+        } else {
+          // For deep selectors & standalone pseudo selectors,
+          // the attribute selectors are prepended rather than appended.
+          // So all leading spaces must be eliminated to avoid problems.
+          selector.first.spaces.before = ''
         }
+
+        selector.insertAfter(
+          node,
+          selectorParser.attribute({
+            attribute: id
+          })
+        )
       })
     }).processSync(node.selector)
   })

test/stylePluginScoped.spec.ts

@@ -102,3 +102,24 @@ h1 {
   // >>> combinator
   expect(style).toContain(`.foo p[v-scope-xxx] .bar {\n  color: red;\n}`)
 })
+
+test('pseudo element', () => {
+  const { code } = compileStyle({
+    source: '::selection { display: none; }',
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain('[test]::selection {')
+})
+
+test('spaces before pseudo element', () => {
+  const { code } = compileStyle({
+    source: '.abc, ::selection { color: red; }',
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain('.abc[test],')
+  expect(code).toContain('[test]::selection {')
+})