Build CSS with postcss

Author: aequitas

bin/frontend.py

@@ -1,12 +1,10 @@
 # Copyright: 2022, ECP, NLnet Labs and the Internet.nl contributors
 # SPDX-License-Identifier: Apache-2.0
 from argparse import ArgumentParser
-import io
 import os
 from uuid import uuid4 as uuid
 
 import rjsmin
-import sass
 
 
 FRONTEND_FOLDER = "frontend"
@@ -15,7 +13,6 @@
 
 DJANGO_STATIC_FOLDER = "static_frontend"
 DJANGO_STATIC_JS_FOLDER = DJANGO_STATIC_FOLDER + "/js"
-DJANGO_STATIC_CSS_FOLDER = DJANGO_STATIC_FOLDER + "/css"
 
 
 def build_js(args=None):
@@ -53,36 +50,6 @@ def build_js(args=None):
     print("Done!")
 
 
-def build_css(args=None):
-    """
-    Build/minify CSS and copy into Django's static folder.
-
-    """
-    print("-"*20)
-    print("Building CSS files.")
-    try:
-        os.mkdir(DJANGO_STATIC_CSS_FOLDER)
-    except FileExistsError:
-        pass
-    for root, dirs, files in os.walk(FRONTEND_CSS_FOLDER):
-        for filename in files:
-            if filename.endswith(".css"):
-                if filename == "style.css-notyet-scss":
-                    continue
-                print(f"Found {filename}...")
-                filepath = os.path.join(root, filename)
-                content_min = sass.compile(
-                    filename=filepath, output_style="compressed")
-                filename, _ = filename.rsplit(".", 1)
-                filepath = os.path.join(
-                    DJANGO_STATIC_CSS_FOLDER, filename + "-min.css")
-                print(f"... minifying to {filepath}")
-                with open(filepath, 'w', encoding="utf-8") as f:
-                    f.write(content_min)
-        break
-    print("Done!")
-
-
 def parse():
     """
     Parse the command line.
@@ -98,9 +65,6 @@ def parse():
 
     parser.set_defaults(func=lambda x: parser.print_help())
 
-    to_django = subparsers.add_parser('css')
-    to_django.set_defaults(func=build_css)
-
     to_tar = subparsers.add_parser('js')
     to_tar.set_defaults(func=build_js)
 

docker/Dockerfile

@@ -133,6 +133,17 @@ USER unbound
 
 ENTRYPOINT ["/entrypoint.sh"]
 
+FROM debian:bullseye-20241111-slim AS frontend
+
+# install npm from official image
+COPY --from=node:20-slim /usr/local/bin/ /usr/local/bin/
+COPY --from=node:20-slim /usr/local/lib/node_modules /usr/local/lib/node_modules
+
+ADD frontend/ /app/frontend
+WORKDIR /app/frontend
+RUN npm install
+RUN npm run css:build
+
 # build main application image target
 FROM --platform=linux/amd64 debian:bullseye-20241111-slim AS build-app
 ARG PYTHON_VERSION
@@ -204,8 +215,10 @@ RUN install -d -m 0755 -o nobody -g nogroup /app/batch_results
 # some js/css files use a separate script to generate minimized versions
 # storage these in a place for django to find
 RUN mkdir -p /app/static_frontend
+# minimize JS files
 RUN python3 bin/frontend.py js
-RUN python3 bin/frontend.py css
+# copy build/minimized CSS files from frontand stage
+COPY --from=frontend --chown=nobody:nogroup /app/static_frontend/css/*.css /app/static_frontend/css/
 
 # generate language files
 RUN python3 bin/pofiles.py to_django

docker/compose.development.yaml

@@ -22,18 +22,23 @@ services:
     develop:
       watch:
         # auto rebuild/reload when CSS/JS changes
-        - path: ../frontend/
+        - path: ../frontend/js
           action: sync+exec
-          target: /app/frontend
+          target: /app/frontend/js
           exec:
-            command: /bin/sh -c "python3 bin/frontend.py js;python3 bin/frontend.py css;"
+            command: python3 bin/frontend.py js
     # use Django runserver for better debug abilities during development
     entrypoint: ["/bin/bash"]
     # run CSS auto rebuild in the background and start devserver
     command:
       - "-c"
       - >
         if [ "$INTERNETNL_AUTORELOAD" = "True" ]; then
+          # watch CSS files for rebuild
+          cd /app/frontend;
+          npm run css:build:watch &
+          cd /app;
+          # start development server with auto reloading
           ./manage.py runserver 0.0.0.0:8080
         else
           ./manage.py runserver 0.0.0.0:8080 --noreload
@@ -46,6 +51,8 @@ services:
       - ../checks:/app/checks
       - ../interface:/app/interface
       - ../internetnl:/app/internetnl
+      # mount CSS files so `css:build:watch` can detect changes an rebuild
+      - ../frontend/css:/app/frontend/css
 
   worker:
     volumes:

frontend/js/imagecheck.js

@@ -15,7 +15,7 @@ function ImageCheck() {
          * #unique is added to always get the file from the server if a newer
          * version exists.
          */
-        objCSS_noimages.href = '/static/css/alt-min.css'+'#'+unique;
+        objCSS_noimages.href = '/static/css/alt.css'+'#'+unique;
         objCSS_noimages.type = 'text/css';
     }
     if (check_if_browser_in_high_contrast()) {
@@ -28,7 +28,7 @@ function ImageCheck() {
          * #unique is added to always get the file from the server if a newer
          * version exists.
          */
-        objCSS_highcontrast.href = '/static/css/high-contrast-min.css'+'#'+unique;
+        objCSS_highcontrast.href = '/static/css/high-contrast.css'+'#'+unique;
         objCSS_highcontrast.type = 'text/css';
     }
 }

frontend/package.json

@@ -1,8 +1,8 @@
 {
   "scripts": {
     "css:lint": "stylelint css/*.css",
-    "css:build": "postcss css/*.css --dir build",
-    "css:build:watch": "postcss css/*.css --dir build --watch --poll"
+    "css:build": "postcss css/*.css --dir /app/static_frontend/css/",
+    "css:build:watch": "postcss css/*.css --dir /app/static_frontend/css/ --watch --poll"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",
@@ -16,4 +16,4 @@
   "browserslist": [
     "defaults"
   ]
-}
+}

integration_tests/common/test_basic.py

@@ -90,7 +90,7 @@ def test_static_files(page, app_url_subdomain):
 
 
 def test_generated_css_static_files(page, app_url_subdomain):
-    response = page.request.get(app_url_subdomain + "/static/css/style-min.css")
+    response = page.request.get(app_url_subdomain + "/static/css/style.css")
     expect(response).to_be_ok()
     assert "@font-face" in response.text()
     assert "expires" in response.headers

integration_tests/develop/test_basic.py

@@ -41,7 +41,7 @@ def test_static_files(page, app_url):
 
 
 def test_generated_css_static_files(page, app_url):
-    response = requests.get(app_url + "/static/css/style-min.css", verify=False)
+    response = requests.get(app_url + "/static/css/style.css", verify=False)
     response.raise_for_status()
     assert "@font-face" in response.text
     assert "expires" in response.headers

integration_tests/live/test_basic.py

@@ -46,7 +46,7 @@ def test_static_files(page, app_url):
 
 
 def test_generated_css_static_files(page, app_url):
-    response = requests.get(app_url + "/static/css/style-min.css")
+    response = requests.get(app_url + "/static/css/style.css")
     response.raise_for_status()
     assert "@font-face" in response.text
     assert "expires" in response.headers

interface/templates/base.html

@@ -15,8 +15,8 @@
   <link rel="icon" href="{% static "favicon.png" %}" sizes="192x192" />
   <link rel="apple-touch-icon-precomposed" href="{% static 'favicon.png' %}" />
   <meta name="msapplication-TileImage" content="{% static 'favicon.png' %}" />
-  <link rel="stylesheet" type="text/css" href="{% static 'css/style-min.css' %}" />
-  <link rel="stylesheet" type="text/css" href="{% static 'css/print-min.css' %}" media="print" />
+  <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
+  <link rel="stylesheet" type="text/css" href="{% static 'css/print.css' %}" media="print" />
 
   <script src="{% static "js/jquery-3.5.1.min.js" %}"></script>