feat: drop sass/compass toolchain, adopt native css with lightning css

.gitignore

@@ -9,13 +9,13 @@
 #
 # $ git config --global core.excludesfile ~/.gitignore_global
 
-.sass-cache/
 docs/build
 media/*
 static-root/
 static/stylesheets/mq.css
 static/stylesheets/no-mq.css
 static/stylesheets/style.css
+static/css/*.min.css
 __pycache__
 *.db
 *.py[co]

Makefile

@@ -85,6 +85,21 @@ docs-clean: ## Clean built documentation
 	@rm -rf docs/_build
 	@echo "=> Removed existing documentation build assets"
 
+# =============================================================================
+# Frontend
+# =============================================================================
+
+##@ Frontend
+
+css: ## Minify CSS with Lightning CSS
+	npx lightningcss-cli --minify static/css/style.css -o static/css/style.min.css
+	npx lightningcss-cli --minify static/css/mq.css -o static/css/mq.min.css
+
+css-check: ## Validate CSS parses without errors
+	npx lightningcss-cli --minify static/css/style.css -o /dev/null
+	npx lightningcss-cli --minify static/css/mq.css -o /dev/null
+
 .PHONY: help serve migrations migrate manage shell docker_shell clean
 .PHONY: lint fmt test ci
 .PHONY: docs docs-serve docs-clean
+.PHONY: css css-check

docker-compose.yml

@@ -20,13 +20,6 @@ services:
      test: ["CMD", "redis-cli","ping"]
      interval: 1s
 
-  static:
-    command: bin/static
-    build:
-      dockerfile: Dockerfile.static
-    volumes:
-      - .:/code
-
   web:
     build: .
     image: pythondotorg:docker-compose

docs/source/install.md

@@ -162,15 +162,11 @@ 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 minify CSS (optional for development):
 
 ```
-$ 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
+$ make css
 ```
 
 To create initial data for the most used applications, run:
@@ -194,20 +190,20 @@ The search feature in Python.org uses Elasticsearch engine. If you want to test
 
 Once you have it installed, update the URL value of `HAYSTACK_CONNECTIONS` settings in `pydotorg/settings/local.py` to your local ElasticSearch server.
 
-Generating CSS files automatically
-----------------------------------
+Working with CSS
+----------------
 
-```{warning}
-When editing frontend styles, ensure you ONLY edit the `.scss` files. 
+The site's CSS source files are in `static/css/`. These are plain CSS files
+(no preprocessor required). To minify them for production using
+[Lightning CSS](https://lightningcss.dev/):
 
-These will then be compiled into `.css` files automatically.
+```
+npm install
+make css
 ```
 
-Static files are automatically compiled inside the [Docker Compose `static` container](../../docker-compose.yml)
-when running `make serve`.
-
-When your pull request has stylesheet changes, commit the `.scss` files and the compiled `.css` files. 
-Otherwise, ignore committing and pushing the `.css` files.
+When your pull request has stylesheet changes, commit the modified `.css` files
+in `static/css/`.
 
 Running tests
 -------------

package.json

@@ -1,4 +1,11 @@
 {
   "name": "pythondotorg",
-  "description": "Django App behind python.org"
+  "description": "Django App behind python.org",
+  "devDependencies": {
+    "lightningcss-cli": "^1.28.0"
+  },
+  "scripts": {
+    "css:minify": "npx lightningcss-cli --minify static/css/style.css -o static/css/style.min.css && npx lightningcss-cli --minify static/css/mq.css -o static/css/mq.min.css",
+    "css:check": "npx lightningcss-cli --minify static/css/style.css -o /dev/null && npx lightningcss-cli --minify static/css/mq.css -o /dev/null"
+  }
 }

pydotorg/settings/pipeline.py

@@ -2,15 +2,15 @@
 
 PIPELINE_CSS = {
     "style": {
-        "source_filenames": ("sass/style.css",),
+        "source_filenames": ("css/style.css",),
         "output_filename": "stylesheets/style.css",
         "extra_context": {
             "title": "default",
             "media": "",
         },
     },
     "mq": {
-        "source_filenames": ("sass/mq.css",),
+        "source_filenames": ("css/mq.css",),
         "output_filename": "stylesheets/mq.css",
         "extra_context": {
             "media": "not print, braille, embossed, speech, tty",