Best practices for easier theming

[alansouzati]

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:

http://www.grommet.io/docs/develop/button

Then you have a rather different button for another theme (HPE theme)

http://www.grommet.io/docs/hpe/develop/button

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:

1. If you are a developer that is not interested at all about theming, you should just import and use the component with default colors in place (in other words, the component should contain the default colors).

   You can see it in action in this webpack config: https://github.com/grommet/grommet-simple/blob/master/webpack.config.babel.js.

   As you can see, the webpack postcss vars is empty.

2. Now you should be define custom colors and structure (additional css modifiers) if you want a new theme.

   You can see it in action in this webpack config: https://github.com/grommet/grommet-simple/blob/master/webpack.hpe.config.babel.js.

   Here I'm proving a new theme project with files that will work as an extension of the base ones (from the core project).

   The anchor file inside the base project is like this: https://github.com/grommet/grommet/blob/css-modules/src/js/styles/components/anchor.css. And the one in the theme is like this: https://github.com/grommet/grommet-hpe-theme/blob/master/components/anchor.css.

   The "extension" aspect is done through the grommet-theme-loader project available here: https://github.com/grommet/grommet-theme-loader/blob/master/index.js. You can see the webpack config for the HPE theme uses the grommet-theme loader.

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.

[ai]

What is user API for you component library right now? It is React components? How user load CSS right now? He must import some libraries CSS file or you pack CSS into JS by style-loader?

[ai]

Second question. Main question about theming — could user (developer who use your component library) change any libraries CSS or he/she could change only some pre-defined config parameters?

[alansouzati]

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.

[ai]

@alansouzati honestly, it will be better to use CSS-in-JS for you. I suggest JSS or CSJS. With CSJS you could even use PostCSS plugins (like Stylelint and Autoprefixer) by babel-plugin-csjs-postcss.

With CSS-in-JS you will be able to pass config to React components props:

<Button color="red">

[alansouzati]

Thanks for the feedback. I'm going to take a look into these libraries.