CSS modules support for Vite

[3cp]

💬 RFC

Currently Aurelia 2 setup with CSS modules does not work with Vite bundler.

🔦 Context

Aurelia 2 has conventions that when using CSS modules, the css file name should still match js/ts/html file names. For example my-comp.css(scss/less) to match my-comp.html and my-comp.ts(js).

However Vite has different conventions, it only works with file name my-comp.module.css(scss/less), and it decided not to make it flexible with alternative setup. vitejs/vite#2981

For us to support CSS module in Vite,

1. one option is that we can utilize our vite-plugin's "load" and "transform" hooks, similar to what we did with our html file.
2. another option is to update our conventions to support .module.css naming conventions.

Both options seem approachable. Option 2 might be slightly easier because it's in our control.

[bigopon]

With our current convention, it's easy to have everything as css modules, but not easy to have some css modules and some non-css modules.
With option 2, we can support the mixed usage seamlessly, with good naming practice encouraged in applications.

Though if we are to encourage option 2, existing applications will be "left out", and break, some apps have been going on for awhile, so we may need to have a strategy to help app migrate to the new convention.

[3cp]

Existing app should still work, we would not remove the existing global config for css modules. BTW exiting global config for css modules would not work for vite.

Options 2 adds file based css modules support without explicit configuration. The question is do we want to support that vite conventions in other bundlers' setup. If it's a vite only conventions, it's bit confusing for other setups. It might be tricky to support it in other bundlers.

[bigopon]

The question is do we want to support that vite conventions in other bundlers' setup. If it's a vite only conventions, it's bit confusing for other setups. It might be tricky to support it in other bundlers.

What if css module can be configured from our html?

<import from="my.css" type="css-module">

With this as the base, we can configure the webpack loader/vite plugin to do necessary work to turn the css into a css module file/virtual file.

With this, we will have the ability to have standard css together with css module

<import from="my.css">
<import from="my.modules.css" type="css-module">

[3cp]

<import from="my.css" type="css-module"> does not work for vite. Actually vite only supports its own naming convention, nothing else.

We might just leave vite as special.

I think your proposal needs option 1 instead, the vite plugin.

[bigopon]

We might just leave vite as special.

You meant if an apps use Vite and wants to have css module it needs to have .module.css as the extension for its css file?

[3cp]

We might just leave vite as special.

You meant if an apps use Vite and wants to have css module it needs to have .module.css as the extension for its css file?

Yes.

[bigopon]

Yeah ok lets just leave it alone, we can try something later. We just need to have it as a mean to develop plugin for now. Its not even in the official list yet.

[3cp]

Parcel also uses .module.css convention.
https://parceljs.org/languages/css/#css-modules

But it provided global option to use css-module on all files.
https://github.com/aurelia/new/blob/06f06862bab5f7b13107237a69cf59de1385d126/parcel/package.json#L53

We probably can remove the usage of that global option, make parcel and vite the same.
In fact, if we remove webpack from official support, we can use .module.css convention on all bundlers including dumber (easy to use gulp to support .module.css files). That might be a better option moving forward.