postcss/postcss-custom-properties

importFrom priority

reme3d2y opened this issue · 1 comments

reme3d2y commented

Thank you for this great plugin.

I want to override custom properties used in a third-party library.
I tried to do that with importFrom. But I was surprised to see that the variables were not overridden.

Inside this library, one of the components contains the following css rules:

:root {
    --border-radius: 4px;
}

.component {
    border-radius: var(--border-radius);
}

I configure the following options:

importFrom: [{
    customProperties: { '--border-radius': '100px' }.
}]

I expect the border-radius to be 100px.
But it remains 4px.

In source code I saw that variables from root have priority over variables from importFrom. Is this correct behavior?

In my opinion, the variables from importFrom should have the maximum priority.

I think those lines should be switched:
https://github.com/postcss/postcss-custom-properties/blob/master/src/index.js#L31
https://github.com/postcss/postcss-custom-properties/blob/master/src/index.js#L32