Migrate to use the Sass module system

As discussed offline with @abhiomkar and @aprigogin, we’d like to migrate the stylesheets in this repo to use the Sass module system.

I’m working on preparing a script that uses the Sass migrator to handle most of this migration, but I have a question about how to handle member prefixes.

Right now, most variables, mixins, and functions are manually namespaced with mdc-<component>-. Since the module system adds automatic namespacing, it makes sense to remove these manual prefixes (which the migrator can handle automatically).

However, there are two cases where this pattern doesn’t quite hold:

• The colors in mdc-theme/_color-palette.scss are instead prefixed with material-color-. For these variables, should we just leave their names as-is?
• Some components have a mixin just named mdc-<component> (so removing the prefix would leave an empty name). How should these be handled? Examples (there might be more though):
  • mdc-elevation
  • mdc-layout-grid
  • mdc-rtl
  • mdc-typography

Note that however we choose to handle namespacing during this migration, we’ll add import-only files that forward the members with their original, manually-namespaced names. When downstream users migrate, the migrator will be able to detect this and automatically change these names when necessary.

[jathak]

Update: I now have a shell script that automatically migrates most components (still working on chips, drawer, textfield, and select, which have subdirectories that make it harder to structure the migration).

This script works using a combination of Sass migrator (currently on a branch, but will be released once sass/migrator#131 is merged) and some sed scripts (primarily for ripple, due to the two prefixes). For users still using @import, it will preserve both prefixes and indirect dependencies, and those users should be able to use the migrator themselves to fix both of these when they switch to @use.

[abhiomkar]

Yes, we can rename that mixin.