search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

CSS Variable Dependence in Root #129

Closed ZachJW34 closed 5 years ago

ZachJW34 commented 5 years ago

I was using postcss-custom-properties to produce fallback values for IE theming. Our application has hundreds of color variables, and we have them declared in root. I understand the transforming of the custom properties that contain var() in root, but should CSS variables that depend upon other CSS variables also be transformed and thus produce a duplicate variable declaration?

Input

:root {
    --color1: red;
    --color2: var(--color1);
    --color3: var(--color2);

    background-color: var(--color3);
}

Expected

:root {
    --color1: red;
    --color2: var(--color1);
    --color3: var(--color2);

    background-color: red;
    background-color: var(--color3);
}

Actual

:root {
    --color1: red;
    --color2: red;
    --color2: var(--color1);
    --color3: red;
    --color3: var(--color2);

    background: red;
    background-color: var(--color3);
}

Is this duplication necessary for obtaining the correct fallback values for css variables that depend upon another? If not, should there be an option to not transform css variable declarations?