Using var in a css mixin breaks the scoped style of the element

[Sleeckx]

Description

Using var in a css mixin rule causes the element to not define its scoped style. This works fine for Polymer 1.2.4. Did something change or is this no longer allowed?

Live Demo

http://jsbin.com/nulepeveku/edit?html,output

Steps to Reproduce

1. Create my-element
2. Append my-element to document.body
3. Define a css mixin containing a var on my-element

Expected Results

Actual Results

Versions

• Polymer: v1.3.0
• webcomponents: v0.7.21

[sorvell]

Confirmed. Thanks for the report. This is a bug introduced as a result of an optimization we applied in 1.3.0. Unfortunately, we did not have a test to catch this. The fix is clear and we'll work on addressing this and making a quick release asap.

[sorvell]

Here's a temporary workaround Add a style like this in the affected element:

:host {
   --workaround: inherit;
  color: var(--workaround);
}

For example: http://jsbin.com/cerepig/edit?html,output.

[Sleeckx]

Thanks for the quick fix and workaround!

[MeTaNoV]

I have a similar issue but with a custom property and the workaround doesn't seem to work for me... we cannot update to 1.3.0 due to this and are waiting for the next fix release.

[arthurevans]

@MeTaNoV can you post a repro for your case? I think @sorvell is offline at the moment. I'm just about to post release notes for 1.3.0, so would like to know if we're missing something here...

[kevin-wise]

We also saw this issue with 1.3.0 and had to rollback to 1.2.4. I just checked the fix branch and it appears to solve all styling issues except one, which might be unrelated. If it's a different bug we'll post something. In the mean time, thanks for making this a priority to release!

[arthurevans]

Per @MeTaNoV, here's another repro that just uses a var() in an ordinary ruleset, no mixins.

        paper-badge {
          --paper-badge-background: var(--some-color);
        }     

http://jsbin.com/xajayo/1/edit?html,output

When I first tried this, it appeared that the workaround rules needed
to be added to the same ruleset as the offending rule, but subsequent
testing suggests that the simple :host rule at the beginning of the style tag works.

http://jsbin.com/xajayo/2/edit?html,output

[samiheikki]

+1 for this