react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

Build fails in Rolldown Vite / Lightning CSS when importing css file

Open MrZipper7 opened this issue 2 months ago • 0 comments

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.

MrZipper7 avatar Nov 03 '25 14:11 MrZipper7