diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts index 14e1a2d..6013c34 100644 --- a/lib/stylePlugins/scoped.ts +++ b/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) { diff --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts index 3e72c54..3b50dab 100644 --- a/test/stylePluginScoped.spec.ts +++ b/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;') +})