Lit-element: CSS custom property mixins are not evaluated in lit-element static `styles` property

[lpellegr]

Description

CSS custom property mixins are not evaluated when used with css helper function in lit-element static styles property.

I encountered this issue while moving an app to lit-element from Polymer 3. Since there seems to be no real lit alternative to paper elements (mwc components are not ready at all), the idea was to keep using paper elements with custom styles.

Wrapping the CSS definition that includes the custom property mixin definition in a <style></style> element that is itself put at the top of html helper function is a workaround for the stackblitz demo I shared. Unfortunately, this does not work in a more complex app. I am still trying to understand what's the cause/difference.

Live Demo

https://stackblitz.com/edit/lit-element-custom-properties-css-helper-styles

Steps to Reproduce

See line 15 from index.js in live demo. Paper-input elements have their style customized using the custom property mixin --paper-input-container-input. Unfortunately, the style does not apply.

Expected Results

Paper input with red border and text input color.

Actual Results

Paper input uses its default style.

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari 11
• [x] Safari 10
• [x] IE 11

Versions

• lit-element: 2.1.0
• webcomponents: 2.2.7

[justinfagnani]

@apply never got standardized. We're not going to add support in more places.

Right now ::part is the facility for cross scope styling, we're working on cross browser support now, and we're trying to get some progress happening with ::theme for deep theming.

Until then you can use style tags in your render result. They still work.

[sorvell]

Closing based on @justinfagnani 's comment.