Skip to content

bug: sass-migrator not converting overridden default variables to with clauses. #279

@arikorn

Description

@arikorn

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions