From e8772b2ac75b51479830c63b3798c34978d4d1d6 Mon Sep 17 00:00:00 2001 From: Nick Grosenbacher Date: Mon, 30 Nov 2020 10:57:10 -0500 Subject: [PATCH] upgrade from node-sass to dart sass --- .gitignore | 1 + package.json | 7 ++++--- rollup.config.js | 6 +++++- .../synapse_form_wrapper/_synapse-form-wrapper.scss | 7 +++---- yarn.lock | 11 +++++++++-- 5 files changed, 22 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 35307d62a9..105fc6875d 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ # css *.css +*.css.map !styleguide.setup.css # dependencies diff --git a/package.json b/package.json index d69b66662a..162ba2c243 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "markdown-it-synapse-math": "^3.0.4", "markdown-it-synapse-table": "^1.0.6", "moment": "^2.24.0", - "node-sass": "^4.14.1", + "node-sass": "npm:sass", "plotly.js-basic-dist": "^1.54.7", "raf": "^3.4.1", "react": "16.13.1", @@ -84,6 +84,7 @@ "regenerator-runtime": "^0.13.2", "rss-parser": "^3.7.2", "sanitize-html": "^1.18.4", + "sass": "^1.29.0", "shortid": "^2.2.14", "spark-md5": "^3.0.0", "sql-parser": "^0.5.0", @@ -148,8 +149,8 @@ "predeploy": "yarn run build-gh && cp styleguide/index.html styleguide/404.html && cp favicon.png styleguide/favicon.png", "build-gh": "yarn run build:docs", "deploy": "gh-pages -d styleguide && gh-pages -d styleguide -o upstream", - "build-css": "node-sass src/lib/style -o src/lib/style", - "watch-css": "yarn run build-css && node-sass src/ -o src/ --watch --recursive", + "build-css": "sass src/lib/style/main.scss src/lib/style/main.css -I .", + "watch-css": "yarn run build-css && sass src/ --watch -I .", "start-js": "react-scripts start", "start": "yarn run build-css && npx styleguidist server", "start-deprecated-demo": "npm-run-all -p watch-css start-js", diff --git a/rollup.config.js b/rollup.config.js index 93cefb2be2..9b8ee9cab5 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -9,6 +9,7 @@ import commonjs from '@rollup/plugin-commonjs' import { terser } from 'rollup-plugin-terser' import nodePolyfills from 'rollup-plugin-node-polyfills' import svgr from '@svgr/rollup' +import sass from 'sass' const extensions = ['.js', '.jsx', '.ts', '.tsx'] @@ -75,7 +76,10 @@ export default { image(), // until css modules package is updated we can't opt into css modules // see issue here - https://github.com/egoist/rollup-plugin-postcss/issues/174 - scss({ output: './src/umd/synapse-react-client.production.styles.css' }), + scss({ + output: './src/umd/synapse-react-client.production.styles.css', + sass: sass + }), // allows importing SVGs via syntax: import svgUrl from '/svgfile.svg' , which provides the svg as URL to plug into an svg(), // allows importing SVGs via syntax: import { ReactComponent as MySvgComponent } from '/svgfile.svg' , which provides a ready-to-use ReactComponent diff --git a/src/lib/style/components/synapse_form_wrapper/_synapse-form-wrapper.scss b/src/lib/style/components/synapse_form_wrapper/_synapse-form-wrapper.scss index c592ebcd15..08202fc858 100644 --- a/src/lib/style/components/synapse_form_wrapper/_synapse-form-wrapper.scss +++ b/src/lib/style/components/synapse_form_wrapper/_synapse-form-wrapper.scss @@ -90,7 +90,7 @@ background-color: $gray-light; } .file-table { - @include calc(margin-bottom, #{$space-unit} * #{3}); + @include calc(margin-bottom, '#{$space-unit} * #{3}'); button.btn { @include themify($themes) { color: themed('action-color'); @@ -228,9 +228,8 @@ font-style: italic; vertical-align: middle; - @include calc(line-height, #{$space-unit} * 2); - @include calc(height, #{$space-unit} * 2); - + @include calc(line-height, '#{$space-unit} * 2'); + @include calc(height, '#{$space-unit} * 2'); button.btn-link { @include themify($themes) { color: themed('action-color'); diff --git a/yarn.lock b/yarn.lock index b07f275ac0..12a4f5a55c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3930,7 +3930,7 @@ chokidar@2.1.8, chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.3.0, chokidar@^3.4.0, chokidar@^3.4.1: +"chokidar@>=2.0.0 <4.0.0", chokidar@^3.3.0, chokidar@^3.4.0, chokidar@^3.4.1: version "3.4.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== @@ -10152,7 +10152,7 @@ node-releases@^1.1.52, node-releases@^1.1.61, node-releases@^1.1.66: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.66.tgz#609bd0dc069381015cd982300bae51ab4f1b1814" integrity sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg== -node-sass@4, node-sass@^4.14.1: +node-sass@4: version "4.14.1" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5" integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g== @@ -10175,6 +10175,13 @@ node-sass@4, node-sass@^4.14.1: stdout-stream "^1.4.0" "true-case-path" "^1.0.2" +"node-sass@npm:sass", sass@^1.29.0: + version "1.29.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.29.0.tgz#ec4e1842c146d8ea9258c28c141b8c2b7c6ab7f1" + integrity sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA== + dependencies: + chokidar ">=2.0.0 <4.0.0" + node@^10.3.0: version "10.23.0" resolved "https://registry.yarnpkg.com/node/-/node-10.23.0.tgz#848049b565361d5b2f8ad1ba0117d12d0575c047"