Issue with CSS Modules

[plesiecki]

Hello folks.

First of all, sapper is great.

Next, I would like to kindly report a issue with sapper.

I try to utilize CSS Modules within sapper app. For this purpose I use @modular-css/rollup from amazing tivac/modular-css.

I import CSS Modules inside a component, like this:

import {key} from './styles.css';

It works like a charm with rollup only. But sapper pushes yet another plugin. It's called sapper-internal (introduced in https://github.com/sveltejs/sapper/commit/bebb0dd59519b59c67a427706885a4e1255c5ff7) and it overrides all the tough work @modular-css/rollup did. :disappointed: https://github.com/sveltejs/sapper/blob/f66c7dcb0db2ef8699419c222e1c95a4b8058114/src/core/create_compilers/RollupCompiler.ts#L37-L40

And then build attempt ends up with 'key' is not exported by styles.css error.

/cc @tivac

[tivac]

There's no hooks in sapper even now, a year later, that let you disable or replace its CSS handling. You can remove part of it by using something like patch-package but I haven't yet figured out the right place to inject the modular-css-created output files. build.json mayyyyyybe, but there's no hook for editing it yet and the code that generates the JSON is big and complex.

[swyxio]

can i ask why you're trying to use css modules in Sapper?

[tivac]

For me I was going to use sapper to build the new version of https://m-css.com and I like using modular-css on all my projects, and especially for building the website for modular-css itself. I'm a bit biased on that point, unsurprisingly.

[benmccann]

This section of code also seems to cause issues with rollup-plugin-postcss as well. I've never used CSS Modules and am not too familiar with it or what its rollup plugin is doing, so I'm not quite sure whether this would work as a solution, but if anyone has a chance, I'd be curious whether the solution suggested by @krzysztof-grzybek in https://github.com/sveltejs/sapper/issues/699#issuecomment-642460603 for rollup-plugin-postcss would work here as well