"Missing whitespace before :global" error due to notation in generated output of datepicker-cssmodules.scss

[cascornelissen]

Describe the bug I'm 99% sure this isn't really a bug in this project but wanted to create an issue here anyway to allow people running into a similar issue to find some additional information.

To Reproduce Steps to reproduce the behavior:

1. Use Webpack with css-loader or postcss-loader + postcss-modules (they both depend on postcss-modules-local-by-default)
2. Import the react-datepicker-cssmodules.css file in a Sass file

@import '~react-datepicker/dist/react-datepicker-cssmodules';

Expected behavior The compilation succeeds.

Actual behavior An error is thrown by postcss-modules-local-by-default, see stacktrace

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)

Workaround Import react-datepicker.css instead and wrap it in a :global yourself.

:global {
    @import '~react-datepicker/dist/react-datepicker';
}

Additional context

• Version: 4.6.0
• Related issues: https://github.com/css-modules/postcss-modules-local-by-default/issues/44

Feel free to close if there's no additional questions/information to be provided ✌🏼