Skip to content

chore: update sass to v1.71.0 #22531

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

Merged
merged 22 commits into from
Feb 23, 2024
Merged

chore: update sass to v1.71.0 #22531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
280886a
update sass
davidmurdoch Jan 12, 2024
e70ef4b
fix the storybook build, align `includePaths`
davidmurdoch Feb 16, 2024
bce8299
lint:fix can break CSS. neat!
davidmurdoch Feb 20, 2024
2acca76
I missed a file when linting
davidmurdoch Feb 20, 2024
1d7edf3
trigger CI
davidmurdoch Feb 20, 2024
609d822
Merge branch 'develop' into prepare-sass-update
davidmurdoch Feb 20, 2024
3c7f452
trigger CI again
davidmurdoch Feb 21, 2024
b3e98b2
Merge branch 'prepare-sass-update' of github.com:MetaMask/metamask-ex…
davidmurdoch Feb 21, 2024
84a3a82
Update ui/components/app/nft-default-image/index.scss
davidmurdoch Feb 21, 2024
9f6db2b
Update ui/pages/snaps/snap-view/index.scss
davidmurdoch Feb 21, 2024
36b729d
add `design-system.screen-sm-max`
davidmurdoch Feb 21, 2024
f22f5c4
remove unused @use
davidmurdoch Feb 21, 2024
d72c312
be consistent in these import paths
davidmurdoch Feb 21, 2024
793c899
Update ui/pages/swaps/prepare-swap-page/index.scss
davidmurdoch Feb 21, 2024
3792d32
Update ui/pages/swaps/view-quote/index.scss
davidmurdoch Feb 21, 2024
82fb5ca
Apply suggestions from code review
davidmurdoch Feb 21, 2024
316440d
run ci again
davidmurdoch Feb 21, 2024
abf0417
Merge branch 'develop' into prepare-sass-update
davidmurdoch Feb 21, 2024
b46b3ac
Merge branch 'develop' into prepare-sass-update
davidmurdoch Feb 22, 2024
aeb07bc
Merge branch 'prepare-sass-update' of github.com:MetaMask/metamask-ex…
davidmurdoch Feb 22, 2024
3bfe116
Merge branch 'develop' into prepare-sass-update
davidmurdoch Feb 22, 2024
2d9797e
rerun ci
davidmurdoch Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 18 additions & 12 deletions .storybook/5.BREAKPOINTS.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,51 +34,55 @@ $screen-lg-min /* 1280px */
### Mixins

```css
@use "design-system";

/* Max screen size */
@include screen-sm-max {
@include design-system.screen-sm-max {
/* equivalent css @media screen and (max-width: 575px) */
}
@include screen-md-max {
@include design-system.screen-md-max {
/* equivalent css @media screen and (max-width: 767px) */
}
@include screen-lg-max {
@include design-system.screen-lg-max {
/* equivalent css @media screen and (max-width: 1279px) */
}

/* Min screen size */
@include screen-sm-min {
@include design-system.screen-sm-min {
/* equivalent css @media screen and (min-width: 576px) */
}
@include screen-md-min {
@include design-system.screen-md-min {
/* equivalent css @media screen and (min-width: 768px) */
}
@include screen-lg-min {
@include design-system.screen-lg-min {
/* equivalent css @media screen and (min-width: 1280px) */
}
```

Migrating from the old sass variables to the new mixins looks like this

```css
@use "design-system";

/* Max width */
/* Instead of the media query and sass variable */
@media screen and (max-width: $break-small) {
@media screen and (max-width: design-system.$break-small) {
right: 16px;
}

/* Use the sass mixin */
@include screen-sm-max {
@include design-system.screen-sm-max {
right: 16px;
}

/* Min width */
/* Instead of the media query and sass variable */
@media screen and (min-width: $break-large) {
@media screen and (min-width: design-system.$break-large) {
left: 16px;
}

/* Use the sass mixin */
@include screen-sm-min {
@include design-system.screen-sm-min {
left: 16px;
}
```
Expand Down Expand Up @@ -113,12 +117,14 @@ Don't use static media queries in your code.
Do use the provided Sass mixins

```css
@use "design-system";

.account-menu {
@include screen-md-min {
@include design-system.screen-md-min {
right: calc((100vw - 80vw) / 2);
}

@include screen-lg-min {
@include design-system.screen-lg-min {
right: calc((100vw - 65vw) / 2);
}
}
Expand Down
4 changes: 2 additions & 2 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ module.exports = {
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: require('sass'),
implementation: require('sass-embedded'),
sassOptions: {
includePaths: ['ui/css/'],
includePaths: ['ui/css/', 'node_modules/',],
},
},
},
Expand Down
29 changes: 0 additions & 29 deletions .yarn/patches/sass-npm-1.35.2-6df4e15d13.patch
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions development/build/sass-compiler.js
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion development/build/static.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ function getCopyTargets(
dest: `images/contract`,
},
{
src: `./app/fonts/`,
src: `./ui/css/utilities/fonts/`,
dest: `fonts`,
},
{
Expand All @@ -139,6 +139,7 @@ function getCopyTargets(
'@fortawesome/fontawesome-free',
'webfonts/',
),
// update this location in styles.js if it changes
dest: `fonts/fontawesome`,
},
{
Expand Down
25 changes: 16 additions & 9 deletions development/build/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ const sourcemaps = require('gulp-sourcemaps');
const rtlcss = require('postcss-rtlcss');
const postcss = require('gulp-postcss');
const pump = pify(require('pump'));
const sass = require('sass-embedded');
const gulpSass = require('gulp-sass')(sass);
const { TASKS } = require('./constants');
const { createTask } = require('./task');

let sass;

// scss compilation and autoprefixing tasks
module.exports = createStyleTasks;

Expand Down Expand Up @@ -64,18 +64,25 @@ function createStyleTasks({ livereload }) {
}

async function buildScssPipeline(src, dest, devMode) {
if (!sass) {
// use our own compiler which runs sass in its own process
// in order to not pollute the intrinsics
// eslint-disable-next-line node/global-require
sass = require('gulp-sass')(require('./sass-compiler'));
}
await pump(
...[
// pre-process
gulp.src(src),
devMode && sourcemaps.init(),
sass().on('error', sass.logError),
gulpSass({
// The order of includePaths is important; prefer our own
// folders over `node_modules`
includePaths: [
// enables shortcuts to `@use design-system`, `@use utilities`, etc.
'ui/css/',
'node_modules/',
],
functions: {
// Tell sass where to find the font-awesome font files
// update this location in static.js if it changes
'-mm-fa-path()': () => new sass.SassString('./fonts/fontawesome'),
},
}).on('error', gulpSass.logError),
postcss([autoprefixer(), rtlcss()]),
devMode && sourcemaps.write(),
gulp.dest(dest),
Expand Down
2 changes: 1 addition & 1 deletion development/ts-migration-dashboard/scripts/build-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import endOfStream from 'end-of-stream';
import pump from 'pump';
import gulp from 'gulp';
import gulpSass from 'gulp-sass';
import sass from 'sass';
import * as sass from 'sass-embedded';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'gulp-autoprefixer';
import fg from 'fast-glob';
Expand Down
6 changes: 3 additions & 3 deletions lavamoat/browserify/beta/policy.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"@ensdomains/content-hash>cids>multihashes": {
"packages": {
"@ensdomains/content-hash>cids>multibase": true,
"@ensdomains/content-hash>cids>uint8arrays": true,
"@ensdomains/content-hash>multihashes>varint": true
"@ensdomains/content-hash>cids>multihashes>varint": true,
"@ensdomains/content-hash>cids>uint8arrays": true
}
},
"@ensdomains/content-hash>cids>uint8arrays": {
Expand Down Expand Up @@ -66,7 +66,7 @@
"@ensdomains/content-hash>multicodec": {
"packages": {
"@ensdomains/content-hash>multicodec>uint8arrays": true,
"@ensdomains/content-hash>multicodec>varint": true
"sass-embedded>varint": true
}
},
"@ensdomains/content-hash>multicodec>uint8arrays": {
Expand Down
6 changes: 3 additions & 3 deletions lavamoat/browserify/desktop/policy.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"@ensdomains/content-hash>cids>multihashes": {
"packages": {
"@ensdomains/content-hash>cids>multibase": true,
"@ensdomains/content-hash>cids>uint8arrays": true,
"@ensdomains/content-hash>multihashes>varint": true
"@ensdomains/content-hash>cids>multihashes>varint": true,
"@ensdomains/content-hash>cids>uint8arrays": true
}
},
"@ensdomains/content-hash>cids>uint8arrays": {
Expand Down Expand Up @@ -66,7 +66,7 @@
"@ensdomains/content-hash>multicodec": {
"packages": {
"@ensdomains/content-hash>multicodec>uint8arrays": true,
"@ensdomains/content-hash>multicodec>varint": true
"sass-embedded>varint": true
}
},
"@ensdomains/content-hash>multicodec>uint8arrays": {
Expand Down
6 changes: 3 additions & 3 deletions lavamoat/browserify/flask/policy.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"@ensdomains/content-hash>cids>multihashes": {
"packages": {
"@ensdomains/content-hash>cids>multibase": true,
"@ensdomains/content-hash>cids>uint8arrays": true,
"@ensdomains/content-hash>multihashes>varint": true
"@ensdomains/content-hash>cids>multihashes>varint": true,
"@ensdomains/content-hash>cids>uint8arrays": true
}
},
"@ensdomains/content-hash>cids>uint8arrays": {
Expand Down Expand Up @@ -66,7 +66,7 @@
"@ensdomains/content-hash>multicodec": {
"packages": {
"@ensdomains/content-hash>multicodec>uint8arrays": true,
"@ensdomains/content-hash>multicodec>varint": true
"sass-embedded>varint": true
}
},
"@ensdomains/content-hash>multicodec>uint8arrays": {
Expand Down
6 changes: 3 additions & 3 deletions lavamoat/browserify/main/policy.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"@ensdomains/content-hash>cids>multihashes": {
"packages": {
"@ensdomains/content-hash>cids>multibase": true,
"@ensdomains/content-hash>cids>uint8arrays": true,
"@ensdomains/content-hash>multihashes>varint": true
"@ensdomains/content-hash>cids>multihashes>varint": true,
"@ensdomains/content-hash>cids>uint8arrays": true
}
},
"@ensdomains/content-hash>cids>uint8arrays": {
Expand Down Expand Up @@ -66,7 +66,7 @@
"@ensdomains/content-hash>multicodec": {
"packages": {
"@ensdomains/content-hash>multicodec>uint8arrays": true,
"@ensdomains/content-hash>multicodec>varint": true
"sass-embedded>varint": true
}
},
"@ensdomains/content-hash>multicodec>uint8arrays": {
Expand Down
6 changes: 3 additions & 3 deletions lavamoat/browserify/mmi/policy.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"@ensdomains/content-hash>cids>multihashes": {
"packages": {
"@ensdomains/content-hash>cids>multibase": true,
"@ensdomains/content-hash>cids>uint8arrays": true,
"@ensdomains/content-hash>multihashes>varint": true
"@ensdomains/content-hash>cids>multihashes>varint": true,
"@ensdomains/content-hash>cids>uint8arrays": true
}
},
"@ensdomains/content-hash>cids>uint8arrays": {
Expand Down Expand Up @@ -66,7 +66,7 @@
"@ensdomains/content-hash>multicodec": {
"packages": {
"@ensdomains/content-hash>multicodec>uint8arrays": true,
"@ensdomains/content-hash>multicodec>varint": true
"sass-embedded>varint": true
}
},
"@ensdomains/content-hash>multicodec>uint8arrays": {
Expand Down
Loading