diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts index a34c599..c0ce6c2 100644 --- a/lib/stylePlugins/scoped.ts +++ b/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) }) diff --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts index 23e7e13..2062dd3 100644 --- a/test/stylePluginScoped.spec.ts +++ b/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 {') +})