-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Open
Description
Describe the bug
I'm testing the upgrade to Rolldown Vite, which switches from ESBuild to Lightning CSS for css minification during build.
I am directly importing react-datepicker/dist/react-datepicker-cssmodules.css in one of my component scss files.
When I attempt to build with Rolldown Vite, I get the following error:
error during build:
Build failed with 1 error:
[plugin vite:css-post]
SyntaxError: [lightningcss minify] Invalid empty selector
11 | width: 9px;
12 | }
13 | {
| ^
14 | /* sr-only utility class for accessibility */
15 | }
at minifyCSS (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:31592:59)
at async finalizeCss (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:31438:38)
at async Promise.all (index 1)
at async Object.run (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:2609:22)
at async PluginContextImpl.renderChunk (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:30985:18)
at async plugin (file:///path/to/repo/node_modules/rolldown/dist/shared/src-CPA2meNe.mjs:3104:16)
at async plugin.<computed> (file:///path/to/repo/node_modules/rolldown/dist/shared/src-CPA2meNe.mjs:3430:12)
at aggregateBindingErrorsIntoJsError (file:///path/to/repo/node_modules/rolldown/dist/shared/src-CPA2meNe.mjs:2485:18)
at unwrapBindingResult (file:///path/to/repo/node_modules/rolldown/dist/shared/src-CPA2meNe.mjs:2460:128)
at RolldownBuild.write (file:///path/to/repo/node_modules/rolldown/dist/shared/src-CPA2meNe.mjs:4242:33)
at async buildEnvironment (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:33078:64)
at async Object.build (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:33481:19)
at async Object.buildApp (file:///path/to/repo/node_modules/vite/dist/node/chunks/node.js:33478:153)
at async CAC.<anonymous> (file:///path/to/repo/node_modules/vite/dist/node/cli.js:629:3)
error Command failed with exit code 1.
This seems to be coming from the following lines in react-datepicker-cssmodules.css:
:global {
/* sr-only utility class for accessibility */
}
I thought I'd be able to work around it by setting the following in the vite config:
css: {
lightningcss: {
cssModules: {
pure: false,
}
}
},
but this leads to a error Command failed with signal "SIGSEGV". error instead (granted, this is probably a Vite/LightningCSS issue).
Is the empty :global selector necessary here, or can it be safely removed? There is a similar one in react-datepicker.module.css.
Metadata
Metadata
Assignees
Labels
No labels