Polymer: CSS variables doesn't work inside the @media

[yordis]

The following code doesn't work.

--desktop-breakpoint: 840px;

@media (min-width: var(--desktop-breakpoint)) {
      :host([hide-on*="desktop"]) { display: none; }
}

[birkir]

Good catch, Polymer doesn't seem to apply properties to selectors. Don't know if it's just not supported or a bug.

We could add the this.rulesType.MEDIA_RULE to the forEachStyleRule callback: https://github.com/Polymer/polymer/blob/master/src/lib/style-util.html#L57

Or simply add them afterwards. There are more selectors that can apply variables, like @charset var(--my-charset), @import, @supports etc.

[joryphillips]

I would really, really love to be able to do something like below w/o having to use gulp. Any ETA?

--landscape-width: 1015px;
--desktop-width: 1144px;
--desktop: (min-width: var(--landscape-width)) and (max-width: var(--desktop-width));

@media var(--desktop) {
 ...
}

[dfreedm]

The CSS Custom Properties spec does not allow for properties to be applied to selectors: https://www.w3.org/TR/css-variables/#using-variables

Here's an example without Polymer showing that this does not work natively: http://jsbin.com/navuba/edit?html,css,output