chore: update `sass` to v1.71.0 #22531

davidmurdoch · 2024-01-12T22:39:53Z

Updates Sass

Updates sass to the latest version, while also switching to sass-embedded (maintained by the same team, is faster than sass, and we don't need to patch it anymore!).

Moves fonts

This PR also moves the fonts directory to be relative to the CSS file that imports it. This helps with two things:

its just nice to use real relative paths to files that are using them while developing (not just in the final build)
the webpack build will work differently: it requires all the imports to use relative paths (there is a hack I can put in place to not require relative paths, but meh. I don't want to do that :-) ).

Use `@use` for the design-system instead of `@import`

The biggest change in this PR is moving towards the use of @use and away from @import, which is slated to be completely removed from Sass in some distance future release.

Bonus savings!

This PR also fixes a the duplication of CSS, as the design-system previously included actual CSS (colors, fonts, and font-awesome styles) and reduces the output size from ~1700KB to ~1300KB. The issue with that some devs were already @useing the design-system, which was re-including its all of its rules (mentioned above).

⚠️ Changes How We Write SCSS

So, from now on, if someone wants to use something from the design-system they'll need to put @use design-system"; at the top of the SCSS file.

github-actions · 2024-01-12T22:40:04Z

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.

codecov · 2024-01-13T00:05:59Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (d3f0a32) 68.46% compared to head (b3e98b2) 68.46%.
Report is 27 commits behind head on develop.

❗ Current head b3e98b2 differs from pull request most recent head 3792d32. Consider uploading reports for the commit 3792d32 to get more accurate results

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #22531   +/-   ##
========================================
  Coverage    68.46%   68.46%           
========================================
  Files         1089     1089           
  Lines        43045    43045           
  Branches     11469    11469           
========================================
  Hits         29469    29469           
  Misses       13576    13576

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-01-13T00:16:45Z

Builds ready [504a580]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4
- common: 0, 1, 2, 3, 4, 5, 6, 7
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (536 ± 283 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	240	115	60	29
		domContentLoaded	9	183	51	63	30
		load	48	1578	536	590	283
		domInteractive	9	183	51	63	30

Bundle size diffs

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

socket-security · 2024-01-13T01:54:25Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@bufbuild/protobuf@1.7.2	environment	`0`	1.45 MB	tstamm-buf
npm/buffer-builder@0.2.0	None	`0`	20.6 kB	peterreid
npm/sass-embedded-android-arm@1.71.1	None	`0`	8.03 MB	sassbot
npm/sass-embedded-android-arm64@1.71.1	None	`0`	9.69 MB	sassbot
npm/sass-embedded-android-ia32@1.71.1	None	`0`	44.4 MB	sassbot
npm/sass-embedded-android-x64@1.71.1	None	`0`	9.98 MB	sassbot
npm/sass-embedded-darwin-arm64@1.71.1	None	`0`	8.72 MB	sassbot
npm/sass-embedded-darwin-x64@1.71.1	None	`0`	9.1 MB	sassbot
npm/sass-embedded-linux-arm@1.71.1	None	`0`	8.12 MB	sassbot
npm/sass-embedded-linux-arm64@1.71.1	None	`0`	9.83 MB	sassbot
npm/sass-embedded-linux-ia32@1.71.1	None	`0`	44.6 MB	sassbot
npm/sass-embedded-linux-musl-arm@1.71.1	None	`0`	42.1 MB	sassbot
npm/sass-embedded-linux-musl-arm64@1.71.1	None	`0`	10.1 MB	sassbot
npm/sass-embedded-linux-musl-ia32@1.71.1	None	`0`	45.1 MB	sassbot
npm/sass-embedded-linux-musl-x64@1.71.1	None	`0`	10.3 MB	sassbot
npm/sass-embedded-linux-x64@1.71.1	None	`0`	9.99 MB	sassbot
npm/sass-embedded-win32-ia32@1.71.1	None	`0`	42.7 MB	sassbot
npm/sass-embedded-win32-x64@1.71.1	None	`0`	9.11 MB	sassbot
npm/sass-embedded@1.71.1	filesystem, shell, unsafe Transitive: environment	`+23`	329 MB	sassbot
npm/sass@1.69.7	filesystem Transitive: environment	`+14`	6.49 MB	sassbot

🚮 Removed packages: npm/@types/sass@1.45.0, npm/sass@1.71.1

View full report↗︎

socket-security · 2024-01-13T01:54:28Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: npm/sass-embedded@1.71.1

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

metamaskbot · 2024-02-15T22:05:44Z

Builds ready [7fed5b1]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4
- common: 0, 1, 2, 3, 4, 5, 6, 7
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (429 ± 196 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	85	201	150	36	17
		domContentLoaded	10	100	39	28	13
		load	52	1127	429	409	196
		domInteractive	10	100	39	28	13

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.33 KiB (0.07%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

development/build/styles.js

package.json

metamaskbot · 2024-02-16T21:26:10Z

Builds ready [e70ef4b]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4
- common: 0, 1, 2, 3, 4, 5, 6, 7
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (441 ± 204 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	188	160	28	13
		domContentLoaded	9	92	45	28	13
		load	52	1089	441	424	204
		domInteractive	9	92	45	28	13

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.33 KiB (0.07%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

ui/pages/swaps/prepare-swap-page/index.scss

ui/pages/swaps/view-quote/index.scss

ui/pages/swaps/smart-transaction-status/index.scss

…tension into prepare-sass-update

metamaskbot · 2024-02-22T18:30:22Z

Builds ready [2d9797e]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1036 ± 406 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	84	236	143	44	21
		domContentLoaded	17	77	41	21	10
		load	56	1958	1036	845	406
		domInteractive	17	77	41	21	10

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 2.33 KiB (0.06%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

davidmurdoch · 2024-02-22T20:07:45Z

@SocketSecurity ignore npm/sass-embedded@1.71.1

davidmurdoch added DO-NOT-MERGE Pull requests that should not be merged team-extension-client labels Jan 12, 2024

davidmurdoch force-pushed the prepare-sass-update branch from f7f6bcb to 504a580 Compare January 12, 2024 23:48

gauthierpetetin added team-extension-platform Extension Platform team and removed team-extension-client labels Feb 9, 2024

davidmurdoch force-pushed the prepare-sass-update branch 4 times, most recently from 0d6fb1a to 4c0757e Compare February 15, 2024 17:13

davidmurdoch removed the DO-NOT-MERGE Pull requests that should not be merged label Feb 15, 2024

davidmurdoch force-pushed the prepare-sass-update branch 3 times, most recently from 5231e2a to b3492e9 Compare February 16, 2024 20:41

davidmurdoch commented Feb 16, 2024

View reviewed changes

development/build/styles.js Outdated Show resolved Hide resolved

davidmurdoch commented Feb 16, 2024

View reviewed changes

development/build/styles.js Outdated Show resolved Hide resolved

davidmurdoch commented Feb 16, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

update sass

280886a

davidmurdoch force-pushed the prepare-sass-update branch from b3492e9 to 280886a Compare February 16, 2024 20:56

davidmurdoch changed the title ~~chore: prepare sass update~~ chore: update sass to v1.71.0 Feb 16, 2024

fix the storybook build, align includePaths

e70ef4b

georgewrmarshall requested review from garrettbear and georgewrmarshall February 16, 2024 21:05

davidmurdoch marked this pull request as ready for review February 16, 2024 22:02

davidmurdoch added 3 commits February 21, 2024 12:54

add design-system.screen-sm-max

36b729d

remove unused @use

f22f5c4

be consistent in these import paths

d72c312

davidmurdoch commented Feb 21, 2024

View reviewed changes

ui/pages/swaps/prepare-swap-page/index.scss Outdated Show resolved Hide resolved

Update ui/pages/swaps/prepare-swap-page/index.scss

793c899

davidmurdoch commented Feb 21, 2024

View reviewed changes

ui/pages/swaps/view-quote/index.scss Outdated Show resolved Hide resolved

Update ui/pages/swaps/view-quote/index.scss

3792d32

davidmurdoch commented Feb 21, 2024

View reviewed changes

ui/pages/swaps/smart-transaction-status/index.scss Outdated Show resolved Hide resolved

davidmurdoch commented Feb 21, 2024

View reviewed changes

ui/pages/swaps/smart-transaction-status/index.scss Outdated Show resolved Hide resolved

Apply suggestions from code review

82fb5ca

davidmurdoch requested a review from georgewrmarshall February 21, 2024 18:14

davidmurdoch added 6 commits February 21, 2024 13:41

run ci again

316440d

Merge branch 'develop' into prepare-sass-update

abf0417

Merge branch 'develop' into prepare-sass-update

b46b3ac

Merge branch 'prepare-sass-update' of github.com:MetaMask/metamask-ex…

aeb07bc

…tension into prepare-sass-update

Merge branch 'develop' into prepare-sass-update

3bfe116

rerun ci

2d9797e

brad-decker approved these changes Feb 22, 2024

View reviewed changes

georgewrmarshall approved these changes Feb 22, 2024

View reviewed changes

garrettbear approved these changes Feb 22, 2024

View reviewed changes

legobeat requested a review from naugtur February 23, 2024 04:34

davidmurdoch removed the DO-NOT-MERGE Pull requests that should not be merged label Feb 23, 2024

benjisclowder approved these changes Feb 23, 2024

View reviewed changes

Mrtenz approved these changes Feb 23, 2024

View reviewed changes

davidmurdoch merged commit 5fd2b7f into develop Feb 23, 2024

davidmurdoch deleted the prepare-sass-update branch February 23, 2024 16:23

github-actions bot locked and limited conversation to collaborators Feb 23, 2024

metamaskbot added the release-11.13.0 Issue or pull request that will be included in release 11.13.0 label Feb 23, 2024

chore: update sass to v1.71.0 #22531

chore: update sass to v1.71.0 #22531

Uh oh!

Conversation

davidmurdoch commented Jan 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Updates Sass

Moves fonts

Use @use for the design-system instead of @import

Bonus savings!

⚠️ Changes How We Write SCSS

Uh oh!

github-actions bot commented Jan 12, 2024

Uh oh!

codecov bot commented Jan 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

metamaskbot commented Jan 13, 2024

Uh oh!

socket-security bot commented Jan 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security bot commented Jan 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Next steps

Uh oh!

metamaskbot commented Feb 15, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented Feb 16, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented Feb 22, 2024

Uh oh!

davidmurdoch commented Feb 22, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

chore: update `sass` to v1.71.0 #22531

chore: update `sass` to v1.71.0 #22531

davidmurdoch commented Jan 12, 2024 •

edited

Loading

Use `@use` for the design-system instead of `@import`

codecov bot commented Jan 13, 2024 •

edited

Loading

socket-security bot commented Jan 13, 2024 •

edited

Loading

socket-security bot commented Jan 13, 2024 •

edited

Loading