New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: removing more unused css #30217

Merged

georgewrmarshall merged 1 commit into main from fix/remove-unused-css-2

Feb 11, 2025

+1 −98

Contributor

georgewrmarshall commented Feb 7, 2025 •

edited

Loading

Description

This PR removes unused and deprecated CSS from the extension codebase, including:

Removal of deprecated .error class styling
Removal of unused form input styling
Removal of deprecated utility classes from itcss/tools/index
Cleanup of old unused color variables (--mainnet)

These changes help reduce technical debt and simplify our CSS architecture by removing legacy code that is no longer in use.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4172

Manual testing steps

Pull down branch and build the extension
Test the following scenarios to ensure no visual regressions:
- Import account flows (previously used .error class)
- Form inputs across the application
- Network indicator colors (mainnet specifically)
Verify no console errors related to missing CSS classes

Screenshots/Recordings

Screenshots of unused classnames in code comments

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards
I've completed the PR template to the best of my ability
I've verified no visual regressions across the application
I've applied the appropriate labels (e.g. "type: cleanup")

Pre-merge reviewer checklist

I've manually tested the PR to verify no visual regressions
I confirm that this PR successfully removes unused CSS without impacting existing functionality
I've verified the changes align with our move away from the ITCSS architecture


          chore: removing more unused css

4e990a5

georgewrmarshall added the team-design-system label

georgewrmarshall self-assigned this

Contributor

github-actions bot commented Feb 7, 2025

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

georgewrmarshall commented

View reviewed changes

.storybook/test-data.js

@@ @@ -1859,7 +1859,7 @@ export const networkList = [ @@
                 {
                   blockExplorerUrl: 'https://etherscan.io',
                   chainId: '0x1',
-                  iconColor: 'var(--mainnet)',
+                  iconColor: 'var(--color-primary-default)',

Contributor Author

georgewrmarshall Feb 7, 2025

Updating storybook test data not used in prod

georgewrmarshall commented

View reviewed changes

ui/css/base-styles.scss

Comment on lines -46 to -57

-              /*
-                This error class is used in the following files still:
-                /ui/pages/create-account/import-account/json.js
-                /ui/pages/create-account/import-account/private-key.js
-              */
-              .error {
-                color: var(--color-error-default);
-                margin-top: 3px;
-                margin-bottom: 9px;
-                overflow-wrap: anywhere;
-              }

Contributor Author

georgewrmarshall Feb 7, 2025 •

edited

Loading

error className is not used. I checked both json.js and private-key.js. Additionally, using the regex

className=["'{`][^"'`}]*error[^"'`}]*["'}`]

to search for instances of error in a className prop returned no exact matches.

georgewrmarshall commented

View reviewed changes

ui/css/design-system/_colors.scss

@@ @@ -32,7 +32,6 @@ $color-map: ( @@
                 'info-default': --color-info-default,
                 'info-muted': --color-info-muted,
                 'info-inverse': --color-info-inverse,
-                'mainnet': --mainnet,

Contributor Author

georgewrmarshall Feb 7, 2025

No longer used

georgewrmarshall commented

View reviewed changes

ui/css/index.scss

@@ @@ -25,7 +25,6 @@ @@
                 overtime.
                */
               @import './itcss/settings/index';
-              @import './itcss/tools/index';

Contributor Author

georgewrmarshall Feb 7, 2025

Removing deleted file import

georgewrmarshall commented

View reviewed changes

ui/css/itcss/tools/index.scss

		@@ -1 +0,0 @@
		@import './utilities';

Contributor Author

georgewrmarshall Feb 7, 2025

Removing deleted file import

georgewrmarshall commented

View reviewed changes

ui/css/itcss/tools/utilities.scss

Comment on lines -6 to -9

-              .flex-column {
-                display: flex;
-                flex-direction: column;
-              }

Contributor Author

georgewrmarshall Feb 7, 2025

flex-column class is not used

georgewrmarshall commented

View reviewed changes

ui/css/itcss/tools/utilities.scss

Comment on lines -11 to -14

-              .flex-row {
-                display: flex;
-                flex-direction: row;
-              }

Contributor Author

georgewrmarshall Feb 7, 2025

flex-row classname is not used

georgewrmarshall commented

View reviewed changes

ui/css/itcss/tools/utilities.scss

Comment on lines -16 to -18

-              .pointer {
-                cursor: pointer;
-              }

Contributor Author

georgewrmarshall Feb 7, 2025

pointer is not used as a classname

georgewrmarshall commented

View reviewed changes

ui/css/itcss/tools/utilities.scss

Comment on lines -20 to -32

-              .cursor-pointer {
-                cursor: pointer;
-                transform-origin: center center;
-                transition: transform 50ms ease-in-out;
-              }
-              .cursor-pointer:hover {
-                transform: scale(1.05);
-              }
-              .cursor-pointer:active {
-                transform: scale(0.97);
-              }

Contributor Author

georgewrmarshall Feb 7, 2025

cursor-pointer classname is not used

georgewrmarshall commented

View reviewed changes

ui/css/itcss/tools/utilities.scss

Comment on lines -34 to -37

-              .drop-menu-item {
-                display: flex;
-                align-items: center;
-              }

Contributor Author

georgewrmarshall Feb 7, 2025

drop-menu-item classname is not used

georgewrmarshall commented

View reviewed changes

ui/css/utilities/colors.scss

Comment on lines -7 to -9

-                // Accents
-                // Everything below this line is part of the new color system
-                --mainnet: #29b6af;

Contributor Author

georgewrmarshall Feb 7, 2025

removing unused --mainnet CSS variable

georgewrmarshall commented

View reviewed changes

ui/helpers/constants/design-system.ts

@@ @@ -36,7 +36,6 @@ export enum Color { @@
                 infoDefault = 'info-default',
                 infoMuted = 'info-muted',
                 infoInverse = 'info-inverse',
-                mainnet = 'mainnet',

Contributor Author

georgewrmarshall Feb 7, 2025

Removing from Color enum as it is not used

georgewrmarshall marked this pull request as ready for review

February 7, 2025 23:03

georgewrmarshall requested a review from a team as a code owner

February 7, 2025 23:03

georgewrmarshall requested a review from brianacnguyen

February 7, 2025 23:03

brianacnguyen approved these changes

View reviewed changes

Collaborator

metamaskbot commented Feb 7, 2025

Builds ready [4e990a5]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1648 ± 51 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1471	1940	1651	107	51
		domContentLoaded	1457	1911	1624	110	53
		load	1472	1937	1648	106	51
		domInteractive	25	110	47	27	13
		backgroundConnect	10	59	25	16	8
		firstReactRender	16	98	41	27	13
		getState	5	50	13	15	7
		initialActions	0	1	0	0	0
		loadScripts	1035	1371	1180	90	43
		setupStore	7	61	14	14	7
		uiStartup	1737	2169	1915	120	58

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: -20 Bytes (-0.00%)

vinnyhoward approved these changes

View reviewed changes

georgewrmarshall added this pull request to the merge queue

Merged via the queue into main with commit d1e00a8

83 checks passed

georgewrmarshall deleted the fix/remove-unused-css-2 branch

February 11, 2025 17:58

github-actions bot locked and limited conversation to collaborators

metamaskbot added the release-12.13.0 label

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-12.13.0 team-design-system