Transitive values

[sokra]

@value aaa: red;
@value bbb: aaa;

.a { color: bbb; }

should be .a { color: red; }

[ctaepper]

even better use case:

@value margin-base: 20px;
@value margin-large: margin-base * 2;

[geelen]

@ctaepper nice idea, but I think that example needs to be:

@value margin-base: 20px;
@value margin-large: calc(margin-base * 2);

.a { margin: margin-base; }
.b { margin: margin-large; }

I don't think this plugin should be doing anything except simple substitution, so the resulting output would be:

.a { margin: 20px; }
.b { margin: calc(20px * 2); }

You'd then be able to run this through postcss-calc to compile any calc expressions down to their result if you wanted. I personally wouldn't bother, except maybe as a minification step for production use.

[ctaepper]

@geelen yes you are right. i initially tried it that way, only ending up with something like this in the output css

.b { margin: calc(i_const_a342 * 2); }

i am trying css modules for a smaller project switching from Harry Roberts' inuitcss framework and this is a function i am really missing here.

[pauldijou]

Same problem with postcss colors btw:

@value primary: #2c3e50;
@value primary-alt: color(primary lightness(+10%));

This crashes the build process because the postcss colors plugin cannot interpole primary.

ERROR in ./components/Button/style.css
Module build failed: ModuleBuildError: Module build failed: Error: <css input>: Unable to parse color from string "primary"