Compile CSS from Sass using Webpack

.gitignore

@@ -42,3 +42,7 @@ python/nav/web/static/css
 python/nav/web/static/js/node_modules
 python/nav/web/static/js/require_config.dev.js
 python/nav/web/static/js/coverage
+
+# Javascript libraries
+/node_modules
+package-lock.json

Makefile

@@ -1,4 +1,4 @@
-.PHONY: dummy clean distclean testclean docclean doc .FORCE
+.PHONY: dummy clean distclean testclean docclean doc cssclean sassbuild sasswatch .FORCE
 
 dummy:
 	@echo "'make' is no longer used for deployment. See 'doc/intro/install.rst'"
@@ -32,4 +32,17 @@ doc/reference/alerttypes.rst: .FORCE
 	echo "UID=$(shell id -u)" >> .env
 	echo "GID=$(shell id -g)" >> .env
 
+cssclean:
+	-rm -rf python/nav/web/static/css
+
+sassbuild: cssclean
+	@if [ -f package-lock.json ]; then \
+		(npm ci && npm run build:sass); \
+	else \
+		(npm install && npm run build:sass); \
+	fi
+
+sasswatch:
+	-npm run watch:sass
+
 .FORCE:

changelog.d/2849.changed.md

@@ -0,0 +1 @@
+Switched to building CSS from Sass using webpack instead of deprecated `libsass`.

doc/hacking/hacking.rst

@@ -156,6 +156,7 @@ Directory                          Description
                                    processes.
 :file:`python/`                    Python source code.
 :file:`python/nav/etc/`            Example/initial configuration files.
+:file:`python/nav/web/sass/`       SCSS stylesheets.
 :file:`python/nav/web/static/`     Static media such as CSS stylesheets, images and JavaScript to be
                                    served by a webserver.
 :file:`python/nav/web/templates/`  Main/global Django HTML templates. More be located in individual
@@ -283,6 +284,24 @@ developing, something browsers love to do! See `config-urlArgs
 documentation for details. :file:`require_config.dev.js` is listed in the
 repository :file:`.gitignore` file.
 
+CSS
+---
+
+NAV uses Sass for styling. If you want to modify the styling,
+you can do so by editing the SCSS files in the :file:`python/nav/web/static/scss`
+directory. To build the CSS assets, you will need to have Node.js
+and npm installed. Once you have these installed, you can run
+the following command to build the CSS files::
+
+  npm install
+  npm run build:sass
+
+This will build the CSS assets and place them in the :file:`python/nav/web/static/css`
+directory. If you want to watch for changes in the SCSS files and rebuild the
+CSS assets automatically, you can run the following command instead::
+
+  npm run watch:sass
+
 
 
 Database

doc/hacking/using-docker.rst

@@ -187,9 +187,10 @@ nav
   starts.
 
 sass-watcher
-  This is a process that monitors the :file:`python/nav/web/sass/` subdirectory
-  for changes, and re-runs ``python setup.py build_sass`` (i.e. rebuilding all
-  the SASS-based stylesheets) on changes.
+  This is a process that runs ``npm run watch:sass`` command to monitor and
+  rebuild all the SASS-based stylesheets whenever changes occur
+  in the :file:`python/nav/web/sass/` subdirectory. The command continuously
+  monitors the files and does not exit by itself.
 
 The individual logs of these program are typically found inside the ``nav``
 container in the :file:`/var/log/supervisor/` directory. The NAV process logs

doc/howto/generic-install-from-source.rst

@@ -5,6 +5,8 @@
 This is a generic guide to installing NAV from source code on a \*NIX flavored
 operating system. The specifics of how to install NAV's dependencies, such as
 :xref:`PostgreSQL` or :xref:`Graphite` will be entirely up to you and your choice of OS.
+Note that building NAV from source will also require Node.js and npm to be installed
+in order to manage frontend assets.
 
 
 Dependencies
@@ -21,6 +23,11 @@ To build NAV, you need at least the following:
  * Python >= 3.9.0
  * Sphinx >= 1.0 (for building this documentation)
 
+Additionally to build frontend assets (like CSS and JS), you will need:
+
+ * Node.js >= 14.0
+ * npm >= 6.0
+
 Runtime requirements
 --------------------
 
@@ -73,6 +80,16 @@ default.
 Installing NAV
 ==============
 
+First you need to build the static assets. To do this, you will need to have
+Node.js and npm installed. Once you have these installed, you can run
+the following command to build the CSS assets::
+
+  npm install
+  npm run build:sass
+
+This will build the CSS assets and place them in the :file:`python/nav/web/static/css`
+directory.
+
 To build and install NAV and all its Python dependencies::
 
   pip install -r requirements.txt -c constraints.txt .

doc/intro/install.rst

@@ -7,7 +7,8 @@
 There are two main options for installing NAV: Either from source code, or from
 a pre-packaged version. Some of these options will require manually installing
 and/or configuring 3rd party software that NAV depends on, mainly :xref:`PostgreSQL`
-and :xref:`Graphite`.
+and :xref:`Graphite`. Building NAV from source code will also require Node.js
+and npm to be installed.
 
 
 Installing a pre-packaged version of NAV
@@ -96,4 +97,3 @@ For you, we provide two guides:
    </howto/generic-install-from-source>`.
 2. :doc:`A step-by-step, detailed guide on installing NAV from source on a
    Debian GNU/Linux operating system </howto/manual-install-on-debian>`.
-

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "NAV frontend",
+  "description": "Network Administration Visualized frontend",
+  "version": "5",
+  "private": true,
+  "dependencies": {
+    "css-loader": "^6.10.0",
+    "glob": "^10.3.10",
+    "mini-css-extract-plugin": "^2.8.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
+  },
+  "scripts": {
+    "watch:sass": "webpack --config webpack.config.js --config-name sass --mode development --watch",
+    "build:sass": "webpack --config webpack.config.js --config-name sass --mode production"
+  }
+}

pyproject.toml

@@ -1,5 +1,5 @@
 [build-system]
-requires = ["setuptools>=61.0", "wheel", "setuptools_scm[toml]>=6.2", "libsass==0.15.1"]
+requires = ["setuptools>=61.0", "wheel", "setuptools_scm[toml]>=6.2"]
 build-backend = "setuptools.build_meta"
 
 [project]
@@ -63,6 +63,9 @@ include-package-data = true
 zip-safe = false
 platforms = ["any"]
 
+[tool.setuptools.package-data]
+"nav.web" = ["static/**"]
+
 [tool.setuptools_scm]
 
 [tool.setuptools.packages.find]

python/nav/web/sass/_fonts.scss

@@ -1,18 +1,20 @@
+@import 'navsettings';
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/static/fonts/OS300.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('#{$assets-url}/fonts/OS300.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OS400.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('#{$assets-url}/fonts/OS400.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/static/fonts/OS600.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('#{$assets-url}/fonts/OS600.woff') format('woff');
 }

python/nav/web/sass/_navsettings.scss

@@ -23,8 +23,11 @@ $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (m
 
 
 // Relative image path
-$image-path: '../../images' !global;
-$image-path-partials: '../images' !global;
+// Providing variables for all assets paths in this folder so that there will be no hard coding
+$assets-url: '../static' !global;
+$image-path: '#{$assets-url}/images' !global;
+$image-path-partials: '#{$assets-url}/images' !global;
+$fa-font-path: '#{$assets-url}/fonts';
 
 // Width of a row. To create a limited viewport use em-calc
 // Default from Foundation is $row-width: em-calc(1000) !global;

python/nav/web/sass/nav/_fonts.scss

@@ -1,18 +1,20 @@
+@import 'settings';
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/static/fonts/OS300.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('#{$assets-url}/fonts/OS300.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OS400.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('#{$assets-url}/fonts/OS400.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/static/fonts/OS600.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('#{$assets-url}/fonts/OS600.woff') format('woff');
 }

python/nav/web/sass/nav/_select2.scss

@@ -2,6 +2,7 @@
 Version: 3.4.5 Timestamp: Mon Nov  4 08:22:42 PST 2013
 */
 @import '../navsettings';
+@import 'settings';
 
 .select2-container {
     margin: 0 0 1rem 0;

python/nav/web/sass/nav/_sensors.scss

@@ -1,5 +1,3 @@
-@import 'navsettings';
-
 /*
  * Styles for everything in the environment tab
  */

python/nav/web/sass/nav/_settings.scss

@@ -0,0 +1,5 @@
+// Assets path variables
+// Giving same name to  variables as in ../navsettings, and making them default in this folder
+$assets-url: '../../static' !default;
+$image-path: '#{$assets-url}/images' !default;
+$image-path-partials: '#{$assets-url}/images' !default;

python/nav/web/sass/nav/geomap.scss

@@ -1,3 +1,5 @@
+@import "settings";
+
 #map {
     height: 75vh;
 }
@@ -61,51 +63,51 @@
 }
 
 #time-navigation-prev-jump.enabled:before {
-    content: url('../../images/geomap/left2.png');
+    content: url('#{$assets-url}/images/geomap/left2.png');
 }
 
 #time-navigation-prev-jump.disabled:before {
-    content: url('../../images/geomap/left2_grey.png');
+    content: url('#{$assets-url}/images/geomap/left2_grey.png');
 }
 
 #time-navigation-prev.enabled:before {
-    content: url('../../images/geomap/left1.png');
+    content: url('#{$assets-url}/images/geomap/left1.png');
 }
 
 #time-navigation-prev.disabled:before {
-    content: url('../../images/geomap/left1_grey.png');
+    content: url('#{$assets-url}/images/geomap/left1_grey.png');
 }
 
 #time-navigation-next.enabled:before {
-    content: url('../../images/geomap/right1.png');
+    content: url('#{$assets-url}/images/geomap/right1.png');
 }
 
 #time-navigation-next.disabled:before {
-    content: url('../../images/geomap/right1_grey.png');
+    content: url('#{$assets-url}/images/geomap/right1_grey.png');
 }
 
 #time-navigation-next-jump.enabled:before {
-    content: url('../../images/geomap/right2.png');
+    content: url('#{$assets-url}/images/geomap/right2.png');
 }
 
 #time-navigation-next-jump.disabled:before {
-    content: url('../../images/geomap/right2_grey.png');
+    content: url('#{$assets-url}/images/geomap/right2_grey.png');
 }
 
 #time-navigation-last.enabled:before {
-    content: url('../../images/geomap/right_last.png');
+    content: url('#{$assets-url}/images/geomap/right_last.png');
 }
 
 #time-navigation-last.disabled:before {
-    content: url('../../images/geomap/right_last_grey.png');
+    content: url('#{$assets-url}/images/geomap/right_last_grey.png');
 }
 
 #time-navigation-up.enabled:before {
-    content: url('../../images/geomap/up1.png');
+    content: url('#{$assets-url}/images/geomap/up1.png');
 }
 
 #time-navigation-up.disabled:before {
-    content: url('../../images/geomap/up1_grey.png');
+    content: url('#{$assets-url}/images/geomap/up1_grey.png');
 }
 
 #time-navigation-down.disabled {

python/nav/web/sass/nav/info_room.scss

@@ -1,4 +1,3 @@
-@import 'sensors';
 
 #netboxes .dataTables_wrapper {
     display: inline-block;
@@ -104,4 +103,4 @@ img.textbottom {
         padding-top: 0.5rem;
         padding-bottom: 0.5rem;
     }
-}
+}

python/nav/web/sass/nav/ipdevinfo.scss

@@ -22,7 +22,7 @@
  *
  */
 
- @import 'foundation/functions';
+ @import '../foundation/functions';
 
 /* Device details table */