Merge pull request #6862 from TerriaJS/sass-upgrade

Replace `node-sass` with (dart) `sass`

CHANGES.md

@@ -1,7 +1,9 @@
 # Change Log
 
-#### next release (8.3.10)
+#### next release (8.4.0)
 
+- **Breaking change:** Replaced `node-sass` with (dart) `sass`
+  - You will need to update your `TerriaMap` to use `sass` instead of `node-sass`.
 - Added `apiColumns` to `ApiTableCatalogItem` - this can now be used to specify `responseDataPath` per table column.
 - `ArcGisMapServerCatalogItem` will now use "pre-cached tiles" if available if no (or all) `layers` are specified.
 - [The next improvement]

doc/contributing/problems-and-solutions.md

@@ -79,24 +79,3 @@ Then run the following to install NodeJS v16 and use it:
 nvm install 16
 nvm use 16
 ```
-
----
-
-### Problem
-
-Python errors when building NodeJS dependencies (eg `node-sass`). This is common on M1/M2 macs.
-
-### Solution
-
-You may need to install Python2 to build NodeJS dependencies (like `node-sass`)
-
-We recommend using [`pyenv`](https://github.com/pyenv/pyenv#installation) to install Python2.
-
-Follow installation instructions [here](https://github.com/pyenv/pyenv#installation).
-
-Then run the following to install Python 2.7.18 and use it:
-
-```bash
-pyenv install 2.7.18
-pyenv shell 2.7.18
-```

lib/ReactViews/Analytics/invoke-function.scss

@@ -31,7 +31,9 @@
   }
 }
 
-@include empty-module("description") .btn {
+@include empty-module("description");
+
+.btn {
   composes: btn from "../../Sass/common/_buttons.scss";
   composes: btn-primary from "../../Sass/common/_buttons.scss";
 }

lib/ReactViews/DataCatalog/data-catalog-group.scss

@@ -112,7 +112,7 @@
 .catalog-group {
   composes: list-reset from "../../Sass/common/_base.scss";
   padding-left: $padding;
-  padding-top: $padding / 2;
+  padding-top: calc($padding / 2);
   &--lower-level {
     margin-left: 20px;
     border-left: 1px solid $grey-lighter;

lib/ReactViews/Mobile/mobile-header.scss

@@ -47,7 +47,7 @@
   svg {
     position: absolute;
     top: $padding;
-    left: $padding/2;
+    left: calc($padding / 2);
     fill: #ffffff;
   }
 }

lib/ReactViews/StandardUserInterface/standard-user-interface.scss

@@ -80,8 +80,12 @@
   // On small screens (mobile), it make be up to 90% of the screen.
   // In between, it may be up to 90% of the largest mobile screen ($sm), minus a bit to leave room
   // for the map controls on the right.  This is computed in $feature-info-medium-max-size.
-  $feature-info-medium-max-size: $sm * 0.9 - $feature-info-right-margin * 0.5;
-  $feature-info-forty-percent-size: $feature-info-medium-max-size * 100 / 40;
+  $feature-info-medium-max-size: calc(
+    $sm * 0.9 - $feature-info-right-margin * 0.5
+  );
+  $feature-info-forty-percent-size: calc(
+    $feature-info-medium-max-size * 100 / 40
+  );
 
   z-index: $front-component-z-index - 20;
   position: absolute;

lib/Sass/common/_variables.scss

@@ -182,7 +182,7 @@ $splitter-thumb-width: 40px;
 // Generated legends
 $legend-item-width: 30px;
 $legend-item-height: 16px;
-$legend-padding: $legend-item-height / 2;
-$legend-spacer-height: $legend-padding / 2;
+$legend-padding: calc($legend-item-height / 2);
+$legend-spacer-height: calc($legend-padding / 2);
 
 $tool-primary-color: $color-primary;

package.json

@@ -217,13 +217,13 @@
     "klaw-sync": "^4.0.0",
     "minimist": "^1.2.8",
     "node-notifier": "^5.1.2",
-    "node-sass": "^6.0.1",
     "plugin-error": "^1.0.1",
     "prettier": "2.7.1",
     "pretty-quick": "^1.10.0",
     "react-shallow-testutils": "^3.0.0",
     "react-test-renderer": "^16.3.2",
     "regenerator-runtime": "^0.13.2",
+    "sass": "^1.66.1",
     "terriajs-server": "^4.0.0",
     "yaml": "^1.10.0"
   },