upgrade from node-sass to dart sass

.gitignore

@@ -2,6 +2,7 @@
 
 # css
 *.css
+*.css.map
 !styleguide.setup.css
 
 # dependencies

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",

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 <img src={svgUrl}>
     svg(),
     // allows importing SVGs via syntax: import { ReactComponent as MySvgComponent } from '/svgfile.svg' , which provides a ready-to-use <svg> ReactComponent

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');

yarn.lock

@@ -3930,7 +3930,7 @@ [email protected], 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"