Discussion on: PostCSS with CSS Modules and React

[Pedro Otero Prada]

I was looking for a way to have scoped styles that I could use by writing import styles from './my.css' and using them like className={styles.someClass}.

Without setting up anything further than was given here I made it. Any reason why you chose to use styleName? In my case, I'd rather stick to a well established attribute name. On the other hand, I can import more than one module to my components and use other styles. This is useful for when I have global styles that might apply in many places.

[Dave Irvine]

So styleName comes from the babel-plugin-react-css-modules plugin. Stolen from their docs:

However, there are several several disadvantages of using CSS modules this way:

• You have to use camelCase CSS class names.
• You have to use styles object whenever constructing a className.
• Mixing CSS Modules and global CSS classes is cumbersome.
• Reference to an undefined CSS Module resolves to undefined without a warning.

Using babel-plugin-react-css-modules:

• You are not forced to use the camelCase naming convention.
• You do not need to refer to the styles object every time you use a CSS Module.
• There is clear distinction between global CSS and CSS modules, e.g.

<div className='global-css' styleName='local-module'></div>