feat: update css processing pipe use postcss

.github/workflows/deploy.yaml

@@ -49,7 +49,7 @@ jobs:
           HUGO_ENVIRONMENT: production
           HUGO_ENV: production
         run: |
-          cd exampleSite && hugo --minify --gc --themesDir ../.. \
+          hugo -s exampleSite --minify --gc --themesDir ../.. \
             --baseURL "${{ steps.pages.outputs.base_url }}/"
 
       - name: Upload artifact

README.md

@@ -104,12 +104,13 @@ link = 'https://www.facebook.com/'
 This theme use Tailwind CSS for styling. If you want to make some changes,
 use `pnpm install` to install dependencies.
 
-* Development: `npm run dev`
-* Production: `npm run build`
+The CSS process is inspired by [hugo-tailwindcss-starter-theme](https://github.com/dirkolbrich/hugo-tailwindcss-starter-theme).
 
-Test example site: `cd exampleSite && hugo serve --gc --themesDir ../..`
+ * Development: `npm run dev`, this will generate css for theme users.
+
+Test example site: `HUGO_THEME_DEVELOPMENT=true hugo server -s exampleSite --gc --themesDir=../..`
 (exampleSite is fetched from https://github.com/gohugoio/hugoBasicExample
-with some modifications)
+with some modifications).
 
 ### Add new icons
 

config/_default/hugo.toml

@@ -3,6 +3,10 @@ languageCode = 'en'
 title = 'My New Hugo Site'
 hasCJKLanguage = true
 
+[build]
+  [build.buildStats]
+    enable = true
+
 [markup.goldmark]
   [markup.goldmark.renderer]
     unsafe = true

layouts/partials/css.html

@@ -0,0 +1,13 @@
+{{- $styles := resources.Get "css/index.css" -}}
+{{- $env := getenv "HUGO_THEME_DEVELOPMENT" -}}
+
+{{- if eq $env "true" }}
+  {{- $styles = resources.Get "css/main.css" | postCSS (dict "config" "./postcss.config.js") -}}
+{{ end -}}
+
+{{- if .Site.IsServer }}
+  {{- $styles = $styles | resources.ExecuteAsTemplate (printf "css/main.dev.%v.css" now.UnixMilli) . -}}
+{{ else }}
+  {{- $styles = $styles | minify | fingerprint | resources.PostProcess -}}
+{{ end -}}
+<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

layouts/partials/head.html

@@ -15,9 +15,7 @@
 <link rel="canonical" href="{{ .Permalink }}" />
 
 <link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}" />
-
-<!-- Theme CSS (/static/main.css) -->
-<link rel="stylesheet" href="{{ "main.css" | relURL }}" />
+{{ partialCached "css.html" . }}
 
 {{ if .Params.katex}}{{ partial "katex.html" . }}{{ end }}
 

package.json

@@ -1,10 +1,12 @@
 {
   "scripts": {
-    "dev": "npx tailwindcss -i assets/css/main.css -o ./static/main.css --watch",
-    "build": "npx tailwindcss -i assets/css/main.css -o ./static/main.css --minify"
+    "dev": "npx tailwindcss -i assets/css/main.css -o assets/css/output.css --watch"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^10.1.0",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "tailwindcss": "^3.3.3"