"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 ✌🏼

[nickcwilkins]

@cascornelissen You just saved me so much time. 🙏🏽

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.