warnings with postcss-custom-properties

[orlin]

Using postcss-custom-properties through postcss-cssnext, or otherwise, produces a lot of warnings regarding --mdc-ripple-... variables that are "undefined and used without a fallback". It's 99 warnings to be exact, when I use mdc-button through sass. If I @import '@material/ripple/mixins'; then the warnings are reduced to 94. I want to use custom properties, and I can't even disable the plugin because your code uses them -- e.g. Unable to parse color from string "var(--mdc-theme-primary, #3f51b5)" is an error I get if I configure cssnext with customProperties: false. Here are some questions that come to mind:

1. Where are all these properties (supposed to be) defined?
2. Could there be a ripple-free version of mdc-button? People not using the ripple shouldn’t need additional includes defining extra properties, should they?
3. Does anyone know of a way to suppress these warnings, preferably just for postcss-custom-properties. The module's warnings: false option doesn't turn them off, which is a known issue / feature request.

[sgomes]

Thanks, @orlin!

We can definitely look into some of this, as using a custom property without a fallback (that is, doing var(--foo) with no second parameter) could be considered a code smell. I'll add a tech debt issue to take care of that.

That said, the usage of custom properties in the ripple shouldn't benefit much from preprocessors like postcss-custom-properties; most of the usage is dynamic and meant to be done in runtime, through JavaScript.

So, to answer your questions:

1. They're defined in the mdc-ripple-base() mixin. They get redefined in JavaScript, in runtime. The problem here is likely that, since they're not defined at the :root level, postcss-custom-properties can't handle them.
2. There already is. The ripple has a fallback that gets used if the browser doesn't support custom properties. However, preprocessors like postcss-custom-properties confuse things a bit, as they support some aspects of custom properties, but not others. Check out the appendix on my introductory blog post about custom properties for more info.
3. Sorry, can't help there 🙁

[sgomes]

Closing this issue and tracking progress in #361.