refactor: migrate part of the sass compilation to vite (#283)

* refactor: migrate part of the sass compilation to vite now `bundled` option is deprecated * fix: update build script * chore: add a “type” field to the package.json file to resolve Vite’s complaints about CommonJS modules.
2026-04-14 10:09:31 -07:00 · 2024-02-22 23:44:16 +08:00
parent 53a44776de
commit 875113448b
8 changed files with 82 additions and 25 deletions
--- a/assets/ts/main.tsx
+++ b/assets/ts/main.tsx
@@ -13,6 +13,8 @@ import { render } from 'solid-js/web'
 import { getImageJSON } from './resources'
 import { StateProvider } from './state'

+import '../scss/style.scss'
+
 /**
 * interfaces
 */
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -1,9 +1,5 @@
 # description of the site (will be placed in meta)
 description = "Bridget is a minimal Hugo theme designed for photographers/visual artists."
-# use bundled js and css
-# * if you want to build the js and css from scratch, set this to false and run `npm install` and `npm run build`
-# * tldr: set this to false if you want to develop and edit the js and css
-bundled = false

 # whether to use favicon resource links
 # generate these with https://realfavicongenerator.net
--- a/layouts/partials/head/link.html
+++ b/layouts/partials/head/link.html
@@ -7,16 +7,8 @@
 {{- $style = dict "Context" . "ToCSS" $options "Inline" true | merge $style -}}
 {{- partial "plugin/style.html" $style -}}

-{{/* main style */}}
-{{- if (site.Params.bundled | default true) -}}
-  {{- $style := dict "Link" "/bundled/css/style.min.css" "Defer" true -}}
+{{- $style := dict "Link" "/bundled/css/main.css" "Defer" true -}}
 {{- partial "plugin/style.html" $style -}}
-{{- else -}}
-  {{- $style := dict "Source" "scss/style.scss" "Fingerprint" $fingerprint -}}
-  {{- $options := dict "targetPath" "css/style.css" "enableSourceMap" true "includePaths" (slice "node_modules") -}}
-  {{- $style = dict "Context" . "ToCSS" $options "Minify" hugo.IsProduction "Defer" true | merge $style -}}
-  {{- partial "plugin/style.html" $style -}}
-{{- end -}}

 {{/* fuck safari */}}
 <script>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
  "name": "bridget",
  "version": "v1.0.0",
+  "type": "module",
  "description": "bridget theme source file",
  "packageManager": "pnpm@8.10.2",
  "private": true,
@@ -10,7 +11,7 @@
    "lint": "eslint . --fix && prettier --write .",
    "lint:check": "eslint . && prettier . --check",
    "dev": "run-p vite:dev hugo:dev",
-    "build": "rm -f ./static/bundled/js/* && run-s vite:build hugo:build && yes | cp -rf ./exampleSite/public/css/*.css ./static/bundled/css",
+    "build": "run-s vite:build hugo:build",
    "server": "run-p vite:server hugo:server",
    "vite:build": "vite build --no-watch --minify terser",
    "vite:server": "vite build --minify terser",
@@ -54,6 +55,7 @@
    "prettier": "3.2.5",
    "prettier-plugin-go-template": "^0.0.15",
    "prettier-plugin-organize-imports": "^3.2.4",
+    "sass": "^1.71.1",
    "terser": "^5.27.0",
    "typescript": "^5.3.3",
    "vite": "^5.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,6 +67,9 @@ devDependencies:
  prettier-plugin-organize-imports:
    specifier: ^3.2.4
    version: 3.2.4(prettier@3.2.5)(typescript@5.3.3)
+  sass:
+    specifier: ^1.71.1
+    version: 1.71.1
  terser:
    specifier: ^5.27.0
    version: 5.27.0
@@ -75,7 +78,7 @@ devDependencies:
    version: 5.3.3
  vite:
    specifier: ^5.1.2
-    version: 5.1.2(terser@5.27.0)
+    version: 5.1.2(sass@1.71.1)(terser@5.27.0)
  vite-plugin-solid:
    specifier: ^2.10.0
    version: 2.10.0(solid-js@1.8.14)(vite@5.1.2)
@@ -962,6 +965,14 @@ packages:
      color-convert: 2.0.1
    dev: true

+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
  /argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
    dev: true
@@ -1063,6 +1074,11 @@ packages:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
    dev: true

+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
    dependencies:
@@ -1142,6 +1158,21 @@ packages:
      supports-color: 7.2.0
    dev: true

+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
  /color-convert@1.9.3:
    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
    dependencies:
@@ -1986,6 +2017,10 @@ packages:
    engines: {node: '>= 4'}
    dev: true

+  /immutable@4.3.5:
+    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+    dev: true
+
  /import-fresh@3.3.0:
    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
    engines: {node: '>=6'}
@@ -2041,6 +2076,13 @@ packages:
      has-bigints: 1.0.2
    dev: true

+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
  /is-boolean-object@1.1.2:
    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
    engines: {node: '>= 0.4'}
@@ -2338,6 +2380,11 @@ packages:
      validate-npm-package-license: 3.0.4
    dev: true

+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /npm-run-all@4.1.5:
    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
    engines: {node: '>= 4'}
@@ -2575,6 +2622,13 @@ packages:
      path-type: 3.0.0
    dev: true

+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
  /regexp.prototype.flags@1.5.0:
    resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
    engines: {node: '>= 0.4'}
@@ -2661,6 +2715,16 @@ packages:
      is-regex: 1.1.4
    dev: true

+  /sass@1.71.1:
+    resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.5
+      source-map-js: 1.0.2
+    dev: true
+
  /semver@5.7.2:
    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
    hasBin: true
@@ -3049,13 +3113,13 @@ packages:
      merge-anything: 5.1.7
      solid-js: 1.8.14
      solid-refresh: 0.7.4(solid-js@1.8.14)
-      vite: 5.1.2(terser@5.27.0)
+      vite: 5.1.2(sass@1.71.1)(terser@5.27.0)
      vitefu: 0.2.5(vite@5.1.2)
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /vite@5.1.2(terser@5.27.0):
+  /vite@5.1.2(sass@1.71.1)(terser@5.27.0):
    resolution: {integrity: sha512-uwiFebQbTWRIGbCaTEBVAfKqgqKNKMJ2uPXsXeLIZxM8MVMjoS3j0cG8NrPxdDIadaWnPSjrkLWffLSC+uiP3Q==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
@@ -3086,6 +3150,7 @@ packages:
      esbuild: 0.19.12
      postcss: 8.4.35
      rollup: 4.12.0
+      sass: 1.71.1
      terser: 5.27.0
    optionalDependencies:
      fsevents: 2.3.3
@@ -3099,7 +3164,7 @@ packages:
      vite:
        optional: true
    dependencies:
-      vite: 5.1.2(terser@5.27.0)
+      vite: 5.1.2(sass@1.71.1)(terser@5.27.0)
    dev: true

  /which-boxed-primitive@1.0.2:
--- a/static/bundled/css/main.css
+++ b/static/bundled/css/main.css
--- a/static/bundled/css/style.min.css
+++ b/static/bundled/css/style.min.css
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,17 +4,17 @@ import solidPlugin from 'vite-plugin-solid'
 export default defineConfig({
  plugins: [solidPlugin()],
  build: {
-    outDir: './static',
+    outDir: './static/bundled',
    watch: {
-      include: 'assets/ts/**'
+      include: 'assets/**'
    },
    rollupOptions: {
      input: './assets/ts/main.tsx',
      output: {
-        dir: './static/bundled/js',
        format: 'es',
-        entryFileNames: '[name].js',
-        chunkFileNames: '[hash:6].js',
+        entryFileNames: 'js/[name].js',
+        chunkFileNames: 'js/[hash:6].js',
+        assetFileNames: '[ext]/[name].[ext]',
        compact: true
      }
    },