Hi @eskimoblood. That's a good question!

We are currently using postcss-theme in a large (20+ developers, multiple packages) enterprise React app.
Our approach: If you want to be able to theme components in node_modules/, you have got to configure the webpack CSS loader to be run on node_modules/my-other-package/**, too (instead of excluding everything in node_modules).

You can do it like that: webpack/webpack#2031 (comment)

Thanks, I will give it a try.

Just another question about node modules. If I understand it correctly it should also be possible to have the themes in its own module and use them with the following postcss setting:

theme({ themePath: '../node_modules/myThemes/theme1' })

@eskimoblood Interesting idea. We actually never tried that... But it should work. You might have to make sure the webpack CSS loader is applied to node_modules/myThemes as well.

Please tell us if it works for you or why not :)

First I need to convince the team to use css modules.

Fair enough. FYI: If you need some more lecture or arguments for using it 😉:

• https://medium.com/front-end-developers/css-modules-solving-the-challenges-of-css-at-scale-85789980b04f
• https://medium.com/@taion/the-problem-with-css-in-js-circa-mid-2016-14060e69bf68

We tried traditional SASS, then inline styles with Radium and eventually sticked to CSS modules. Our reasons were:

• Inline-styling can be pretty tough to debug, since in the browser's dev tools you only see the set of inline-styling rules instead of a cascade of different CSS classes containing subsets of the elements style, thus making tracing back why some rules are applied right in a certain situation rather complicated
• Inline-styling seems to contradict the W3Cs idea of separating styling rules from the code/markdown
• There was no media queries and no pseudo-selectors with inline-styling (might have changed meanwhile)
• Writing CSS rules in a JS object seems just wrong, since you are writing one language in another and have to escape everything (marginLeft: '1.5em' vs margin-left: 1.5em)