Is there a css minifier that calculates variables from :root {} (possibly from a different file)?

Question

I am looking for a CSS minifier, or perhaps just CSS calculator, that will give me CSS with exact values of properties, instead of retaining var(--root-value). Furthermore, if possible, the :root{} setting would be in a different file.

So I made this web application template, which I am using for a few different sites. I have several CSS files, the first of them just having :root{} setters of values in it, and the rest use

selector {
  property: var(--root-value);
}

format.

I am using VS Code and it's extension minify from HookyQR, which in turn uses clean-css from Jakub Pawlowicz to minify CSS.

I've been searching Google for a better minifier and even just a calculator I could use before minifying with minify to calculate those values, but to no avail.

Please advise.

initial-setting.css

:root {
    /* COLORS */
    --bg-color: #fff;
    --main-color: #913b86;
    --compl-color: #3b9146;
    --text-color: #666;

    /* DIMENSIONS */
    --navbar-height: 4em;

    /* SHOW/HIDE */
    --show-sidebar: block; /* block for true, none for false */
}

style.css

.header-navigation>ul>li {
    height: var(--navbar-height);
    line-height: var(--navbar-height);
}

.header .mobi-toggler:hover {
    color: var(--bg-color);
    background: var(--main-color) url(../img/icons/toggler.png) no-repeat 6px -28px;
    border-color: var(--main-color);
}

Now after calculate I would like to get

style.c.css

.header-navigation>ul>li {
    height: 4em;
    line-height: 4em;
}

.header .mobi-toggler:hover {
    color: #fff;
    background: #913b86 url(../img/icons/toggler.png) no-repeat 6px -28px;
    border-color: #913b86;
}

And then minified something like

style.c.min.css

.header-navigation>ul>li{height:4em;line-height:4em;}.header .mobi-toggler:hover{color:#fff;background:#913b86 url(../img/icons/toggler.png) no-repeat 6px -28px;border-color:#913b86}

or the same thing directly in style.min.css.

Answer 1

You need a CSS compiler.

I will suggest Stylus since it has flexible syntax ( you can even write in the same way writing CSS ), but you have access to a thing called variables which is the exact thing you're looking for.

You can set'em up just by Stylus or Sass ( based on your choice ) and compile variables to calculate at the compile time, you will get the same result as you want to.

example:

$bg-color = #fff;
$main-color = #913b86;
$compl-color = #3b9146;

div {
  color: $main-color;
}