search

css-modules / postcss-modules-local-by-default

PostCSS plugin for css modules to local-scope classes and ids
MIT License
25 stars 13 forks source link

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

Closed cascornelissen closed 1 year ago

cascornelissen commented 2 years ago

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 commented 2 years ago

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) {}", },