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. egoist/rollup-plugin-postcss#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: egoist/rollup-plugin-postcss#281 (comment)

[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 🎉