apache · ocket8888 · Oct 15, 2021 · Oct 11, 2021 · Oct 12, 2021 · Oct 12, 2021
diff --git a/.github/actions/tp-integration-tests/entrypoint.sh b/.github/actions/tp-integration-tests/entrypoint.sh
@@ -76,12 +76,9 @@ sudo useradd trafops
 ciab_dir="${GITHUB_WORKSPACE}/infrastructure/cdn-in-a-box";
 openssl rand 32 | base64 | sudo tee /aes.key
 
-sudo apt-get install -y --no-install-recommends gettext \
-	ruby ruby-dev libc-dev curl \
-	gcc
+sudo apt-get install -y --no-install-recommends gettext curl
 
-sudo gem install sass compass
-sudo npm i -g forever grunt
+sudo npm i -g forever grunt sass
 
 CHROMIUM_CONTAINER=$(docker ps -qf name=chromium)
 HUB_CONTAINER=$(docker ps -qf name=hub)
@@ -132,7 +129,7 @@ tp_build
 cd "${REPO_DIR}/traffic_portal/test/integration"
 npm ci
 
-./node_modules/.bin/webdriver-manager update --gecko false --versions.chrome "LATEST_RELEASE_$CHROMIUM_VER"
+npx webdriver-manager update --gecko false --versions.chrome "LATEST_RELEASE_$CHROMIUM_VER"
 
 jq " .capabilities.chromeOptions.args = [
     \"--headless\",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 - Updated `t3c` to request less unnecessary deliveryservice-server assignment and invalidation jobs data via new query params supported by Traffic Ops
 - [#6179](https://github.com/apache/trafficcontrol/issues/6179) Updated the Traffic Ops rpm to include the `ToDnssecRefresh` binary and make the `trafops_dnssec_refresh` cron job use it
 - [#5927](https://github.com/apache/trafficcontrol/issues/5927) Updated CDN-in-a-Box to not run a Riak container by default but instead only run it if the optional flag is provided.
+- Traffic Portal no longer uses `ruby compass` to compile sass and now uses `dart-sass`.
 
 ### Deprecated
 - Deprecated the endpoints and docs associated with `api_capability`.

diff --git a/docs/source/development/building.rst b/docs/source/development/building.rst
@@ -106,19 +106,15 @@ Install the Dependencies
 	| CentOS/Red Hat/Fedora (yum_)\ [4]_ | - git               |                            |                        | - epel-release            | - java-1.8.0-openjdk      |                          |          |                              | - python3-devel          |
 	|                                    | - rpm-build         |                            |                        | - npm                     | - maven                   |                          |          |                              | - gcc                    |
 	|                                    | - rsync             |                            |                        | - nodejs-grunt-cli        |                           |                          |          |                              | - make                   |
-	|                                    |                     |                            |                        | - ruby-devel              |                           |                          |          |                              |                          |
-	|                                    |                     |                            |                        | - gcc                     |                           |                          |          |                              |                          |
-	|                                    |                     |                            |                        | - make                    |                           |                          |          |                              |                          |
 	+------------------------------------+---------------------+----------------------------+------------------------+---------------------------+---------------------------+--------------------------+----------+------------------------------+--------------------------+
 	| Arch Linux (pacman_)               | - git               | - go                       | - go                   | - npm                     | - jdk8-openjdk            | - go                     | - go     | - go                         | - python-pip             |
-	|                                    | - rpm-tools         |                            |                        | - make                    | - maven                   |                          |          |                              | - python-sphinx          |
-	|                                    | - diff              |                            |                        | - grunt-cli               |                           |                          |          |                              | - make                   |
-	|                                    | - rsync             |                            |                        | - ruby                    |                           |                          |          |                              |                          |
-	|                                    |                     |                            |                        | - gcc                     |                           |                          |          |                              |                          |
+	|                                    | - rpm-tools         |                            |                        | - grunt-cli               | - maven                   |                          |          |                              | - python-sphinx          |
+	|                                    | - diff              |                            |                        |                           |                           |                          |          |                              | - make                   |
+	|                                    | - rsync             |                            |                        |                           |                           |                          |          |                              |                          |
 	+------------------------------------+---------------------+----------------------------+------------------------+---------------------------+---------------------------+--------------------------+----------+------------------------------+--------------------------+
-	| Windows (cygwin_)\ [5]_            | - git               |                            |                        | - ruby-devel              | - curl                    |                          |          |                              |                          |
-	|                                    | - rpm-build         |                            |                        | - make                    |                           |                          |          |                              |                          |
-	|                                    | - rsync             |                            |                        | - gcc-g++                 |                           |                          |          |                              |                          |
+	| Windows (cygwin_)\ [5]_            | - git               |                            |                        |                           | - curl                    |                          |          |                              |                          |
+	|                                    | - rpm-build         |                            |                        |                           |                           |                          |          |                              |                          |
+	|                                    | - rsync             |                            |                        |                           |                           |                          |          |                              |                          |
 	+------------------------------------+---------------------+----------------------------+------------------------+---------------------------+---------------------------+--------------------------+----------+------------------------------+--------------------------+
 	| Windows (chocolatey_)\ [5]_        |                     | - golang                   | - golang               | - nodejs                  | - openjdk8                | - golang                 | - golang | - golang                     | - python                 |
 	|                                    |                     |                            |                        |                           | - maven                   |                          |          |                              | - pip                    |
@@ -142,7 +138,7 @@ Install the Dependencies
 
 After installing the packages using your platform's package manager,
 
-	- Install the :ref:`global NPM packages <dev-tp-global-npm>` and :ref:`Compass <dev-tp-compass>` to build Traffic Portal.
+	- Install the :ref:`global NPM packages <dev-tp-global-npm>` to build Traffic Portal.
 
 	- Install the Python 3 modules used to :ref:`build the documentation <docs-build>`.
 

diff --git a/docs/source/development/traffic_portal.rst b/docs/source/development/traffic_portal.rst
@@ -29,8 +29,6 @@ Software Requirements
 =====================
 To work on Traffic Portal you need a \*nix (MacOS and Linux are most commonly used) environment that has the following installed:
 
-* `Ruby Devel 2.0.x or above <https://www.rpmfind.net/linux/rpm2html/search.php?query=ruby-devel>`_
-* `Compass 1.0.x or above <http://compass-style.org/>`_
 * `Node.js 12.0.x or above <https://nodejs.org/en/>`_
 * `Grunt CLI 1.2.0 or above <https://github.com/gruntjs/grunt-cli>`_
 * Access to a working instance of Traffic Ops
@@ -47,48 +45,6 @@ Grunt CLI can be installed using NPM.
 
 	npm -g install grunt-cli
 
-.. _dev-tp-compass:
-
-Install Compass
----------------
-
-Compass can be installed using ``gem`` manually, or by using ``bundle``
-
-.. tip:: Bundle will automatically install the correct version of the gems.
-
-#. ``brew install ruby``/``apt-get install ruby``/``yum install ruby``
-
-#. ``gem update --system``
-
-#. At this point, you can either manually install the gems or use bundler
-
-	#. For manually: ``gem install sass compass``
-
-	#. For automatically: ``gem install bundle && bundle install``
-
-	.. note:: Bundle requires ruby versions > 2.3.0, so if you're using a version of ruby < 2.3.0 then this will not work.
-
-#. Make sure that ``compass`` and ``sass`` are part of your ``PATH`` environment variable.
-
-#. If not, you can see where gem installs ``compass`` and ``sass`` by running:
-	``gem environment``
-
-#. In there, you can see where ruby is installing all the gems. Add that path to your ``PATH`` environment variable.
-	For example, it is ``/usr/local/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin/`` for this test setup.
-
-#. Once you have installed ``compass`` successfully, make sure you can reach it by typing:
-	``compass version``
-	This should give a valid output. For example, for the test setup, the output is:
-
-.. code-block:: text
-	:caption: Compass version output
-
-	Compass 1.0.3 (Polaris)
-	Copyright (c) 2008-2020 Chris Eppstein
-	Released under the MIT License.
-	Compass is charityware.
-	Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
-
 
 Traffic Portal Project Tree Overview
 =====================================
@@ -99,7 +55,6 @@ Installing The Traffic Portal Developer Environment
 #. Clone the `Traffic Control Repository <https://github.com/apache/trafficcontrol>`_
 #. Navigate to the ``traffic_portal`` subdirectory of your cloned repository.
 #. Run ``npm install`` to install application dependencies into ``traffic_portal/node_modules``. Only needs to be done the first time unless ``traffic_portal/package.json`` changes.
-#. Make sure that compass is installed and functioning correctly by running ``compass version``. If compass is not available, then it can be installed following the instructions under :ref:`dev-tp-compass`.
 
 #. Modify :atc-file:`traffic_portal/conf/configDev.js`:
 

diff --git a/infrastructure/docker/build/Dockerfile-traffic_portal b/infrastructure/docker/build/Dockerfile-traffic_portal
@@ -43,21 +43,11 @@ RUN if [[ ${RHEL_VERSION%%.*} -ge 8 ]]; then \
 ### traffic_portal specific
 FROM common-dependencies AS traffic-portal
 
-RUN	yum -y install \
-		gcc \
-		libffi-devel \
+RUN	curl -sL https://rpm.nodesource.com/setup_12.x | bash - && \
+	yum -y install \
 		make \
-		nodejs \
-		npm \
-		ruby-devel \
-		rubygems
-
-RUN	gem install \
-		# FFI 1.13 cannot be installed with Ruby 2.0
-		ffi:1.12.2 \
-		rb-inotify:0.9.10 \
-		compass && \
-	npm -g install grunt-cli
+		nodejs && \
+	npm -g install grunt-cli sass
 
 ###
 

diff --git a/traffic_portal/Gemfile b/traffic_portal/Gemfile
diff --git a/traffic_portal/Gruntfile.js b/traffic_portal/Gruntfile.js
@@ -70,12 +70,11 @@ module.exports = function (grunt) {
 
     // css
     grunt.registerTask('build-css', [
-        'compass:prod'
+        'dart-sass:prod'
     ]);
 
     grunt.registerTask('build-css-dev', [
-        'run:which_ruby',
-        'compass:dev'
+        'dart-sass:dev'
     ]);
 
     // js (custom)

diff --git a/traffic_portal/app/src/styles/main.scss b/traffic_portal/app/src/styles/main.scss
@@ -24,8 +24,8 @@ $fa-font-path: "../assets/fonts";
 @import "font-awesome/scss/font-awesome";
 
 // common
-@import "../common/modules/chart/chart ";
-@import "../common/modules/compare/compare ";
+@import "../common/modules/chart/chart";
+@import "../common/modules/compare/compare";
 @import "../common/modules/dialog/dialog";
 @import "../common/modules/dialog/import/dialog.import";
 @import "../common/modules/dialog/text/dialog.text";

diff --git a/traffic_portal/build/build_rpm.sh b/traffic_portal/build/build_rpm.sh
@@ -61,6 +61,6 @@ initBuildArea() {
 # ---------------------------------------
 
 importFunctions
-checkEnvironment -i npm,grunt,compass,rsync
+checkEnvironment -i npm,grunt,rsync,sass
 initBuildArea
 buildRpm traffic_portal
diff --git a/traffic_portal/grunt/compass.js → traffic_portal/grunt/dart-sass.js b/traffic_portal/grunt/compass.js → traffic_portal/grunt/dart-sass.js
@@ -20,28 +20,34 @@
 
 module.exports = {
     options: {
-        sassDir: '<%= globalConfig.srcdir %>',
-        imagesDir: '<%= globalConfig.srcdir %>/assets/images',
-        javascriptsDir: '<%= globalConfig.srcdir %>',
-        fontsDir: '<%= globalConfig.srcdir %>/assets/fonts',
-        importPath: 'node_modules',
-        relativeAssets: false,
-        assetCacheBuster: false,
-        raw: 'Sass::Script::Number.precision = 10\n'
+        includePaths: [
+            "<%= globalConfig.importdir %>"
+        ],
+        quietDeps: true,
+        precision: 10,
     },
-    prod: {
+    dev: {
         options: {
-            cssDir: '<%= globalConfig.resourcesdir %>',
-            outputStyle: 'compressed',
-            environment: 'production'
-        }
+            sourceMap: true
+        },
+        files: [{
+            expand: true,
+            cwd: "<%= globalConfig.srcdir %>",
+            src: ["styles/*.scss"],
+            dest: "<%= globalConfig.resourcesdir %>",
+            ext: ".css",
+        }],
     },
-    dev: {
+    prod: {
         options: {
-            debugInfo: true,
-            cssDir: '<%= globalConfig.resourcesdir %>',
-            outputStyle: 'expanded',
-            environment: 'development'
-        }
+            outputStyle: "compressed"
+        },
+        files: [{
+            expand: true,
+            cwd: "<%= globalConfig.srcdir %>",
+            src: ["styles/*.scss"],
+            dest: "<%= globalConfig.resourcesdir %>",
+            ext: ".css",
+        }],
     }
 };
diff --git a/traffic_portal/grunt/run.js b/traffic_portal/grunt/run.js
diff --git a/traffic_portal/grunt/watch.js b/traffic_portal/grunt/watch.js
@@ -6,9 +6,9 @@
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
- * 
+ *
  *   http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
@@ -28,7 +28,7 @@ module.exports = {
     },
     compass: {
         files: ['<%= globalConfig.srcdir %>/**/*.{scss,sass}'],
-        tasks: ['compass:dev']
+        tasks: ['dart-sass:dev']
     },
     html: {
         files: ['app/**/*.tpl.html', 'app/**/index.html'],