Overwriting mixin properties

[Pupix]

Hello! I am trying to overwrite a property coming from a CSS mixing, but the way Polymer handles the variables makes it impossible to do so (without using "!important").

<style>
    .foo {
        @apply(--paper-font-caption)
        white-space: normal;
    }
</style>

The expected result would be to have "white-space: normal" applied on top of the one provided by paper-styles, however that's not the case.

Do I have to rewrite the entire mixing just to change one property or is there an alternative way?

Cheers.

[sorvell]

This is due to the way that Polymer separates static styles from styles which contain custom properties. This use case is reasonable and our approach needs to be modified slightly to support this better.

We will probably not separate custom properties css from static css within rules that contain properties.

[Pupix]

Thanks for the response. Will wait for an update then.

[sorvell]

This issue also leads to specificity issues when combining static and custom property rules.

[robrez]

👍

[jmcgdz]

👍

[nazar-pc]

@Pupix, can you provide complete test case? I guess this might be either already fixed by #2642 or I can try to extend PR to cover this case as well and add corresponding test case.

[robrez]

@nazar-pc Here's a jsbin that, i think, demonstrates the issue:

https://jsbin.com/kefuzi/edit?html,output

[nazar-pc]

OK, here is easier to understand example: https://jsbin.com/xupufudivu/1/edit

[nazar-pc]

Seems to be different area than covered in #2642, but I'll take a look on this as well.

[nazar-pc]

#2642 now fixes this issue as well.