diff --git a/.storybook/main.js b/.storybook/main.js index 2411f2066..bc4b01678 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -7,7 +7,7 @@ module.exports = { addons: [ '@storybook/addon-knobs', '@storybook/addon-actions', - '@storybook/addon-backgrounds' + '@storybook/addon-backgrounds', ], webpackFinal: async (config) => { config.module.strictExportPresence = true @@ -27,18 +27,26 @@ module.exports = { loader: 'sass-loader', options: { sourceMap: true, + implementation: require('sass'), }, }, ], }) - config.plugins.push(new CopyWebpackPlugin({ - patterns: [ - { - from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'), - to: path.join('fonts', 'fontawesome'), - }, - ], - })) + config.plugins.push( + new CopyWebpackPlugin({ + patterns: [ + { + from: path.join( + 'node_modules', + '@fortawesome', + 'fontawesome-free', + 'webfonts', + ), + to: path.join('fonts', 'fontawesome'), + }, + ], + }), + ) return config }, } diff --git a/development/build/styles.js b/development/build/styles.js index 966b2c818..c8b9e6718 100644 --- a/development/build/styles.js +++ b/development/build/styles.js @@ -1,7 +1,7 @@ const pify = require('pify') const gulp = require('gulp') const sass = require('gulp-sass') -sass.compiler = require('node-sass') +sass.compiler = require('sass') const autoprefixer = require('gulp-autoprefixer') const gulpStylelint = require('gulp-stylelint') const watch = require('gulp-watch') diff --git a/package.json b/package.json index ba59f09d3..39d6ea073 100644 --- a/package.json +++ b/package.json @@ -246,7 +246,7 @@ "gulp-rename": "^2.0.0", "gulp-replace": "^1.0.0", "gulp-rtlcss": "^1.4.0", - "gulp-sass": "^4.0.0", + "gulp-sass": "^4.1.0", "gulp-sourcemaps": "^2.6.0", "gulp-stylelint": "^13.0.0", "gulp-terser-js": "^5.2.2", @@ -259,7 +259,6 @@ "mocha": "^7.2.0", "nock": "^9.0.14", "node-fetch": "^2.6.1", - "node-sass": "^4.14.1", "nyc": "^15.0.0", "polyfill-crypto.getrandomvalues": "^1.0.0", "prettier": "^2.1.1", @@ -275,7 +274,8 @@ "remote-redux-devtools": "^0.5.16", "remotedev-server": "^0.3.1", "resolve-url-loader": "^3.1.2", - "sass-loader": "^7.0.1", + "sass": "^1.32.4", + "sass-loader": "^10.1.1", "selenium-webdriver": "4.0.0-alpha.7", "serve-handler": "^6.1.2", "ses": "0.11.0", diff --git a/ui/app/css/design-system/index.scss b/ui/app/css/design-system/index.scss index 2d85fcae3..d4f8980b9 100644 --- a/ui/app/css/design-system/index.scss +++ b/ui/app/css/design-system/index.scss @@ -1,5 +1,5 @@ -@import 'breakpoints'; -@import 'colors'; -@import 'deprecated-colors'; -@import 'typography'; -@import 'z-index'; +@forward 'breakpoints'; +@forward 'colors'; +@forward 'deprecated-colors'; +@forward 'typography'; +@forward 'z-index'; diff --git a/yarn.lock b/yarn.lock index 126c52d11..714252227 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6708,6 +6708,21 @@ chokidar@3.3.0: optionalDependencies: fsevents "~2.1.1" +"chokidar@>=2.0.0 <4.0.0": + version "3.5.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" + integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.3.1" + chokidar@^2.0.0, chokidar@^2.1.1, chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -11633,6 +11648,11 @@ fsevents@~2.1.1, fsevents@~2.1.2: resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e" integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== +fsevents@~2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.1.tgz#b209ab14c61012636c8863507edf7fb68cc54e9f" + integrity sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw== + fsm-event@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fsm-event/-/fsm-event-2.1.0.tgz#d385716ed38f9c92feab2ba601e2aac6c0ba5a92" @@ -12586,13 +12606,13 @@ gulp-rtlcss@^1.4.0: through2 "^2.0.5" vinyl-sourcemaps-apply "^0.2.1" -gulp-sass@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-4.0.1.tgz#7f43d117eb2d303524968a1b48494af1bc64d1d9" - integrity sha512-OMQEgWNggpog8Tc5v1MuI6eo+5iiPkVeLL76iBhDoEEScLUPfZlpvzmgTnLkpcqdrNodZxpz5qcv6mS2rulk3g== +gulp-sass@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-4.1.0.tgz#486d7443c32d42bf31a6b1573ebbdaa361de7427" + integrity sha512-xIiwp9nkBLcJDpmYHbEHdoWZv+j+WtYaKD6Zil/67F3nrAaZtWYN5mDwerdo7EvcdBenSAj7Xb2hx2DqURLGdA== dependencies: chalk "^2.3.0" - lodash.clonedeep "^4.3.2" + lodash "^4.17.11" node-sass "^4.8.3" plugin-error "^1.0.1" replace-ext "^1.0.0" @@ -15644,6 +15664,11 @@ klaw@^1.0.0: optionalDependencies: graceful-fs "^4.1.9" +klona@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0" + integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA== + knex@^0.15.2: version "0.15.2" resolved "https://registry.yarnpkg.com/knex/-/knex-0.15.2.tgz#6059b87489605f4cc87599a6d2a9d265709e9340" @@ -16545,7 +16570,7 @@ loader-runner@^2.4.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== -loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3: +loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA== @@ -16646,7 +16671,7 @@ lodash.assign@^4.2.0: resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7" integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc= -lodash.clonedeep@4.5.0, lodash.clonedeep@^4.3.2: +lodash.clonedeep@4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= @@ -16746,11 +16771,6 @@ lodash.sortby@^4.7.0: resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= -lodash.tail@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664" - integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ= - lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" @@ -18025,6 +18045,11 @@ neo-async@^2.5.0, neo-async@^2.6.1: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== +neo-async@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" + integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== + nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61" @@ -18255,7 +18280,7 @@ node-releases@^1.1.52, node-releases@^1.1.66: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12" integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg== -node-sass@^4.14.1, node-sass@^4.8.3: +node-sass@^4.8.3: version "4.14.1" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5" integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g== @@ -22428,16 +22453,23 @@ sass-graph@2.2.5: scss-tokenizer "^0.2.3" yargs "^13.3.2" -sass-loader@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.0.1.tgz#fd937259ccba3a9cfe0d5f8a98746d48adfcc261" - integrity sha512-MeVVJFejJELlAbA7jrRchi88PGP6U9yIfqyiG+bBC4a9s2PX+ulJB9h8bbEohtPBfZmlLhNZ0opQM9hovRXvlw== +sass-loader@^10.1.1: + version "10.1.1" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.1.tgz#4ddd5a3d7638e7949065dd6e9c7c04037f7e663d" + integrity sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw== dependencies: - clone-deep "^2.0.1" - loader-utils "^1.0.1" - lodash.tail "^4.1.1" - neo-async "^2.5.0" - pify "^3.0.0" + klona "^2.0.4" + loader-utils "^2.0.0" + neo-async "^2.6.2" + schema-utils "^3.0.0" + semver "^7.3.2" + +sass@^1.32.4: + version "1.32.4" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.4.tgz#308bf29dd7f53d44ae4f06580e9a910ad9aa411e" + integrity sha512-N0BT0PI/t3+gD8jKa83zJJUb7ssfQnRRfqN+GIErokW6U4guBpfYl8qYB+OFLEho+QvnV5ZH1R9qhUC/Z2Ch9w== + dependencies: + chokidar ">=2.0.0 <4.0.0" sax@^1.2.1, sax@^1.2.4, sax@~1.2.4: version "1.2.4"