Skip to content

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

@MrZipper7

Description

@MrZipper7

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions