Write a lint rule against CSS modules

[gaearon]

As much as we appreciate the pain points CSS Modules are solving, we’ve made a decision not to use them in this project. You can see some discussion on this in #90.

However Webpack currently lets you use custom :local syntax to “enable” them in regular CSS files. We don’t want people to do this because this limits our ability to add more CSS tools or migrate from Webpack to other bundlers in the future.

This is why we should enforce that people don’t use :local syntax. Otherwise we’ll just randomly break their apps when we change something in how we handle CSS. This won’t be fun, and people will blame us for that even though we explicitly do not support this feature.

Luckily, it is easy to fix. We should write a custom lint rule with ERROR level that is triggered on a statement like this:

import styles from './styles.css';

This, however, should work fine:

import './styles.css';

This semi-enforces that you don’t use CSS Modules because we just don’t support them. We can ensure your CSS stays reasonably portable in case we want to change the underlying architecture.

Reference on writing ESLint rules: http://eslint.org/docs/developer-guide/working-with-rules.

If you want to work on this, please write here so we don’t have multiple people doing it at the same time.

[casesandberg]

I got this 🐈

[KyleAMathews]

In Gatsby we added CSS Modules support only for css files with names *.module.css per @andreypopp's suggestion which seems safe enough. I don't have good enough pulse on where CSS Modules are in adoption life cycle but this might be a good compromise as CSS Modules are one of the most useful things to come along in the CSS world in a long time.

[hzoo]

@casesandberg I would use astexplorer to check the ast of the 2 forms

[gaearon]

We can reconsider this in a few months. But it's good to warn until/unless we commit to supporting them.

[casesandberg]

@gaearon Should this be in a eslint-plugin-create-react-app module or just as a rule in config/rules?

[gaearon]

I'm not sure how to structure rules in eslint so whatever is simpler ;-)

[casesandberg]

I'm not really sure either-- if there is a possibility we will have more of these in the future we should probably bundle them all together in one plugin.

[gaearon]

At a later point, we sure can. For now let's keep it as simple as possible.

[jaredpalmer]

@gaearon is the plan to write linters against Aphrodite and Radium too? Or is CSS-in-JS okay to use?

[mxstbr]

Both Aphrodite and Radium are fine, since they don't use any webpack-specific features, which is what we want to avoid.

If we ever switch away from webpack and people are using CSS modules they won't have any chance to update because it won't work!

[giuseppeg]

CSJS is a good alternative to CSS Modules although I like the fact that you are not trying to enforce any CSS [in JS] methodology 🙏