Bundler: Support CSS Modules *.module.css

[nicksrandall]

What is the problem this feature would solve?

I love Bun's ethos to be a one-stop-shop for all developer/tooling needs. I'd like to use Bun's Bundler to bundle reusable components. While Bun's Bundler has support for bundling CSS, the lack of CSS Modules support make it much harder to share (or embed) these components because of the likelihood that the styles (CSS) could clash with other styles on the page.

What is the feature you are proposing to solve the problem?

CSS Modules is a simple, yet extremely useful tool that automatically hashes your css selectors so that they will not collide with other styles (from other sources) on your page and then provides those hashed names for you in the form on a javascript import so that the ergonomics remain. This is essential for may use-cases involving the re-use styles (or components) across apps.

More info: https://github.com/css-modules/css-modules

Notes

• Spec: https://github.com/css-modules/css-modules
• Already support in lightning css: https://lightningcss.dev/css-modules.html
• ESBuild intends to support them: [MVP] Bundle CSS modules evanw/esbuild#20

What alternatives have you considered?

• A bun-lightningcss plugin would probably work -- similar to bun's tailwind support.

[EvHaus]

Bun 1.2.3 recently also launched support for developing frontend apps using Bun.serve(). Could this ticket be expanded to add support for CSS Modules there as well (not just the bundler)? At the moment, if you try to import a CSS Module file like this:

import styles from './App.module.css';

console.log(styles.main);

Bun fails with:

TypeError: Cannot read properties of undefined (reading 'main')

[marcospgp]

CSS module support would be great, or at least documenting how we can add it using third party tools

frontend dev with bun has gotten 100x better with the support of targeting .html files, this would be the final step towards a production ready solution

[zackradisic]

I am currently working on this!

[nicksrandall]

@zackradisic I see that this issue was closed without supporting :global(.selector) syntax. IMO, that is an important feature. Should I create a new issue to support that part of css-modules?

[EvHaus]

This doesn't seem to work for me in 1.2.5. This code:

import { serve } from 'bun';
import index from './index.html';

const server = serve({
	development: process.env.NODE_ENV !== 'production',
	routes: {
		'/*': index,
	},
});

when run, throws:

frontend ReferenceError: import_App_module is not defined
      at App (/Users/evhaus/Git/pragmatic-drag-and-drop-tree/examples/App.tsx:8:19)

[gland2015]

By the way, support SCSS

[gland2015]

We can first utilize the existing ecosystem and come up with feasible solutions, and then optimize them for better results in the future