Allow finer-grained control of emitted CSS

[kfranqueiro]

In the past, we've received requests (such as #3357) for ways to better control what CSS is output by MDC Web. Being able to more granularly control what CSS we output also has the potential to help prospective framework wrappers that also want to govern output styles.

To this end, @mmalerba has worked on a prototype which would allow selectively including MDC Web's styles either all at once or piece-by-piece, with the ability to request the following subsets:

• base ("structure") - anything that doesn't fall into one of the more specific subsets
• mdc-theme-dependent ("color")
• typography
• animation

Miles' POC, along with a bit of fine-tuning and infrastructure work, is in #4228.

The end result of this is that existing usage of MDC Web will behave exactly the same - no existing mixin APIs change, nor does the output CSS if you continue to import @material/foo/mdc-foo. But you will also have the option of @include mdc-foo(...) and specifying a query of one or more subsets of the component's styles.

Since these changes are intended to be fully backwards-compatible, we can merge these PRs to master one by one. We should also be able to check CSS output on master vs. on the branch and verify that the results are the same (run npm run build on each one and move the folder somewhere to be diffed afterwards).

The following components have emitted styles that will need to be converted:

• mdc-button (@mmalerba + @kfranqueiro, feat: Add feature targeting support and apply to mdc-button #4228)
• mdc-checkbox (@mmalerba, feat(checkbox): add feature targeting for styles #4258)
• mdc-ripple (partially in feat: Add feature targeting support and apply to mdc-button #4228; emitted styles in feat(feature-targeting): target top-level styles for elevation, ripple, #4383)
• mdc-menu-surface (@crisbeto, feat(menu-surface): add feature targeting for styles #4279)
• mdc-menu (@crisbeto, feat(menu): add feature targeting for styles #4278)
• mdc-radio (@mmalerba, feat(radio): add feature targeting for styles #4270)
• mdc-switch (@crisbeto, feat(switch): add feature targeting for styles #4275)
• mdc-card (@mmalerba, feat(card): add feature targeting for styles #4301)
• mdc-typography (mixins done by @mmalerba in feat(typography): add feature targeting for styles #4305; all emitted styles covered via mixins)
• mdc-elevation (mixins done by @mmalerba in feat(elevation): add feature targeting for styles #4308; emitted styles in feat(feature-targeting): target top-level styles for elevation, ripple, #4383)
• mdc-theme (mdc-theme-prop not accepting $query on purpose; emitted styles in feat(feature-targeting): target top-level styles for elevation, ripple, #4383)
• mdc-shape (mixins only; @mmalerba, feat(shape): add feature targeting to public mixins #4384)
• mdc-form-field (@mmalerba, feat(form-field): add feature targeting for styles #4521)
• mdc-dialog (@kfranqueiro, feat(dialog): Add feature targeting for styles #4524)
• mdc-fab (@kfranqueiro, feat(fab): Add feature targeting for styles #4526)
• mdc-grid-list (@kfranqueiro, feat(grid-list): Add feature targeting for styles #4534)
• mdc-image-list (@kfranqueiro, feat(image-list): Add feature targeting for styles #4535)
• mdc-icon-button (@kfranqueiro, feat(icon-button): Add feature targeting for styles #4536)
• mdc-chips (@mmalerba, feat(chips): Add feature targeting for styles #4693)
• mdc-drawer (@crisbeto, feat(drawer): add feature targeting for styles #4877)
• mdc-layout-grid
• mdc-linear-progress (@crisbeto, feat(linear-progress): add feature targeting for styles #4898)
• mdc-list
• mdc-slider (@crisbeto, feat(slider): add feature targeting for styles #4871)
• mdc-snackbar (@crisbeto, feat(snackbar): add feature targeting for styles #4876)
• mdc-tab-indicator (@crisbeto, feat: add feature targeting for styles to tab-related packages #4838)
• mdc-tab (@crisbeto, feat: add feature targeting for styles to tab-related packages #4838)
• mdc-tab-scroller (@crisbeto, feat: add feature targeting for styles to tab-related packages #4838)
• mdc-tab-bar (@crisbeto, feat: add feature targeting for styles to tab-related packages #4838)
• mdc-top-app-bar

As with #4225, it may be best to leave textfield-related things until last:

• mdc-floating-label
• mdc-notched-outline
• mdc-line-ripple
• mdc-select
• mdc-textfield

Bear in mind that some of these may have cross-dependencies, which will require at least partial conversions of other packages as well, so I've attempted to front-load any likely dependencies as possible (I think ripple is really the main one, and that's already been largely tackled as far as it needs to be for other components to use it). The first PR converts button fully, and ripple partially (mostly).

We should skip the following since they're deprecated (and likely to be removed as part of #4225):

• mdc-icon-toggle
• mdc-tabs
• mdc-toolbar

[nemethmik]

I have spent a week or so on evaluating the possibility to apply MDC Web directly or MDC React in my mobile-first application. My impression is that because of this excessive use of SCSS the entire MDC Web is an implementation of MD mainly for static websites. It is not really OK for highly dynamic mobile applications, because the nature of SCSS. For example, to define the colors, themes or the number of columns for an image list in MDC Web, you can do that only fiddling with SCSS. This is really unacceptable for mobile app development. I think framework should hide the intricacies of SCSS/CSS. So, my question is that are you planning to replace SCSS with a more flexible, runtime, dynamic styling technology? Is this the reason you have ejected thee MDC Web components?

[jasonkylefrank]

To expand on what @nemethmik brought up, I'm curious if your team has considered using a CSS-in-JS approach for styles (e.g., JSS)? If not for MDC-Web, what about for MDC-Web-React (e.g., Styled Components)?

I'm starting to get the feeling that SASS may not be the strongest overall styling approach these days (and could address some of the points that @nemethmik brought up), but I'd like to hear your thoughts.