fix: fail to get default style

Closes #176

assets/css/eureka.css

@@ -1,10 +1,10 @@
 /* Tailwind base - put variables under: tailwind.config.js */
-@import "node_modules/tailwindcss/base";
-@import "assets/css/base";
+@tailwind base;
+@import "base.css";
 /* Tailwind component classes registered by plugins*/
-@import "node_modules/tailwindcss/components";
+@tailwind components;
 /* Site Specific */
-@import "assets/css/prose";
-@import "assets/css/site";
+@import "prose.css";
+@import "site.css";
 /* Tailwind's utility classes - generated based on config file */
-@import "node_modules/tailwindcss/utilities";
+@tailwind utilities;

assets/css/highlightjs.css

@@ -0,0 +1,6 @@
+/* highlight.js */
+.hljs {
+  background-color: transparent !important;
+  color: var(--color-tertiary-text) !important;
+  padding: 0 !important;
+}

assets/css/postcss.config.js

@@ -1,16 +1,13 @@
-const themeDir = __dirname + '/../../';
+const themeDir = __dirname + "/../../";
 
-module.exports = {    
-    plugins: [        
-        require('postcss-import')({
-            path: [themeDir]
-            }), 
-        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
-        require('autoprefixer')({
-            path: [themeDir]
-        }),
-        require('cssnano')({
-            preset: 'default',
-        }),
-    ]
-}
+module.exports = {
+  plugins: [
+    require("tailwindcss")(themeDir + "assets/css/tailwind.config.js"),
+    require("autoprefixer")({
+      path: [themeDir],
+    }),
+    require("cssnano")({
+      preset: "default",
+    }),
+  ],
+};

exampleSite/config/_default/params.yaml

@@ -25,11 +25,11 @@ highlight:
 
   highlightjs:
     # highlight.js doesn't bundle every language. So please specify additional languages you want here.
-    # See https://github.com/highlightjs/cdn-release/tree/master/build/languages for available languages.
+    # See https://github.com/highlightjs/cdn-release/tree/main/build/languages for available languages.
     languages:
       - dart
-    # See https://github.com/highlightjs/cdn-release/tree/master/build/styles for available styles.
-    style: solarized-light
+    # See https://github.com/highlightjs/cdn-release/tree/main/build/styles for available styles.
+    style: base16/solarized-light
 
 math:
   handler: katex

layouts/_default/single.html

@@ -49,11 +49,11 @@ <h3>{{ i18n "seeAlso" }}</h3>
     {{ end }}
   </div>
 
-  {{/* highlight */}}
+  {{/* highlight.js */}}
   {{- if eq .Site.Params.highlight.handler "highlightjs" }}
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        hljs.initHighlightingOnLoad();
+        hljs.highlightAll();
       });
     </script>
   {{- end }}

layouts/partials/components/doc-layout.html

@@ -42,9 +42,9 @@
 
 <script>
     document.addEventListener('DOMContentLoaded', () => {
-        {{/* highlight */}}
+        {{/* highlight.js */}}
         {{- if eq .Site.Params.highlight.handler "highlightjs" }}
-        hljs.initHighlightingOnLoad();
+        hljs.highlightAll();
         {{- end }}
         changeSidebarHeight();
         switchDocToc();

layouts/partials/head.html

@@ -54,7 +54,7 @@
 
 <meta name="generator" content="Hugo Eureka {{ .Site.Data.eureka.version }}" />
 
-{{- $eurekaCSS := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | resources.ExecuteAsTemplate "css/eureka.css" . | minify | fingerprint "sha384" }}
+{{- $eurekaCSS := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js" "inlineImports" true) | resources.ExecuteAsTemplate "css/eureka.css" . | minify | fingerprint "sha384" }}
 <link rel="stylesheet" href="{{ $eurekaCSS.Permalink }}" integrity="{{ $eurekaCSS.Data.Integrity }}">
 
 {{- $eurekaJS := resources.Get "js/eureka.js" | resources.ExecuteAsTemplate "js/eureka.js" . | minify | fingerprint "sha384" }}
@@ -82,7 +82,7 @@
 {{- $highlightCSS := resources.Get "css/syntax.css" | minify | fingerprint "sha384" }}
 <link rel="stylesheet" href="{{ $highlightCSS.Permalink }}" integrity="{{ $highlightCSS.Data.Integrity }}" media="print" onload="this.media='all';this.onload=null">
 {{- else if eq .Site.Params.highlight.handler "highlightjs" }}
-{{- $highlightjsStyle := .Site.Params.highlight.highlightjs.style | default "solarized-light" }}
+{{- $highlightjsStyle := .Site.Params.highlight.highlightjs.style | default "base16/solarized-light" }}
 <link rel="stylesheet" href="{{ printf $assets.highlightjs.css.url $assets.highlightjs.version $highlightjsStyle }}"
   {{ with $assets.highlightjs.css.sri }} integrity="{{ . }}" {{ end }} media="print"
   onload="this.media='all';this.onload=null" crossorigin>
@@ -92,6 +92,8 @@
   <script defer src="{{ printf $assets.highlightjs.languages.url $assets.highlightjs.version . }}"
     {{ with $assets.highlightjs.languages.sri }} integrity="{{ . }}" {{ end }} crossorigin></script>
 {{- end }}
+{{- $highlightjsCSS := resources.Get "css/highlightjs.css" | minify | fingerprint "sha384" }}
+<link rel="stylesheet" href="{{ $highlightjsCSS.Permalink }}" integrity="{{ $highlightjsCSS.Data.Integrity }}">
 {{- end }}
 
 {{ $fontawesomeJS := resources.Get "js/fontawesome.js" | resources.ExecuteAsTemplate "js/fontawesome.js" . | js.Build (dict "minify" true) | minify | fingerprint "sha384" }}

package.json

@@ -11,7 +11,6 @@
         "cssnano": "^5.1.1",
         "postcss": "^8.4.8",
         "postcss-cli": "^9.1.0",
-        "postcss-import": "^14.0.2",
         "prettier": "^2.5.1",
         "prettier-plugin-go-template": "^0.0.11",
         "prettier-plugin-tailwindcss": "^0.1.8",