Skip to content

Instantly share code, notes, and snippets.

@jathak jathak/ Secret
Last active Jan 18, 2020

What would you like to do?
# Copyright 2019 Google LLC.
# SPDX-License-Identifier: Apache-2.0
# Change relative URLs to @material URLs for other components
function fix-packages
sed -ri 's=@forward "(\.\./)+([a-z].*/)=@forward "@material/\2=' $argv
sed -ri 's=@use "(\.\./)+([a-z].*/)=@use "@material/\2=' $argv
# Migrate the partial files for a component
function migrate-partials -a component prefix
echo "Migrating mdc-$component..."
set -q argv[2] || set prefix mdc-$component-
sass-migrator module -d -I load-path -p $prefix --forward=import-only \
fix-packages $pkgs/$component/_*.scss
# Migrate the non-partial files for a component
function migrate-aio -a component prefix
set -q argv[2] || set prefix mdc-$component-
sass-migrator module -d -I load-path -p $prefix --forward=import-only $pkgs/$component/{mdc-*,common}.scss
fix-packages $pkgs/$component/{mdc-,commo}*.scss
# Migrate all files for a component
function migrate
migrate-partials $argv && migrate-aio $argv
# Manually patch components where a mixin is named with the exact prefix.
function fix-prefix-mixin -a component
sed -i "s/@mixin mdc-$component/@mixin $component/" $pkgs/$component/_mixins.scss
sed -i "s/@include mdc-$component/@include $component/g" $pkgs/$component/_mixins.scss
sed -i "s/@forward \"mixins\" hide.*/@forward \"mixins\" as mdc-\* show mdc-$component;/" $pkgs/$component/_mixins.import.scss
sed -i "s/hide mdc-$component-mdc-$component;/hide mdc-$component-$component;/" $pkgs/$component/_mixins.import.scss
# Like `migrate`, but for a component with a mixin name matching the prefix
function migrate-all-prefixed-mixin -a component
migrate-partials $component && fix-prefix-mixin $component && migrate-aio $component
# Migrate a partial in mdc-ripple that has both prefixes (mdc-ripple- and mdc-states-)
function migrate-ripple-partial -a file
sass-migrator module -d -I load-path -p mdc-ripple- --forward=import-only $file.scss
sed -i "s/mdc-states/states/g" $file.scss
sed -i "s/mdc-ripple-mdc-states/mdc-ripple-states/g" $file.import.scss
tac $file.import.scss | sed '2s/ hide / as mdc-\\* hide mdc-/g' | \
sed '2s/, /, mdc-/g' | sed '2s/mdc-\\$/\\$mdc-/g' | tac > $file.import.scss
# Migrate the mdc-ripple component
function migrate-ripple
echo "Migrating mdc-ripple..."
set dir $pkgs/ripple
migrate-ripple-partial $dir/_variables
sass-migrator module -d -I load-path -p mdc-ripple- --forward=import-only $dir/_keyframes.scss
sass-migrator module -d -I load-path -p mdc- --forward=import-only $dir/_functions.scss
migrate-ripple-partial $dir/_mixins
sass-migrator module -d -I load-path --forward=import-only $dir/{common,mdc-ripple}.scss
fix-packages $dir/*.scss
# Migrate a component with subdirectories
function migrate-nested -a component prefix extra
set -q argv[2] || set prefix mdc-$component-
set dir $pkgs/$component
if test -d $dir/icon
sass-migrator module -d -I load-path --forward=import-only -p $prefix $dir/*/_*.scss
migrate-partials $component $prefix
set args module -d -I load-path --forward=import-only -p $prefix
sass-migrator $args $dir/*/mdc-*.scss $extra
sass-migrator $args $dir/mdc-*.scss
fix-packages $dir/**.scss
# Create symlinks to simulate node_modules with our local changes
mkdir -p load-path/@material && ln -s $PWD/packages/mdc-* load-path/@material
cd load-path/@material && rename 's/^mdc-//' * && cd ../..
set pkgs load-path/@material
# Extra deps
sed -i '25i@import "@material/rtl/mixins";' $pkgs/shape/_mixins.scss
sed -i '22i@import "@material/theme/mixins";\n' $pkgs/select/helper-text/_mixins.scss
sed -i '22i@import "@material/rtl/mixins";' $pkgs/select/icon/_mixins.scss
sed -i '30i@import "@material/ripple/mixins";' $pkgs/select/_mixins.scss
sed -i '23i@import "@material/theme/mixins";' $pkgs/textfield/{helper-text,character-counter}/_mixins.scss
sed -i '28i@import "@material/ripple/mixins";' $pkgs/textfield/_mixins.scss
migrate-partials animation; migrate-partials base; migrate-partials density
migrate-partials feature-targeting mdc-feature-; migrate-all-prefixed-mixin layout-grid
migrate-partials rtl; fix-prefix-mixin rtl
sass-migrator module -p material-color- $pkgs/theme/_color-palette.scss
migrate theme; migrate-partials shape; migrate-all-prefixed-mixin typography;
migrate-all-prefixed-mixin touch-target; migrate-all-prefixed-mixin elevation;
migrate floating-label; migrate grid-list; migrate image-list
migrate line-ripple; migrate linear-progress; migrate-ripple; migrate slider
migrate tab-indicator; migrate button; migrate card; migrate checkbox; migrate dialog
migrate fab; migrate form-field; migrate icon-button; migrate list; migrate menu-surface
migrate notched-outline; migrate radio; migrate switch; migrate tab; migrate data-table
migrate menu; migrate snackbar; migrate tab-scroller; migrate top-app-bar; migrate tab-bar
migrate-nested drawer mdc-drawer- $pkgs/drawer/common.scss
migrate-nested chips mdc-chip-
# mdc-select
sed -i '24d' $pkgs/select/icon/_variables.scss # remove unnecessary duplicate variable declaration
migrate-nested select
# mdc-textfield
sed -i 's/\$mdc-textarea-/\$mdc-text-field-textarea-/g' $pkgs/textfield/_*.scss
sed -ri 's/(@mixin|@include) mdc-required-text-field-label-asterisk_/\1 mdc-text-field-required-label-asterisk_/g' $pkgs/textfield/*.scss
migrate-nested textfield mdc-text-field-
# Check that it still compiles
echo 'Testing Sass compilation...'
dart-sass -I load-path packages/material-components-web/material-components-web.scss
rm -r load-path
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.