MetaMask / MetaMask/metamask-extension
Migrate legacy Sass imports to the module system
- 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
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