MetaMask / MetaMask/metamask-extension

Migrate legacy Sass imports to the module system

Open
#44,725 0 comments 0 reactions 0 assignees View on GitHub
for-migration
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### What is this about?

The upgrade from `sass-embedded` 1.71.0 to 1.100.0 exposed the existing Sass module-system migration backlog. Compiling `ui/css/index.scss` currently encounters hundreds of `@import` deprecation warnings from application stylesheets.

A short-term build configuration suppresses only the `import` deprecation while retaining other Sass warnings. This issue tracks removing that suppression by migrating owned stylesheets to `@use` and `@forward`.

### Scenario

Not applicable; this is a build-system migration.

### Design

Not applicable; no intended UI changes.

### Technical Details

- Use the Sass module migrator as a starting point for MetaMask-owned stylesheets.
- Preserve generated CSS ordering and behavior while replacing `@import` with `@use` and `@forward`.
- Keep dependency warnings isolated with `quietDeps` rather than modifying third-party stylesheets.
- Remove the temporary `silenceDeprecations: ['import']` configuration when the migration is complete.

### Threat Modeling Framework

- **What are we working on?** The build-time Sass module graph; there is no runtime feature or data-flow change intended.
- **What can go wrong?** Module conversion can alter CSS emission order, namespace resolution, or duplicate-style behavior.
- **What are we going to do about it?** Compare generated CSS and run relevant visual and regression testing as the migration proceeds.
- **Did we do a good job?** Sass compilation should be warning-free without suppression and UI behavior should remain unchanged.

### Acceptance Criteria

- Migrate MetaMask-owned Sass `@import` rules to `@use`/`@forward`.
- Preserve generated CSS ordering and behavior.
- Keep third-party stylesheets isolated from the owned-source migration.
- Remove the temporary `silenceDeprecations: ['import']` webpack configuration.
- Confirm Sass compilation completes without owned-source `import` deprecation warnings.
- Run relevant visual and regression testing for affected extension surfaces.

### References

- https://sass-lang.com/documentation/breaking-changes/import/
- https://sass-lang.com/documentation/cli/migrator/

Contributor guide

Open the contributing guide

Research direction

Start with ui/css/index.scss and use the Sass module migrator on MetaMask-owned stylesheets, leaving third-party sources isolated with quietDeps. Trace the webpack configuration containing silenceDeprecations: ['import'], then compare generated CSS ordering and run the relevant visual and regression tests. Done means owned-source warnings are gone, suppression is removed, and UI behavior is unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
sass, webpack
Domain
build-system, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.