Microbundle: All CSS-files are treated as CSS Modules

[artemtam]

Regardless --css-modules flag, it is impossible to use CSS and CSS Modules in the same project. It seems that null option works incorrectly and Rollup treats all CSS files as modules.

To reproduce, you could try to build this simple example:

import React from 'react';

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

const App = () => (
  <div>
    <div className={styles.moduleClass}>CSS module class</div>
    <div className="local-no-module-class">No-module class</div>
  </div>
);

export default App;

Building with microbundle ./index.jsx makes the following index.css file:

._1fWqO{color:#00f}
._3umtn{color:red}

However, the expected result is:

._1fWqO{color:#00f}
.local-no-module-class{color:red}

[artemtam]

It seems this is rollup-plugin-postcss issue. https://github.com/egoist/rollup-plugin-postcss/issues/281

[developit]

Thanks for the pointer to that issue.

Just to clarify - the .local-no-module-class is coming from index.css?

I think it may be possible to work around this using :global{} in the interim:

:global {
  @import url('./index.css');
}

In terms of a longer term fix: we should be able to use the undocumented options.modules.getJSON() option in rollup-plugin-postcss:

https://github.com/egoist/rollup-plugin-postcss/blob/9489ecaabbf9a4726f67deb0095914d624e9d462/src/postcss-loader.js#L90

Another approach would be to generate a regex for globalModulePaths that matches everything except *.module.css.

[artemtam]

Yes, .local-no-module-class comes from index.css.

The workaround is suitable only for local files – we can't adjust third-party dependencies. Actually, I faced this issue initially with third-party CSS.

IMO, the bug is pretty critical – it appeared in 0.12 and could break lots of projects. Clearly, rollup-plugin-postcss behavior is confusing, though it probably it makes sense to just not pass any options to the plugin, so the default class name generation algorithm will be used.

[artemtam]

Ah, I am mistaken about the workaround. It probably should work, thank you.

[katywings]

Duplicate of #617 ;)

[artemtam]

@katywings the title is confusing, so I didn't get it's the same issue :(

[FateRiddle]

I can't believe this is still open, so css modules is still the only acceptable form of css if I use microbundle? @artemtam @katywings
I come across this when using create-react-library (which use microbundle)

[katywings]

@FateRiddle yupp :/, and we are not alone: https://github.com/egoist/rollup-plugin-postcss/issues/281#issuecomment-649499833

[marvinhagemeister]

@FateRiddle This is an upstream bug in rollup-plugin-postcss. Nothing we can do about that in here microbundle.

EDIT: On second thought: What if we disable CSS modules and only enable it for .module.css files? If the docs are to be believed they have an autoModule flag that we should use instead.

[artemtam]

@marvinhagemeister it is not about autoModules, the issue is in this line: https://github.com/egoist/rollup-plugin-postcss/blob/9489ecaabbf9a4726f67deb0095914d624e9d462/src/postcss-loader.js#L74

Basically, in case you pass anything in modules, all files are treated as CSS Modules. As far as I understand, Microbundle passes class names format via modules property. So it seems if Microbundle just doesn't pass it and sticks with the default names provided by rollup-plugin-postcss, the issue will be resolved.

[marvinhagemeister]

@artemtam yup, that's what I was referring to. Sounds like an easy enough fix 🎉

[olgenn]

This problem exists for me. When will the fix be made?

[marvinhagemeister]

@olgenn right above your comment are links to two PRs filed upstream to get this resolved. We will update microbundle once a fix is merged upstream.

[wardpeet]

It should be fixed when https://github.com/developit/microbundle/pull/680 gets merged in.

[artemtam]

Hi @wardpeet! #680 is closed, so the issue is fixed?

[wardpeet]

Not yet, will be fixed when https://github.com/developit/microbundle/pull/738 is merged.

[rafael-sotelo]

Hi Sorry, is this issue fixed ?

Today I created a library using "create-react-library" and I'm having this error, is there any workaround ?

I tried the

:global {
@import url('./index.css');
}

mentioned above, but not even sure where to put that

Thank you

[ajfranzoia]

@rafael-sotelo https://github.com/developit/microbundle/issues/653#issuecomment-714378710

[developit]

The fix will be published in 0.13.