switch to using compress for building CSS

This both brings it in line with other climate projects and resolves the dependancy on our own forked version of pipeline that does not support django 4.
mysociety · Apr 4, 2024 · f5eb429 · f5eb429
1 parent 582f769
commit f5eb429
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 246 deletions.
diff --git a/caps/static/caps/scss/main.scss b/caps/static/caps/scss/main.scss
@@ -1,61 +1,44 @@
 @charset "utf-8";
 
-// A NOTE ABOUT FILE PATHS
-//
-// django.contrib.staticfiles copies this file into the `STATIC_ROOT`
-// (along with any other files/directories defined in `STATICFILES_DIRS`)
-// and then django-pipeline compiles the Sass files from there.
-//
-// So imports in this file are relative to `<STATIC_ROOT>/caps/sass/main.scss`,
-// not `/caps/static/caps/caps/main.scss`.
-//
-// That’s why `@import "../../bootstrap/<whatever>" works – because at the
-// point the Sass files are compiled, django.contrib.staticfiles has
-// already copied the bootstrap sass files into `<STATIC_ROOT>/bootstrap/`.
-//
-// Note that this doesn't work on a dev thing with standard django-pipeline
-// due to this issue: https://github.com/jazzband/django-pipeline/issues/749
-// so we are using a fork with the patch from the above issue
-
 @import "variables";
 
-@import "../../bootstrap/functions";
-@import "../../bootstrap/variables";
-@import "../../bootstrap/mixins";
-@import "../../bootstrap/root";
-@import "../../bootstrap/reboot";
-@import "../../bootstrap/type";
-@import "../../bootstrap/images";
-@import "../../bootstrap/code";
-@import "../../bootstrap/grid";
-@import "../../bootstrap/tables";
-@import "../../bootstrap/forms";
-@import "../../bootstrap/buttons";
-@import "../../bootstrap/transitions";
-// @import "../../bootstrap/dropdown";
-// @import "../../bootstrap/button-group";
-// @import "../../bootstrap/input-group";
-// @import "../../bootstrap/custom-forms";
-@import "../../bootstrap/nav";
-@import "../../bootstrap/navbar";
-@import "../../bootstrap/card";
-// @import "../../bootstrap/breadcrumb";
-// @import "../../bootstrap/pagination";
-@import "../../bootstrap/badge";
-// @import "../../bootstrap/jumbotron";
-// @import "../../bootstrap/alert";
-@import "../../bootstrap/progress";
-// @import "../../bootstrap/media";
-// @import "../../bootstrap/list-group";
-// @import "../../bootstrap/close";
-// @import "../../bootstrap/toasts";
-@import "../../bootstrap/modal";
-@import "../../bootstrap/tooltip";
-// @import "../../bootstrap/popover";
-// @import "../../bootstrap/carousel";
-@import "../../bootstrap/spinners";
-@import "../../bootstrap/utilities";
-@import "../../bootstrap/print";
+@import "../../../../vendor/bootstrap/scss/functions";
+@import "../../../../vendor/bootstrap/scss/variables";
+@import "../../../../vendor/bootstrap/scss/mixins";
+@import "../../../../vendor/bootstrap/scss/root";
+@import "../../../../vendor/bootstrap/scss/reboot";
+@import "../../../../vendor/bootstrap/scss/type";
+@import "../../../../vendor/bootstrap/scss/images";
+@import "../../../../vendor/bootstrap/scss/code";
+@import "../../../../vendor/bootstrap/scss/grid";
+@import "../../../../vendor/bootstrap/scss/tables";
+@import "../../../../vendor/bootstrap/scss/forms";
+@import "../../../../vendor/bootstrap/scss/buttons";
+@import "../../../../vendor/bootstrap/scss/transitions";
+// @import "../../../../vendor/bootstrap/scss/dropdown";
+// @import "../../../../vendor/bootstrap/scss/button-group";
+// @import "../../../../vendor/bootstrap/scss/input-group";
+// @import "../../../../vendor/bootstrap/scss/custom-forms";
+@import "../../../../vendor/bootstrap/scss/nav";
+@import "../../../../vendor/bootstrap/scss/navbar";
+@import "../../../../vendor/bootstrap/scss/card";
+// @import "../../../../vendor/bootstrap/scss/breadcrumb";
+// @import "../../../../vendor/bootstrap/scss/pagination";
+@import "../../../../vendor/bootstrap/scss/badge";
+// @import "../../../../vendor/bootstrap/scss/jumbotron";
+// @import "../../../../vendor/bootstrap/scss/alert";
+@import "../../../../vendor/bootstrap/scss/progress";
+// @import "../../../../vendor/bootstrap/scss/media";
+// @import "../../../../vendor/bootstrap/scss/list-group";
+// @import "../../../../vendor/bootstrap/scss/close";
+// @import "../../../../vendor/bootstrap/scss/toasts";
+@import "../../../../vendor/bootstrap/scss/modal";
+@import "../../../../vendor/bootstrap/scss/tooltip";
+// @import "../../../../vendor/bootstrap/scss/popover";
+// @import "../../../../vendor/bootstrap/scss/carousel";
+@import "../../../../vendor/bootstrap/scss/spinners";
+@import "../../../../vendor/bootstrap/scss/utilities";
+@import "../../../../vendor/bootstrap/scss/print";
 
 @import "awesomplete";
 @import "equilateral-triangle";

diff --git a/caps/templates/caps/base.html b/caps/templates/caps/base.html
@@ -1,5 +1,5 @@
 {% load static %}
-{% load pipeline %}
+{% load compress %}
 {% load hosts %}
 
 <!doctype html>
@@ -24,7 +24,9 @@
     <!--[if lt IE 9]>
     <script src="{% static 'html5shiv/html5shiv.js' %}"></script>
     <![endif]-->
-    {% stylesheet 'caps' %}
+    {% compress css %}
+    <link rel="stylesheet" type="text/x-scss" href="{% static 'caps/scss/main.scss' %}">
+    {% endcompress %}
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&amp;family=Montserrat:wght@600;900&amp;display=swap">
     {% block extrastylesheets %}{% endblock %}
 

diff --git a/conf/config.py.docker b/conf/config.py.docker
@@ -3,7 +3,7 @@ from distutils.util import strtobool
 
 SECRET_KEY = os.environ.get("SECRET_KEY", "xx")
 SASSC_LOCATION = os.environ.get("SASSC_LOCATION", "pysassc")
-DEBUG = int(os.environ.get("DEBUG", 1))
+DEBUG = bool(os.environ.get("DEBUG", True))
 ALLOWED_HOSTS = ["*"]
 
 REPOSITORY_DB_HOST = os.environ.get("REPOSITORY_DB_HOST", "postgres")

diff --git a/poetry.lock b/poetry.lock
diff --git a/proj/settings.py b/proj/settings.py
@@ -39,10 +39,12 @@
 
 if DEBUG:
     IS_LIVE = False
-    STATICFILES_STORAGE = "pipeline.storage.NonPackagingPipelineStorage"
 else:
     IS_LIVE = True
-    STATICFILES_STORAGE = "pipeline.storage.PipelineManifestStorage"
+    # only want to do this for live really
+    STATICFILES_STORAGE = (
+        "django.contrib.staticfiles.storage.ManifestStaticFilesStorage"
+    )
 
 
 LANGUAGE_CODE = "en-uk"
@@ -72,6 +74,9 @@
 ]
 
 STATICFILES_DIRS = (
+    ("caps", os.path.join(BASE_DIR, "caps", "static")),
+    ("scoring", os.path.join(BASE_DIR, "scoring", "static")),
+    ("scoring2022", os.path.join(BASE_DIR, "scoring2022", "static")),
     (
         "bootstrap",
         os.path.join(BASE_DIR, "vendor", "bootstrap", "scss"),
@@ -113,33 +118,11 @@
 STATICFILES_FINDERS = (
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
-    "pipeline.finders.PipelineFinder",
-    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
 )
 
-PIPELINE = {
-    "STYLESHEETS": {
-        "caps": {
-            "source_filenames": ("caps/scss/main.scss",),
-            "output_filename": "css/caps.css",
-        },
-        "scoring": {
-            "source_filenames": ("scoring/scss/main.scss",),
-            "output_filename": "css/scoring.css",
-        },
-        "scoring2022": {
-            "source_filenames": ("scoring2022/scss/main.scss",),
-            "output_filename": "css/scoring2022.css",
-        },
-    },
-    "CSS_COMPRESSOR": "django_pipeline_csscompressor.CssCompressor",
-    "DISABLE_WRAPPER": True,
-    "COMPILERS": ("pipeline.compilers.sass.SASSCompiler",),
-    "SHOW_ERRORS_INLINE": False,
-    # Use the libsass commandline tool (that's bundled with libsass) as our
-    # sass compiler, so there's no need to install anything else.
-    "SASS_BINARY": SASSC_LOCATION,
-}
+COMPRESS_PRECOMPILERS = (("text/x-scss", "django_libsass.SassCompiler"),)
+COMPRESS_CSS_HASHING_METHOD = "content"
 
 DATA_DIR = "data"
 PLANS_DIR = os.path.join(DATA_DIR, "plans")
@@ -206,7 +189,7 @@
     "django_filters",
     "django_hosts",
     "haystack",
-    "pipeline",
+    "compressor",
     "bootstrap4",
     "django_bootstrap5",
     "rest_framework",

diff --git a/pyproject.toml b/pyproject.toml
@@ -64,8 +64,6 @@ altair = "^5.1.1"
 mysoc-dataset = "^0.2.1"
 tqdm = "^4.65.0"
 feedparser = "^6.0.11"
-django-pipeline = {git = "https://github.com/mysociety/django-pipeline"}
-django-pipeline-csscompressor = "^0.1"
 django-hosts = "^6.0"
 mailchimp-marketing = {git = "https://github.com/mailchimp/mailchimp-marketing-python.git"}
 django-libsass = "^0.9"

diff --git a/scoring/static/scoring/scss/main.scss b/scoring/static/scoring/scss/main.scss
@@ -1,67 +1,50 @@
 @charset "utf-8";
 
-// A NOTE ABOUT FILE PATHS
-//
-// django.contrib.staticfiles copies this file into the `STATIC_ROOT`
-// (along with any other files/directories defined in `STATICFILES_DIRS`)
-// and then django-pipeline compiles the Sass files from there.
-//
-// So imports in this file are relative to `<STATIC_ROOT>/scoring/sass/main.scss`,
-// not `/caps/static/scoring/scss/main.scss`.
-//
-// That’s why `@import "../../bootstrap5/<whatever>" works – because at the
-// point the Sass files are compiled, django.contrib.staticfiles has
-// already copied the bootstrap5 sass files into `<STATIC_ROOT>/bootstrap5/`.
-//
-// Note that this doesn't work on a dev thing with standard django-pipeline
-// due to this issue: https://github.com/jazzband/django-pipeline/issues/749
-// so we are using a fork with the patch from the above issue
-
-@import "../../bootstrap5/functions";
-@import "../../bootstrap5/mixins/banner";
+@import "../../bootstrap5/scss/functions";
+@import "../../bootstrap5/scss/mixins/banner";
 @include bsBanner("");
 
 @import "variables";
-@import "../../bootstrap5/variables";
+@import "../../bootstrap5/scss/variables";
 
-@import "../../bootstrap5/maps";
-@import "../../bootstrap5/mixins";
-@import "../../bootstrap5/utilities";
+@import "../../bootstrap5/scss/maps";
+@import "../../bootstrap5/scss/mixins";
+@import "../../bootstrap5/scss/utilities";
 @import "_utils";
 
-@import "../../bootstrap5/root";
-@import "../../bootstrap5/reboot";
-@import "../../bootstrap5/type";
-@import "../../bootstrap5/images";
-@import "../../bootstrap5/containers";
-@import "../../bootstrap5/grid";
-@import "../../bootstrap5/tables";
-@import "../../bootstrap5/forms";
-@import "../../bootstrap5/buttons";
-@import "../../bootstrap5/transitions";
-@import "../../bootstrap5/dropdown";
-@import "../../bootstrap5/accordion";
-@import "../../bootstrap5/button-group";
-@import "../../bootstrap5/nav";
-@import "../../bootstrap5/navbar";
-@import "../../bootstrap5/card";
-// @import "../../bootstrap5/breadcrumb";
-// @import "../../bootstrap5/pagination";
-@import "../../bootstrap5/badge";
-@import "../../bootstrap5/alert";
-// @import "../../bootstrap5/progress";
-@import "../../bootstrap5/list-group";
-@import "../../bootstrap5/close";
-// @import "../../bootstrap5/toasts";
-@import "../../bootstrap5/modal";
-@import "../../bootstrap5/tooltip";
-@import "../../bootstrap5/popover";
-// @import "../../bootstrap5/carousel";
-// @import "../../bootstrap5/spinners";
-// @import "../../bootstrap5/offcanvas";
-// @import "../../bootstrap5/placeholders";
-@import "../../bootstrap5/helpers";
-@import "../../bootstrap5/utilities/api";
+@import "../../bootstrap5/scss/root";
+@import "../../bootstrap5/scss/reboot";
+@import "../../bootstrap5/scss/type";
+@import "../../bootstrap5/scss/images";
+@import "../../bootstrap5/scss/containers";
+@import "../../bootstrap5/scss/grid";
+@import "../../bootstrap5/scss/tables";
+@import "../../bootstrap5/scss/forms";
+@import "../../bootstrap5/scss/buttons";
+@import "../../bootstrap5/scss/transitions";
+@import "../../bootstrap5/scss/dropdown";
+@import "../../bootstrap5/scss/accordion";
+@import "../../bootstrap5/scss/button-group";
+@import "../../bootstrap5/scss/nav";
+@import "../../bootstrap5/scss/navbar";
+@import "../../bootstrap5/scss/card";
+// @import "../../bootstrap5/scss/breadcrumb";
+// @import "../../bootstrap5/scss/pagination";
+@import "../../bootstrap5/scss/badge";
+@import "../../bootstrap5/scss/alert";
+// @import "../../bootstrap5/scss/progress";
+@import "../../bootstrap5/scss/list-group";
+@import "../../bootstrap5/scss/close";
+// @import "../../bootstrap5/scss/toasts";
+@import "../../bootstrap5/scss/modal";
+@import "../../bootstrap5/scss/tooltip";
+@import "../../bootstrap5/scss/popover";
+// @import "../../bootstrap5/scss/carousel";
+// @import "../../bootstrap5/scss/spinners";
+// @import "../../bootstrap5/scss/offcanvas";
+// @import "../../bootstrap5/scss/placeholders";
+@import "../../bootstrap5/scss/helpers";
+@import "../../bootstrap5/scss/utilities/api";
 
 @import "mixins";
 @import "buttons";
@@ -77,7 +60,7 @@
 @import "awesomplete";
 @import "methodology";
 @import "toggle-section";
-@import "about";
+//@import "about";
 @import "toggle-buttons";
 @import "loading-shimmer";
 @import "open-graph-preview";
diff --git a/scoring/templates/scoring/base-preview.html b/scoring/templates/scoring/base-preview.html
@@ -1,5 +1,5 @@
 {% load static %}
-{% load pipeline %}
+{% load compress %}
 
 <!doctype html>
 <html class="open-graph-preview">
@@ -12,7 +12,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300&amp;family=Montserrat:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
     <title>{{ page_title }}</title>
-    {% stylesheet 'scoring' %}
+    {% compress css %}
+    <link rel="stylesheet" type="text/x-scss" href="{% static 'scoring/scss/main.scss' %}">
+    {% endcompress %}
 </head>
 <body class="{% block bodyclass %}{% endblock %}">
     <!-- Facebook OpenGraph image dimensions: 1200px wide, 630px tall -->