-
Notifications
You must be signed in to change notification settings - Fork 14
Description
If overriding variables are in the current file, sass-migrator correctly moves the to @use...with...
but if the variable comes from an imported file, sass-migrator does not fix it.
Example: 3 files:
// _overrideme.scss
$white: #fff !default;
// _variables.scss
$white: #bbb;
// App.scss (top-level Sass file)
@import 'variables';
@import 'overrideme';
@debug "white: #{$white}"; // is #bbb (value in *_variables.scss* overrides default in *_overrideme.scss*)
Run: sass-migrator module --verbose --migrate-deps App.scss
output:
Migrating App.scss
Converted App.scss
// App.scss (top-level Sass file)
@use 'variables';
@use 'overrideme';
@debug "white: #{overrideme.$white}"; // should be #bbb <<<===but is #fff instead
Expected conversion (one possibility):
// App.scss (top-level Sass file)
@use 'variables';
@use 'overrideme' with ($white: variables.$white);
@debug "white: #{overrideme.$white}"; // should be #bbb
another possibility might be to move or copy @use 'overrideme'
to _variables.scss and even make it @forward 'overrideme' with ($white: #bbb)
A simpler option might be to detect the problem and print out a warning that manual intervention is needed.
Or just print out a warning unconditionally...
Use-case: big projects that use @import
to break up a single large scss file may have all app-level variables defined in a single subfile. In this case the "_overrideme.scss" file is actually an external toolkit such as CoreUI. The migration tool currently creates syntactically correct output, but the css formatting fails because of the missing overrides.