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

importFrom priority #215

Closed reme3d2y closed 3 years ago

reme3d2y commented 4 years ago

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

Semigradsky commented 3 years ago

Fixed in https://github.com/postcss/postcss-custom-properties/releases/tag/9.2.0