overwrite single values

[ctaepper]

first of all: i love this approach to theming!

so lets say i have a theme folder default in my module containing colors.css and components.css . i want to use this module inside another application and all i want is to overwrite the colors, maybe even only one of four colors...

could a themePath like extend the default theme rather than replace it?

[andywer]

Hi @ctaepper!
Sorry for the delayed response, but I have been away for a few days.

Unfortunately there is no simple solution for this approach yet.

Have a look at this: css-modules/css-modules-loader-core#103
They didn't want to change the CSS modules loader core which is understandable. So I extended the JSPM loader we use at my current project. Unfortunately the modification is not open source, though.

If you are using webpack you could implement something similar by modifying https://github.com/webpack/css-loader.

You can then provide a custom themeFileResolver method to postcss-theme that rewrites theme(colors) to "themes/other/colors.css || themes/default/colors.css" instead of "themes/default/colors.css".

You can then do it like this:

/* themes/default/colors.css */

@value black: #000000;
@value white: #FFFFFF;
@value green: #00FF00;

/* themes/other/colors.css */

@value black, white from theme(colors);
@value green: #00FF00;

Unless you are working on a big project you will probably not want to go through the trouble... But changing the webpack loader and making it open source would be pretty cool, though :)

[andywer]

@ctaepper Is this still a problem? For JSPM that was some major work, but I recognized a webpack implementation is much easier and can be done by changing the webpack config only :)

[ctaepper]

@andywer haven't had time to look into it yet. i am using webpack and yes, it would be easy to create the custom themeFileResolver to fall back to default, if there is no custom theme file. however your proposal is not the way to go imho... i don't want to override one value and explicitly import (possibly a lot) other values which don't get overridden

i am also following the css-modules issues in order to see if they come up with something great

[andywer]

Yeah, fair enough. The approach is not very elegant yet. Let me know if you see a better way :)