"Missing whitespace before :global" error when combining :global with :not() containing a comma-separated list of selectors

[cascornelissen]

I'm trying to use a dependency (react-datepicker) that contains styles that can be simplified to the following:

:global .a:not(:global .b, :global .c) {
    background: blue;
}

Changing the selector to the following resolves the error:

:global .a:not(:global(.b), :global(.c)) {
    background: blue;
}

It seems related to the combination of :global and :not with a comma-separated list because the following works as well:

:global .a:not(:global(.b)) {
    background: blue;
}

Stacktrace of the error:

Error: Missing whitespace before :global
at /path/to/style.module.scss:7:1
at transform (/path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:35:13)
at /path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:79:44
at Array.map (<anonymous>)
at Selector.map (/path/to/node_modules/postcss-selector-parser/dist/selectors/container.js:347:23)
at transform (/path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:79:25)
at /path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:153:15
at Array.map (<anonymous>)
at Pseudo.map (/path/to/node_modules/postcss-selector-parser/dist/selectors/container.js:347:23)
at transform (/path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:152:29)
at /path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:79:44
at Array.map (<anonymous>)
at Selector.map (/path/to/node_modules/postcss-selector-parser/dist/selectors/container.js:347:23)
at transform (/path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:79:25)
at /path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:54:15
at Array.map (<anonymous>)
at transform (/path/to/node_modules/css-loader/node_modules/postcss-modules-local-by-default/src/index.js:46:31)

[exidy80]

I had the same difficulty. For now, I use react-datepicker@^3.0.0 (still an upgrade from where I was).

I forked this project and added the following within test>index.test.js. The first test fails with the above error; the second one succeeds.

{
name: "handle nested global in not selectors",
input: ":not(:global .foo, :global .baz) {}",
expected: ":not(.foo, .baz) {}",
},
{
name: "handle nested global in not selectors with parens",
input: ":not(:global(.foo), :global(.baz)) {}",
expected: ":not(.foo, .baz) {}",
},