metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard

Published 20 hours ago • verified publisher icon MetaMask

chore: update `sass` to v1.71.0

Open davidmurdoch opened this issue 1 year ago • 7 comments

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:

  1. its just nice to use real relative paths to files that are using them while developing (not just in the final build)
  2. 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 by 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.

davidmurdoch avatar Jan 12 '24 22:01 davidmurdoch

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.

github-actions[bot] avatar Jan 12 '24 22:01 github-actions[bot]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

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

:exclamation: 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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar Jan 13 '24 00:01 codecov[bot]

Builds ready [504a580]
Page Load Metrics (536 ± 283 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint662401156029
domContentLoaded9183516330
load481578536590283
domInteractive9183516330
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Jan 13 '24 00:01 metamaskbot

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

Package New capabilities Transitives Size Publisher
npm/@bufbuild/[email protected] environment 0 1.45 MB tstamm-buf
npm/[email protected] None 0 20.6 kB peterreid
npm/[email protected] None 0 8.03 MB sassbot
npm/[email protected] None 0 9.69 MB sassbot
npm/[email protected] None 0 44.4 MB sassbot
npm/[email protected] None 0 9.98 MB sassbot
npm/[email protected] None 0 8.72 MB sassbot
npm/[email protected] None 0 9.1 MB sassbot
npm/[email protected] None 0 8.12 MB sassbot
npm/[email protected] None 0 9.83 MB sassbot
npm/[email protected] None 0 44.6 MB sassbot
npm/[email protected] None 0 42.1 MB sassbot
npm/[email protected] None 0 10.1 MB sassbot
npm/[email protected] None 0 45.1 MB sassbot
npm/[email protected] None 0 10.3 MB sassbot
npm/[email protected] None 0 9.99 MB sassbot
npm/[email protected] None 0 42.7 MB sassbot
npm/[email protected] None 0 9.11 MB sassbot
npm/[email protected] filesystem, shell, unsafe Transitive: environment +23 329 MB sassbot
npm/[email protected] filesystem Transitive: environment +14 6.49 MB sassbot

🚮 Removed packages: npm/@types/[email protected], npm/[email protected]

View full report↗︎

socket-security[bot] avatar Jan 13 '24 01:01 socket-security[bot]

👍 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/[email protected]

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/[email protected] or ignore all packages with @SocketSecurity ignore-all

socket-security[bot] avatar Jan 13 '24 01:01 socket-security[bot]

Builds ready [7fed5b1]
Page Load Metrics (429 ± 196 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint852011503617
domContentLoaded10100392813
load521127429409196
domInteractive10100392813
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 2.33 KiB (0.07%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 15 '24 22:02 metamaskbot

Builds ready [e70ef4b]
Page Load Metrics (441 ± 204 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint971881602813
domContentLoaded992452813
load521089441424204
domInteractive992452813
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 2.33 KiB (0.07%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 16 '24 21:02 metamaskbot

Builds ready [b3e98b2]
Page Load Metrics (708 ± 370 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint681651082914
domContentLoaded106330199
load541844708770370
domInteractive106330199
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 2.33 KiB (0.07%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 21 '24 01:02 metamaskbot

Builds ready [2d9797e]
Page Load Metrics (1036 ± 406 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint842361434421
domContentLoaded1777412110
load5619581036845406
domInteractive1777412110
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 2.33 KiB (0.06%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 22 '24 18:02 metamaskbot

@SocketSecurity ignore npm/[email protected]

davidmurdoch avatar Feb 22 '24 20:02 davidmurdoch