Join GitHub today
Best practices for easier theming #849
This issue is being opened based on the conversation that started here: postcss/postcss-simple-vars#57
I come from a Sass background and I'm trying to get my hands around PostCSS and CSS Modules. BTW great job here. I have about 2 weeks experience with PostCSS, so forgive me if I'm asking stupid questions.
I'm currently an open-source developer working for Grommet and one of our features is theming. You can see it in action here (still using Sass):
A button with the base theme:
Then you have a rather different button for another theme (HPE theme)
I started a new branch in Grommet to investigate how I can achieve something similar using PostCSS. Then I created this project: https://github.com/grommet/grommet-simple that uses CSSModules, PostCSS, Babel, Webpack and Grommet.
Before I put everything together as it is now, I investigated a little bit postcss-theme project, which seems nice, but did not meet the requirements I have (again, this is not set in stone requirements, i was just trying to compare with what I have today). The requirements are:
So, is there an easier approach to achieve theming with PostCSS that allows for overriding variables defined inside the CSS? It seems to me that once the variable is set inside the css, it will never be changed again.
I created a PR to "fix" that, but it turns out this is not what PostCSS is expecting. The project that I created (grommet-simple) is currently using this "fix" from my forked branch. https://github.com/grommet/grommet-simple/blob/master/package.json#L30.
My API is currently based on React components. Currently they load scss inside their index.js with webpack and style-loader/css-loader.
You can see an example of using our components here: https://github.com/grommet/grommet-simple/blob/master/src/index.js
The user can change(augment) the CSS, so it is not only about redefining config parameters. You can see one example of a theme extending a component CSS here: https://github.com/grommet/grommet-hpe-theme/blob/master/components/anchor.css.
The grommet-theme-loader that I created is currently taking care of extending the core component CSS.