search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.11k stars 2.15k forks source link

Allow finer-grained control of emitted CSS #4227

Open kfranqueiro opened 5 years ago

kfranqueiro commented 5 years ago

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:

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:

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

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):

nemethmik commented 5 years ago

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 commented 5 years ago

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.