diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts index 14e1a2d..7c1e251 100644 --- a/lib/stylePlugins/scoped.ts +++ b/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) { diff --git a/test/stylePluginScoped.spec.ts b/test/stylePluginScoped.spec.ts index 3e72c54..697eee9 100644 --- a/test/stylePluginScoped.spec.ts +++ b/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) +})