mdc-web-migration.fish

# 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
end

# 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 \
    $pkgs/$component/_{constants,functions,keyframes,mixins,variables}.scss
  fix-packages $pkgs/$component/_*.scss
end

# 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
end

# Migrate all files for a component
function migrate
  migrate-partials $argv && migrate-aio $argv
end

# 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
end

# 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
end

# 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
end

# 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
end

# 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
  end
  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
end

# 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