Merge pull request #5673 from HSLdevcom/sass-deps-v3

update sass deps to v3

Author: vesameskanen

app/component/navigation.scss

@@ -1,16 +1,18 @@
+@use 'sass:math';
+
 @function navbar-icon-color($color) {
   @if $nav-content-color {
     // if defined in theme, return nav-content-color
     @return $nav-content-color;
   }
 
   $background-color-brightness: (red($color) * 299) + (green($color) * 587) +
-    (blue($color) * 114) / 1000;
+    math.div(blue($color) * 114, 1000);
   $light-color-lightness: round(
-    (red(#fff) * 299) + (green(#fff) * 587) + (blue(#fff) * 114) / 1000
+    (red(#fff) * 299) + (green(#fff) * 587) + math.div(blue(#fff) * 114, 1000)
   );
 
-  @if abs($background-color-brightness) < ($light-color-lightness / 3) {
+  @if abs($background-color-brightness) < math.div($light-color-lightness, 3) {
     @return #ffffff;
   } @else {
     @return #333333;

app/component/routepage/route.scss

@@ -707,6 +707,8 @@ $margin-left-right: 21.3px;
 
   .route-schedule-header {
     padding: 9.6px 0 2px 0;
+    margin-left: 0;
+    margin-right: 0;
 
     @media print {
       margin-left: 0;
@@ -812,8 +814,8 @@ $margin-left-right: 21.3px;
 
 .route-schedule-dropdowns {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
+  flex-direction: row;
 
   @media print {
     display: none;

config/rollup.config.js

@@ -119,7 +119,19 @@ export default async () => {
           extract: false,
           plugins: [autoprefixer()],
           modules: true,
-          use: ['sass'],
+          use: [
+            [
+              'sass',
+              {
+                quietDeps: true,
+                silenceDeprecations: [
+                  'import',
+                  'global-builtin',
+                  'color-functions',
+                ],
+              },
+            ],
+          ],
           config: false,
         }),
         json(),

package.json

@@ -150,7 +150,7 @@
     "connect-redis": "5.0.0",
     "cookie-parser": "1.4.7",
     "debug": "4.3.4",
-    "downshift": "^9.0.10",
+    "downshift": "9.0.10",
     "express": "4.21.2",
     "express-http-proxy": "1.6.3",
     "express-session": "1.18.1",
@@ -161,7 +161,7 @@
     "fluxible-addons-react": "0.2.17",
     "found": "0.5.9",
     "found-relay": "1.0.2",
-    "foundation-apps": "1.2.0",
+    "foundation-sites": "6.9.0",
     "helmet": "4.1.0",
     "hoist-non-react-statics": "2.5.5",
     "i18next": "22.5.1",
@@ -202,8 +202,7 @@
     "suncalc": "1.8.0",
     "supercluster": "^7.1.5",
     "universal-cookie": "7.2.2",
-    "uuid": "8.3.2",
-    "zurb-foundation-5": "5.4.7"
+    "uuid": "8.3.2"
   },
   "peerDependencies": {
     "@octokit/core": ">=3",
@@ -277,7 +276,7 @@
     "mocha": "11.2.2",
     "mock-local-storage": "1.1.24",
     "mockdate": "3.0.5",
-    "node-sass": "^9.0.0",
+    "node-gyp": "12.1.0",
     "nodemon": "1.18.10",
     "optimize-css-assets-webpack-plugin": "5.0.8",
     "playwright": "1.16.2",
@@ -292,6 +291,7 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "7.0.2",
+    "sass": "^1.97.2",
     "sass-loader": "^10.5.2",
     "selenium-webdriver": "4.0.0-alpha.1",
     "sinon": "19.0.5",
@@ -309,6 +309,7 @@
   },
   "resolutions": {
     "html-webpack-plugin": "4.5.2",
-    "sharp": "0.33"
+    "sharp": "0.33",
+    "cheerio": "1.0.0-rc.10"
   }
 }

sass/_foundation-setup.scss

@@ -0,0 +1,22 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+$global-flexbox: false; // Use float grid like Foundation 5
+$xy-grid: false; // Disable XY grid
+
+@import 'foundation';
+@include foundation-global-styles;
+@include foundation-grid;
+@include foundation-typography;
+@include foundation-forms;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+
+$small-up: 'only screen' !global;
+$medium-up: 'only screen and (min-width: #{-zf-bp-to-em(map-get($breakpoints, "medium"))})' !global;
+$large-up: 'only screen and (min-width: #{-zf-bp-to-em(map-get($breakpoints, "large"))})' !global;
+$xlarge-up: 'only screen and (min-width: #{-zf-bp-to-em(map-get($breakpoints, "xlarge"))})' !global;
+$xxlarge-up: 'only screen and (min-width: #{-zf-bp-to-em(map-get($breakpoints, "xxlarge"))})' !global;
+
+// For -only queries, we need the next breakpoint minus 1/16em (0.0625em)
+$small-only: 'only screen and (max-width: #{-zf-bp-to-em(map-get($breakpoints, "medium")) - 0.0625em})' !global;
+$medium-only: 'only screen and (min-width: #{-zf-bp-to-em(map-get($breakpoints, "medium"))}) and (max-width: #{-zf-bp-to-em(map-get($breakpoints, "large")) - 0.0625em})' !global;
+$large-only: 'only screen and (min-width: #{-zf-bp-to-em(map-get($breakpoints, "large"))}) and (max-width: #{-zf-bp-to-em(map-get($breakpoints, "xlarge")) - 0.0625em})' !global;

sass/_main.scss

@@ -1,16 +1,19 @@
 /* Set Foundation base font to theme font
    (without this Foundation overrides body */
+$font-weight-bold: 700;
+$font-weight-normal: $font-weight-medium;
 $body-font-family: $font-family;
 $body-font-weight: $font-weight-medium;
 
-/* Base styles */
+@import 'foundation-setup';
 @import 'base/zindex';
 @import 'base/helper-mixins';
 @import 'base/base';
 @import 'base/form';
 @import 'base/helper-classes';
 @import 'base/elements';
-@import '~zurb-foundation-5/scss/foundation/components/grid';
+@import 'grid/grid';
+@import 'util/util';
 @import 'base/helper-classes-after-foundations';
 @import 'base/spacing';
 @import 'base/radius';
@@ -40,7 +43,6 @@ $body-font-weight: $font-weight-medium;
 @import '../app/component/visual/index';
 @import '../app/component/bubble-dialog';
 @import '../app/component/select-maplayers-dialog';
-@import '~zurb-foundation-5/scss/foundation/components/forms';
 @import '../app/component/zone-icon';
 @import '../app/component/date-select';
 @import '../app/component/routepage/route-schedule-dropdown';
@@ -71,10 +73,3 @@ $body-font-weight: $font-weight-medium;
 @import '../app/component/trafficnow/trafficnow';
 @import '../app/component/popover';
 @import '../app/component/animations';
-
-/* Modal */
-@import '~foundation-apps/scss/helpers/breakpoints';
-@import '~foundation-apps/scss/components/modal';
-
-// And these application specific styles use Foundation variables,
-// so they have to be loaded afterwards

sass/base/_base.scss

@@ -22,6 +22,7 @@ html {
   /* Disable touch delay on ms-devices */
   touch-action: manipulation;
   font-size: 15px !important;
+  height: 100%;
 }
 
 @media screen and (min-width: 320px) {
@@ -54,6 +55,9 @@ body {
   font-family: $font-family;
   font-weight: $font-weight-medium;
   letter-spacing: $letter-spacing;
+  height: 100%;
+  margin: 0;
+  color: $black !important;
 
   /* Remove Mobile Safari automatic font size adjustments */
   text-size-adjust: 100%;

webpack.config.babel.js

@@ -213,6 +213,23 @@ module.exports = {
           'css-loader',
           'postcss-loader',
           'sass-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                includePaths: [
+                  path.join(__dirname, 'node_modules/foundation-sites/scss'),
+                ],
+                quietDeps: true,
+                silenceDeprecations: [
+                  'import',
+                  'global-builtin',
+                  'color-functions',
+                  'if-function',
+                ],
+              },
+            },
+          },
         ],
       },
       {