Polyfill for light-dark()

getkirby · Nov 29, 2024 · 1f288b0 · 1f288b0
1 parent 0945cb8
commit 1f288b0
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 0 deletions.
diff --git a/panel/package-lock.json b/panel/package-lock.json
diff --git a/panel/package.json b/panel/package.json
@@ -26,6 +26,7 @@
 		"vue": "^2.7.16"
 	},
 	"devDependencies": {
+		"@csstools/postcss-light-dark-function": "^2.0.7",
 		"@vitejs/plugin-vue2": "^2.3.1",
 		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",

diff --git a/panel/vite.config.mjs b/panel/vite.config.mjs
@@ -6,6 +6,7 @@ import vue from "@vitejs/plugin-vue2";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 import externalize from "rollup-plugin-external-globals";
 import kirby from "./scripts/vite-kirby.mjs";
+import postcssLightDarkFunction from "@csstools/postcss-light-dark-function";
 
 /**
  * Returns all aliases used in the project
@@ -122,6 +123,11 @@ export default defineConfig(({ mode }) => {
 				}
 			}
 		},
+		css: {
+			postcss: {
+				plugins: [postcssLightDarkFunction()]
+			}
+		},
 		optimizeDeps: {
 			entries: "src/**/*.{js,vue}",
 			exclude: ["vitest", "vue"],