Feature: css cache busting

.github/workflows/pr-check-links.yaml

@@ -47,7 +47,6 @@ jobs:
       - name: Minify assets
         run: |
           cd sites/${{ matrix.site }}
-          npm run build:assets
 
       - name: Check links in Markdown
         run: |

.platform/applications.yaml

@@ -30,7 +30,6 @@
             npm install
             npm run build
             ./build_docs.sh
-            npm run build:assets
         deploy: |
             cd $SITE_DIR
             ./deploy.sh
@@ -96,7 +95,6 @@
             npm install
             npm run build
             ./build_docs.sh
-            npm run build:assets
         deploy: |
             cd $SITE_DIR
             ./deploy.sh

CONTRIBUTING.md

@@ -171,8 +171,6 @@ To ensure the docs work smoothly, a few checks run on each pull request:
   npm run build:search
   # Build HTML pages to check
   hugo
-  # Build production JavaScript and CSS files
-  npm run build:assets
   # Run the check
   ./bin/htmltest
   ```

build_local.sh

@@ -17,7 +17,7 @@ clean_file () {
         echo "$FILE exists. Removing..."
         rm $FILE
         echo "Done."
-    else 
+    else
         echo "$FILE does not exist. All is well."
     fi
 }
@@ -36,7 +36,6 @@ npm install
 npm run build
 npm run build:search
 hugo
-npm run build:assets
 
 clear
 
@@ -49,4 +48,4 @@ Verify the resulting build by running the command
 
 python3 -m http.server 8888 -d sites/$BUILD_DIR/public
 
-"
+"

sites/platform/package.json

@@ -11,7 +11,6 @@
   "author": "Platform.sh",
   "scripts": {
     "build": "npm run fetch-files && npm run registry-files",
-    "build:assets": "postcss --use cssnano --no-map --output 'public/asciinema/asciinema-player-mini.css' 'public/asciinema/asciinema-player.css' && postcss --use cssnano --no-map --output 'public/css/main-mini.css' 'public/css/main.css' && postcss --use cssnano --no-map --output 'public/css/syntax-highlighting-mini.css' 'public/css/syntax-highlighting.css' && postcss --use cssnano --no-map --output 'public/css/vendor-mini.css' 'public/css/vendor.css'",
     "build:search": "npm run build --workspace docs-search-input",
     "dev": "npm run fetch-files && npm run registry-files",
     "fetch-files": "node utils/fetch-examples.mjs && node utils/fetchTemplates.mjs",
@@ -28,6 +27,7 @@
     "p-limit": "^4.0.0",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
+    "postcss-import": "^16.1.0",
     "pshregistry-parser": "^1.5.7",
     "remark": "^14.0.2",
     "remark-cli": "^11.0.0",

sites/upsun/package.json

@@ -11,7 +11,6 @@
   "author": "Platform.sh",
   "scripts": {
     "build": "npm run fetch-files && npm run registry-files",
-    "build:assets": "postcss --use cssnano --no-map --output 'public/asciinema/asciinema-player-mini.css' 'public/asciinema/asciinema-player.css' && postcss --use cssnano --no-map --output 'public/css/main-mini.css' 'public/css/main.css' && postcss --use cssnano --no-map --output 'public/css/syntax-highlighting-mini.css' 'public/css/syntax-highlighting.css' && postcss --use cssnano --no-map --output 'public/css/vendor-mini.css' 'public/css/vendor.css'",
     "build:search": "npm run build --workspace docs-search-input",
     "dev": "npm run fetch-files && npm run registry-files",
     "fetch-files": "node utils/fetch-examples.mjs && node utils/fetchTemplates.mjs",
@@ -26,6 +25,7 @@
     "p-limit": "^4.0.0",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
+    "postcss-import": "^16.1.0",
     "pshregistry-parser": "^1.5.7",
     "remark": "^14.0.2",
     "remark-cli": "^11.0.0",

tests.sh

@@ -17,15 +17,12 @@ npm run build:search
 # 3. Build Hugo site
 hugo
 
-# 4. Minify assets
-npm run build:assets
-
-# 5. Check links in Markdown
+# 4. Check links in Markdown
 curl https://htmltest.wjdp.uk | bash
 bin/htmltest
 
-# 6. Linting (Lint markdown)
+# 5. Linting (Lint markdown)
 npm run lint:markdown
 
-# 7. Linting (Lint prose)
+# 6. Linting (Lint prose)
 vale src

themes/psh-docs/assets/css/main.css

@@ -1,3 +1,5 @@
+/* Relative to site directory */
+@import './node_modules/asciinema-player/dist/bundle/asciinema-player.css';
 /* Base TailwindCSS styles */
 /* https://tailwindcss.com/docs/functions-and-directives#tailwind */
 

themes/psh-docs/layouts/partials/head/css.html

@@ -1,31 +1,24 @@
-{{ $productionSuffix := "" }}
-{{ if hugo.IsProduction }}
-  {{ $productionSuffix = "-mini" }}
-{{ end }}
-
+<!-- stylesheets using `minify` will be minified in production -->
 <!-- Vendor overrides -->
 {{ if eq .Site.Params.theme.use_vendor true }}
-    <link rel="stylesheet" href="{{ printf "/css/vendor%s.css?version=%s" $productionSuffix $.Site.Params.version }}">
+  {{ $vendorCSS := resources.Get "css/vendor.css" | postCSS | fingerprint }}
+  <link rel="stylesheet" href="{{ printf "%s?version=%s" $vendorCSS.RelPermalink $.Site.Params.version }}">
 {{ end }}
 
-
-<!-- Asciinema player -->
-<link rel="stylesheet" href="{{ printf "/asciinema/asciinema-player%s.css?version=%s"  $productionSuffix $.Site.Params.version }}">
+<!-- Asciinema player: moved to tailwind config.css -->
 
 <!-- Syntax highlighting -->
-<link rel="stylesheet" href="{{ printf "/css/syntax-highlighting%s.css?version=%s"  $productionSuffix $.Site.Params.version }}">
+{{ $syntaxHighlightingCSS := resources.Get "css/vendor.css" | postCSS | fingerprint }}
+<link rel="stylesheet" href="{{ printf "%s?version=%s" $syntaxHighlightingCSS.RelPermalink $.Site.Params.version }}">
 
 <!-- TailwindCSS files -->
-{{ $style := resources.Get "css/main.css" | resources.PostCSS }}
-{{ $style = $style.RelPermalink }}
-{{ if hugo.IsProduction }}
-  {{ $style = "/css/main-mini.css" }}
-{{ end }}
-<link rel="stylesheet" href="{{ printf "%s?version=%s" $style $.Site.Params.version }}">
+{{ $mainStyle := resources.Get "css/main.css" | postCSS | fingerprint }}
+<link rel="stylesheet" href="{{ printf "%s?version=%s" $mainStyle.RelPermalink $.Site.Params.version }}">
 
 <!-- Print stylesheets -->
 {{ with .File }}
   {{- if eq .Dir "security/transparency/" -}}
-  <link rel="stylesheet" media="print" href="{{ printf "styles/print/transparency-reports.css?version=%s" $.Site.Params.version | relURL}}">
+    {{ $transparencyReportsCSS := resources.Get "css/print/transparency-reports.css" | postCSS | fingerprint }}
+    <link rel="stylesheet" href="{{ printf "%s?version=%s" $transparencyReportsCSS.RelPermalink $.Site.Params.version }}">
   {{- end -}}
 {{ end }}

themes/psh-docs/postcss.config.js

@@ -2,9 +2,20 @@ const themeDir = '../../themes';
 
 module.exports = {
   plugins: [
+    require('postcss-import'),
     require('tailwindcss')(themeDir + '/psh-docs/tailwind.config.js'),
     require('autoprefixer')({
       path: [themeDir]
     }),
+    ...process.env.HUGO_ENVIRONMENT === 'production'
+      ? [
+        require('cssnano')({
+          preset: ['default', {
+            discardComments: { removeAll: true }, // Ensure all comments are removed
+            normalizeWhitespace: true, // Ensures that whitespace is minimized
+          }]
+        })
+      ]
+      : []
   ]
-}
+}

themes/psh-docs/tailwind.config.js

@@ -165,4 +165,4 @@ module.exports = {
   plugins: [
     require("@tailwindcss/typography"),
   ],
-}
+}