Add CSS hot-reloading

Makefile

@@ -53,7 +53,8 @@ coverage: venv ## Create coverage report
 
 .PHONY: run-dev
 run-dev:
-	poetry run flask run -p 6012 --host=localhost
+	npm run watch & \
+    poetry run flask run -p 6012 --host=localhost
 
 .PHONY: run-gunicorn
 run-gunicorn:

app/assets/stylesheets/tailwind/style.css

@@ -54,6 +54,9 @@
 
 @import "./toolkit/wp.css";
 
+@import "../fa-svg-with-js.css";
+@import "../../../../node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css";
+
 /*! purgecss start ignore */
 @-ms-viewport {
   width: device-width;

app/templates/main_template.html

@@ -167,7 +167,7 @@
 {% include 'partials/google-analytics.html' %}
 
 {% block page_script %}
-<script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/main.min.js') }}"></script>
+<script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/index.min.js') }}"></script>
 <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/all.min.js') }}"></script>
 
 {% if current_user.is_authenticated %}

app/templates/notify_template.html

@@ -26,7 +26,7 @@
     {% include 'partials/cds_ascii_art.html' %}
     {% include 'partials/google-tag-manager-body.html' %}
     {% block main_content %}{% endblock %}
-    <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/main.min.js') }}"></script>
+    <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/index.min.js') }}"></script>
     <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/all.min.js') }}"></script>
   </body>
 </html>

gulpfile.js

@@ -12,11 +12,11 @@ plugins.addSrc = require("gulp-add-src");
 plugins.babel = require("gulp-babel");
 plugins.base64 = require("gulp-base64-inline");
 plugins.concat = require("gulp-concat");
-plugins.faMinify = require("gulp-fa-minify");
+plugins.cleanCSS = require('gulp-clean-css');
 plugins.jshint = require("gulp-jshint");
 plugins.prettyerror = require("gulp-prettyerror");
 plugins.rename = require("gulp-rename");
-//plugins.uglify = require("gulp-uglify");
+plugins.uglify = require("gulp-uglify");
 
 // 2. CONFIGURATION
 // - - - - - - - - - - - - - - -
@@ -86,35 +86,44 @@ const javascripts = () => {
           "accessible-autocomplete/dist/accessible-autocomplete.min.js",
       ])
     )
-    //.pipe(plugins.uglify())
+    .pipe(plugins.uglify())
     .pipe(plugins.concat("all.min.js"))
     .pipe(
       plugins.addSrc.prepend([
-        paths.src + "javascripts/main.min.js",
+        paths.src + "javascripts/index.min.js",
         paths.src + "javascripts/scheduler.min.js",
-        paths.src + "javascripts/branding_request.min.js",
-        paths.src + "javascripts/formValidateRequired.min.js",
-        paths.src + "javascripts/sessionRedirect.min.js",
-        paths.src + "javascripts/touDialog.min.js",
-        paths.src + "javascripts/templateFilters.min.js",
       ])
     )
     .pipe(dest(paths.dist + "javascripts/"));
 };
 
+const minifyIndividualJs = () => {
+  return src([
+    paths.src + "javascripts/branding_request.js",
+    paths.src + "javascripts/formValidateRequired.js",
+    paths.src + "javascripts/sessionRedirect.js",
+    paths.src + "javascripts/touDialog.js",
+    paths.src + "javascripts/templateFilters.js"
+  ])
+    .pipe(plugins.prettyerror())
+    .pipe(plugins.babel({
+      presets: ["@babel/preset-env"]
+    }))
+    .pipe(plugins.uglify())
+    .pipe(plugins.rename({ suffix: '.min' }))
+    .pipe(dest(paths.dist + "javascripts/"));
+};
+
 // copy static css
 const static_css = () => {
   return src(paths.src + "/stylesheets/index.css")
-    .pipe(
-      plugins.addSrc.prepend([
-        paths.npm + "accessible-autocomplete/dist/accessible-autocomplete.min.css",
-        paths.src + "stylesheets/fa-svg-with-js.css",
-      ])
-    )
     .pipe(plugins.concat("index.css"))
-    .pipe(
-      dest(paths.dist + "stylesheets/")
-    );
+    .pipe(plugins.cleanCSS({ 
+      level: 2,
+    }, (details) => {
+      console.log(`${details.name}: Original size:${details.stats.originalSize} - Minified size: ${details.stats.minifiedSize}`)
+    }))
+    .pipe(dest(paths.dist + "stylesheets/"));
 };
 
 // Copy images
@@ -144,7 +153,7 @@ const watchFiles = {
 
 // Default: compile everything
 const defaultTask = parallel(
-  series(javascripts),
+  series(minifyIndividualJs, javascripts),
   series(images),
   series(static_css),
 );

package.json

@@ -9,9 +9,9 @@
     "test": "jest --config tests/javascripts/jest.config.js tests/javascripts",
     "webpack": "webpack --config webpack.config.js",
     "build": "gulp",
-    "watch": "gulp watch",
+    "watch": "npx tailwindcss -i ./app/assets/stylesheets/tailwind/style.css -o ./app/static/stylesheets/index.css --watch ",
     "heroku-postbuild": "gulp && make generate-version-file && export ADMIN_BASE_URL=${HEROKU_APP_NAME}.herokuapp.com",
-    "tailwind": "webpack --config webpack.config.js && gulp"
+    "tailwind": "npx tailwindcss  -i ./app/assets/stylesheets/tailwind/style.css   -o ./app/assets/stylesheets/index.css  --minify  && webpack --config webpack.config.js && gulp"
   },
   "repository": {
     "type": "git",
@@ -57,6 +57,7 @@
     "gulp-add-src": "1.0.0",
     "gulp-babel": "8.0.0",
     "gulp-base64-inline": "1.0.6",
+    "gulp-clean-css": "^4.3.0",
     "gulp-concat": "2.6.1",
     "gulp-fa-minify": "^6.0.1",
     "gulp-include": "2.4.1",

tailwind.config.js

@@ -1,7 +1,10 @@
 const plugin = require("tailwindcss/plugin");
 
 module.exports = {
-  content: ["./app/**/*.{html,css,js}"],
+  content: [
+    "./app/**/*.{html,css,js}",
+    "./app/assets/javascripts/fontawesome.js"
+  ],
   theme: {
     container: {
       center: true,

tests/app/main/views/test_headers.py

@@ -100,7 +100,7 @@ def test_owasp_useful_headers_set(client, mocker, mock_get_service_and_organisat
             "public, max-age=31536000, immutable",
         ),
         (
-            "javascripts/main.min.js",
+            "javascripts/index.min.js",
             True,
             "public, max-age=31536000, immutable",
         ),

webpack.config.js

@@ -7,12 +7,7 @@ module.exports = {
   // mode: "development", //development
   mode: "production",
   entry: {
-    main: ["./app/assets/javascripts/index.js", "./app/assets/stylesheets/tailwind/style.css"],
-    branding_request: ["./app/assets/javascripts/branding_request.js"],
-    formValidateRequired: ["./app/assets/javascripts/formValidateRequired.js"],
-    sessionRedirect: ["./app/assets/javascripts/sessionRedirect.js"],
-    touDialog: ["./app/assets/javascripts/touDialog.js"],
-    templateFilters: ["./app/assets/javascripts/templateFilters.js"],
+    index: ["./app/assets/javascripts/index.js"],
     scheduler: {
       import: './app/assets/javascripts/scheduler/scheduler.js',
       library: {
@@ -44,17 +39,6 @@ module.exports = {
         ],
         use: ["style-loader", "css-loader"]
       },
-      {
-        test: /\.css$/i,
-        include: [
-          path.resolve(__dirname, "app/assets/stylesheets/tailwind")
-        ],
-        use: [
-          MiniCssExtractPlugin.loader,
-          "css-loader",
-          "postcss-loader"
-        ]
-      },
       { test: /\.(png|svg|jpg|gif|ico)$/, use: ["file-loader"] },
       {
         test: /.(js|jsx)$/,