feat(frontend): update sass compiler/toolchain

.github/workflows/ci.yml

@@ -0,0 +1,82 @@
+name: CI
+on: [push, pull_request]
+
+jobs:
+  test:
+    strategy:
+      matrix:
+        include:
+          - name: Tests
+            command: bin/tests --postgresql-host localhost
+            needs-python: ${{ true }}
+            needs-node: ${{ false }}
+          - name: Check SCSS/CSS
+            command: bin/scss-check
+            needs-python: ${{ false }}
+            needs-node: ${{ true }}
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:10.1
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+    name: ${{ matrix.name }}
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v2
+      - name: Install platform dependencies
+        run: |
+          sudo apt -y update
+          sudo apt -y install libcurl4-openssl-dev libssl-dev pkg-config
+      - uses: actions/setup-python@v2
+        if: ${{ matrix.needs-python }}
+        with:
+          python-version: 3.6.13
+      - name: Cache Python dependencies
+        if: ${{ matrix.needs-python }}
+        uses: actions/cache@v2
+        env:
+          cache-name: pythondotorg-cache-pip
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-${{ github.job }}-${{ env.cache-name }}-${{ hashFiles('dev-requirements.txt') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ github.job }}-${{ env.cache-name }}-
+            ${{ runner.os }}-${{ github.job }}-
+            ${{ runner.os }}-
+      - name: Install Python dependencies
+        if: ${{ matrix.needs-python }}
+        run: |
+          pip install -U pip setuptools wheel
+          pip install -r dev-requirements.txt
+      - uses: actions/setup-node@v2
+        if: ${{ matrix.needs-node }}
+        with:
+          node-version: 14
+      - name: Cache Node dependencies
+        if: ${{ matrix.needs-node }}
+        uses: actions/cache@v2
+        env:
+          cache-name: warehouse-cache-npm
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ github.job }}-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ github.job }}-${{ env.cache-name }}-
+            ${{ runner.os }}-build-${{ github.job }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Create DB
+        run: psql -h localhost -c 'create database "python.org";' -U postgres
+      - name: Install Node dependencies
+        if: ${{ matrix.needs-node }}
+        run: npm ci
+      - name: Run ${{ matrix.name }}
+        run: ${{ matrix.command }}
+        env:
+          DATABASE_URL: postgres://postgres:@127.0.0.1:5432/python.org

.gitignore

@@ -17,3 +17,4 @@ static/stylesheets/no-mq.css
 static/stylesheets/style.css
 __pycache__
 *.db
+node_modules/

Makefile

@@ -0,0 +1,11 @@
+PATH  := $(shell npm bin):$(shell echo $$PATH)
+
+
+runserver:
+	python manage.py runserver 0.0.0.0:8000
+
+sass:
+	sass -I static/vendor/compass -I static/vendor/susy static/sass
+
+sass-watch:
+	sass -w -I static/vendor/compass -I static/vendor/susy static/sass

bin/scss-check

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+EXIT_CODE=0
+
+PATH=$(npm bin):$PATH sass -I static/vendor/compass -I static/vendor/susy static/sass
+if git diff --quiet HEAD -- static; then
+    echo "SCSS is compiled!"
+else
+    echo "Committed CSS does not match result of compiling SCSS!"
+    EXIT_CODE=1;
+fi
+
+exit $EXIT_CODE

bin/tests

@@ -0,0 +1,37 @@
+#!/bin/bash
+set -e
+
+# Click requires us to ensure we have a well configured environment to run
+# our click commands. So we'll set our environment to ensure our locale is
+# correct.
+export LC_ALL="${ENCODING:-en_US.UTF-8}"
+export LANG="${ENCODING:-en_US.UTF-8}"
+
+COMMAND_ARGS=$@
+
+# Test the postgres connection
+while [ $# -gt 0 ]; do
+  case $1 in
+    "--postgresql-host") POSTGRES_HOST="$2"
+  esac
+  shift
+done
+
+# Test the postgres connection
+ATTEMPTS=0
+until [ $ATTEMPTS -eq 5 ] || pg_isready -t 10 -h $POSTGRES_HOST; do
+  >&2 echo "Postgres is unavailable, sleeping"
+  sleep $(( ATTEMPTS++ ))
+done
+
+if [ $ATTEMPTS -eq 5 ]; then
+  >&2 echo "Postgres is unavailable, exiting"
+  exit 1
+fi
+
+# Print all the followng commands
+set -x
+
+# Actually run our tests.
+python -Wd -m coverage run manage.py test -v2
+coverage report -m --fail-under=75

docs/source/install.rst

@@ -121,16 +121,9 @@ Whichever database type you chose, now it's time to run migrations::
 
     $ ./manage.py migrate
 
-To compile and compress static media, you will need *compass* and
-*yui-compressor*::
+To compile SCSS, you will need *sass-dart*::
 
-    $ gem install bundler
-    $ bundle install
-
-.. note::
-
-   To install *yui-compressor*, use your OS's package manager or download it
-   directly then add the executable to your ``PATH``.
+    $ npm install
 
 To create initial data for the most used applications, run::
 
@@ -156,15 +149,24 @@ settings in ``pydotorg/settings/local.py`` to your local ElasticSearch server.
 .. _Elasticsearch: https://www.elastic.co/downloads/elasticsearch
 
 
+Compiling SCSS files to CSS
+---------------------------
+
+For frontend work, SCSS files should be compiled to CSS before committing.
+
+After installing *sass-dart* via NPM::
+
+    $ PATH=$(npm bin):$PATH sass -I static/vendor/compass -I static/vendor/susy static/sass
+
+
 Generating CSS files automatically
 ----------------------------------
 
 Due to performance issues of django-pipeline_, we are using a dummy compiler
 ``pydotorg.compilers.DummySASSCompiler`` in development mode. To generate CSS
 files, use ``sass`` itself in a separate terminal window::
 
-    $ cd static
-    $ sass --compass --scss -I $(dirname $(dirname $(gem which susy))) --trace --watch sass/style.scss:sass/style.css
+    $ PATH=$(npm bin):$PATH sass -w -I static/vendor/compass -I static/vendor/susy static/sass
 
 .. _django-pipeline: https://github.com/cyberdelia/django-pipeline/issues/313
 

package.json

@@ -1,4 +1,8 @@
 {
   "name": "pythondotorg",
-  "description": "Django App behind python.org"
+  "description": "Django App behind python.org",
+  "dependencies": {},
+  "devDependencies": {
+    "sass": "^1.32.11"
+  }
 }

runtime.txt

@@ -1 +1 @@
-python-3.6.6
+python-3.6.13

static/sass/_layout.scss

@@ -266,7 +266,7 @@
         $bordertop: lighten( $this-color, 38% );
 
         .#{nth($names, $i)}-navigation {
-            @include vertical-gradient( $this-color, adjust-lightness( $this-color, -8 ), 30%, 95% );
+            @include vertical-gradient( $this-color, adjust-color( $this-color, $lightness: -8 ), 30%, 95% );
             border-top: 1px solid lighten($this-color, 15%);
             border-bottom: 1px solid darken($this-color, 25%);
 
@@ -816,7 +816,7 @@
                 //float: left;
                 //margin-top: .5em;
             }
-            /* ! This is done the wrong way with SASS. Should be something like \#{$form-text-inputs} with $form-text-inputs as a variable */
+            /* ! This is done the wrong way with SASS. Should be something like \#{\$form-text-inputs} with \$form-text-inputs as a variable */
             @include input_text_types() {
                 width: 75%;
                 display: inline-block;