New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Best practices for easier theming #849

Closed
alansouzati opened this Issue Jul 22, 2016 · 5 comments

Comments

Projects
None yet
2 participants
@alansouzati

alansouzati commented Jul 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jul 22, 2016

Member

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?

Member

ai commented Jul 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jul 22, 2016

Member

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?

Member

ai commented Jul 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@alansouzati

alansouzati Jul 22, 2016

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.

alansouzati commented Jul 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jul 22, 2016

Member

@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">
Member

ai commented Jul 22, 2016

@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">

@ai ai closed this Jul 22, 2016

@alansouzati

This comment has been minimized.

Show comment
Hide comment
@alansouzati

alansouzati Jul 22, 2016

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

alansouzati commented Jul 22, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment