Error when attempting to import CSS file from another CSS file.

[lukethacoder]

Attempting to import a CSS only LWC from within another LWCs CSS file causes build errors.

Reproduction repository: https://github.com/lukethacoder/lwc-vite-playground/tree/a2c7fc8a4b65545d1bb831a3db0e4a603f18e202

/* c/cssShared */
button {
  background-color: lawngreen !important;
}

/* c/button */
@import "c/cssShared";

button {
  background-color: #deb887;
}

This runs perfectly fine in dev mode (pnpm dev), but build/production mode (pnpm build) it fails with the following error:

> vite build

vite v7.1.3 building for production...
[plugin lwc:vite-plugin] force-app/main/default/lwc/button/button.js: The component namespace and name could not be determined from the specifier null or filename "C:\\Github\\lwc-vite-playground\\force-app\\main\\default\\lwc\\button\\button.js"
The namespace and name should both be non-empty strings. You may get unexpected behavior at runtime. Found: namespace="C:\\Github\\lwc-vite-playground\\force-app\\main\\default\\lwc\\button" and name="C:\\Github\\lwc-vite-playground\\force-app\\main\\default\\lwc\\button"
[plugin lwc:vite-plugin] force-app/main/default/lwc/cssShared/cssShared.css: The component namespace and name could not be determined from the specifier null or filename "C:\\Github\\lwc-vite-playground\\force-app\\main\\default\\lwc\\cssShared\\cssShared.css"
force-app/main/default/lwc/button/button.css (1:7): Error when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 16 modules transformed.
✗ Build failed in 633ms
error during build:
force-app/main/default/lwc/button/button.css (1:7): "default" is not exported by "force-app/main/default/lwc/cssShared/cssShared.css", imported by "force-app/main/default/lwc/button/button.css".
file: C:/Github/lwc-vite-playground/force-app/main/default/lwc/button/button.css:1:7

1: import stylesheet0 from "c/cssShared";
          ^
2:
3: function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {

    at getRollupError (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at error (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
    at Module.error (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:16915:16)
    at Module.traceVariable (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:17367:29)
    at ModuleScope.findVariable (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:15037:39)
    at Identifier.bind (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:5400:40)
    at ArrayExpression.bind (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:2787:28)
    at ExportDefaultDeclaration.bind (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:2791:23)
    at Program.bind (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:2787:28)
    at Module.bindReferences (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:16894:18)
    at Graph.sortModules (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:22690:20)
    at Graph.build (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:22588:14)
    at async file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:23278:13
    at async catchUnfinishedHookActions (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:22749:16)
    at async rollupInternal (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/rollup@4.49.0/node_modules/rollup/dist/es/shared/node-entry.js:23273:5)
    at async buildEnvironment (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/vite@7.1.3/node_modules/vite/dist/node/chunks/dep-Bj7gA1-0.js:34134:12)
    at async Object.build (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/vite@7.1.3/node_modules/vite/dist/node/chunks/dep-Bj7gA1-0.js:34504:19)
    at async Object.buildApp (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/vite@7.1.3/node_modules/vite/dist/node/chunks/dep-Bj7gA1-0.js:34501:153)
    at async CAC.<anonymous> (file:///C:/Github/lwc-vite-playground/node_modules/.pnpm/vite@7.1.3/node_modules/vite/dist/node/cli.js:649:3)
 ELIFECYCLE  Command failed with exit code 1.

I assume this might have something to do with the vite:css/vite:css-post patches that vite-plugin-lwc knocks out. I've attempted to poke at them to get storybook working (with not much success on the build side, but managed to get the storybook dev server running - #95).

[cardoso]

Hey @lukethacoder I appreciate you debugging this. Would you be able to submit a PR?

PS: I've been away from LWC development for a while now and this repo probably needs a new maintainer.

[lukethacoder]

#97

@cardoso not the most ellegant solution (ignoring I whacked a --no-verify just to get things committed this late into the evening) but gets things fixed (for my use case at least). Not too sure if that PR will ever be in a mergable state but at least it will be there for any weary travelers that may stumble this way. It would be great if Salesforce supported an official plugin, but alas.

This does currently break npm imports, and requires declaratively setting your modules: [] config (even if you are just importing directly from a lwc.config.json/lwr.config.json file). I'd have to do a bit more poking to see where in the pipeline the lwc.config.json/lwr.config.json files are read and if its something we could tap into, or have to replicate ourselves (would save end users from having to define modules: [] in their vite.config.ts files.