Feature/postcss build system

.gitignore

@@ -79,3 +79,7 @@ docker/local.env
 
 # config dumps from make docker-compose-config-to-file
 config-compose-*
+
+# Frontend
+frontend/node_modules
+frontend/build

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,12 +215,22 @@ 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
 
+# copy dependencies to rebuild CSS (postcss)
+COPY --from=frontend /usr/local/bin/ /usr/local/bin/
+COPY --from=frontend /usr/local/lib/node_modules /usr/local/lib/node_modules
+COPY --from=frontend /app/frontend/node_modules /app/frontend/node_modules
+
+# copy browser reload module
+COPY --from=linttest-deps /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload
+
 # use fake version to prevent building the next steps when only the version changes
 ENV SETUPTOOLS_SCM_PRETEND_VERSION=0.0.0-build0
 

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/.stylelintrc.json

@@ -0,0 +1 @@
+{ "extends": ["stylelint-config-standard"] }

frontend/css/style-test.css

@@ -0,0 +1,25 @@
+/* Test file for postcss output */
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  color: light-dark(#333b3c, #efefec);
+  background-color: light-dark(#efedea, #223a2c);
+}
+
+input {
+  /* styles for input not in a label  */
+  border: tomato 2px solid;
+}
+
+label {
+  /* styles for label */
+  font-family: system-ui;
+  font-size: 1.25rem;
+
+  & input {
+    /* styles for input in a label  */
+    border: blue 2px dashed;
+  }
+}

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';
     }
 }