Material-components-web-components: Question: CSS Custom Properties vs SASS

[bennypowers]

Hello!

Are there plans to replace compiled SASS with CSS custom properties?

Thank you!

[mercmobily]

I second this question. Using SASS seems to go against the whole "Use the platform" principle...
I was personally convinced you'd release this new set of components next October, when releasing Polymer 4.
I am AMAZED that you managed to release them now -- and somehow relieved, since I was planning on porting a huge project to lit-html next month. This way, I will be able to use all of the new components... yay!
Anyhow, please let us all know. This is my only gripe with these components: are they not using CSS properties? Is SASS the final decision?

[Westbrook]

Would also be interested in hearing whether the upcoming expansion to Material Design "Themeing" might imply the benefits of a sort of ::part()/::theme() polyfill here?

[ernsheong]

Their use of SASS is internal to the implementation of these components, used to generate the CSS files that are actually loaded by the components. What's wrong with using SASS?

[mercmobily]

There is nothing "wrong" with using SASS. However:

• It's not just a matter of internal implementation, since the way you theme them will be affected
• We spent the last 5 years pushing CSS custom properties, CSS mixins, etc. -- for Polymer
• I am sure you heard the sentence "Use the platform" before...
• Polymer elements, written and maintained by the Polymer team, set a benchmark on how to do things. Best practices, patterns, etc. SO, if SASS is a "thing" now... be it. But...

I might be missing something though. We started as elements based on two-way bindings using HTML Imports, CSS properties, shadow DOM and HTML Templates. Three versions later, we have one-way REDUX-like bindings, LIT-HTML instead of HTML Templates, SASS instead of CSS properties...

Is Shadow DOM all that's left? I mean, if it IS, it wouldn't be bad!

But we do need to acknowledge it, document it, explain the reasons, offer SOME kind of upgrade path... etc.

[web-padawan]

Have a look at the compiled code in the mwc-button-css.js and you will see that CSS custom properties are there. Starting from the 3.5 version, Sass supports custom properties, so they are just a compile target here. And usage of Sass enables reusing code from Material Components Web.

It would be nice to have a documentation describing how is that implemented and what we need in order to compile Sass variables into CSS custom properties in our components, though.

[mercmobily]

Hey, you guys at vaadin must be going "Oh my" with the steering away from two-way bindings, HTML Imports, paper elements and the usage of Redux...! I have a codebase to port over to P3/mwc that I consider overwhelming. But you guys... put me to shame!

[web-padawan]

@mercmobily we have put a really big effort to implementing Vaadin components using Polymer, and the Vaadin platform will rely on Polymer 2 for a while, that's true. But we also aiming to keep an eye on the trends, even though not being inclined to "rewrite everything from scratch".

We also have our own requirements, e. g. we are not restricted to use some Sass variables for styling (like new Material Web Components do), but we have a requirement for themability, so our components already supported theming before Material Design team announced that as their motto.

So what do you see as a shame here? I'm just saying that you are wrong and this set of components is using CSS custom properties, the Sass is just used for the source code. In Polymer 2.x there wasn't any transformation, and you were able to serve source code as is. This has changed now.

[mercmobily]

Put me to shame was meant in terms of code that needs to be ported... I have a small hill, but you guys have a small set of mountains!
I see what you are saying in terms of CSS custom properties. I guess I like to live in a world where you don't have to build a such in order to use a piece of software -- and a world away from monsters like Webpack etc.
Thanks for pointing out the CSS properties misunderstanding on my side!

[dfreedm]

We're mostly just reusing the styling from material-components-web, which is built using SASS. Where they have provided CSS Custom Property hooks for some of their styling, we provide the same ones, and perhaps a few extra in the cases where the original styling is not possible due to Shadow DOM scoping constraints.

We probably won't be providing ::part and ::theme styling for a while, as the spec is still evolving on the syntax.

That said, the MDC team is open to community feedback, and we'll update our styling to keep pace with theirs.

[bennypowers]

https://github.com/material-components/material-components
Is this the right place to file an issue?

[dfreedm]

@bennypowers https://github.com/material-components/material-components-web is probably the right spot.

[eduardosada]

Use the platform

[dfreedm]

The current plan will be to implement a CSS Custom Property styling API where appropriate. Later, we can augment this with ::part and ::theme