feat(ui): use CSS layer to let user customize app - WF-57

We want the user to be able to customize any style using
`import_stylesheet` feature. But, actually, he needs to use `!important`
everywhere to makes his rules have more weight.

The solution is to use CSS cascade layers to redefine the priority of
rules easily. We can move all Writer Framework CSS into a layer `wf`.
This makes other CSS rules have more priority by default.

So I just installed PostCSS and a plugin `postcss-assign-layer`. This
automates surrounding our styles by layers.

src/ui/package.json

@@ -59,6 +59,8 @@
 		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-storybook": "0.8.0",
 		"eslint-plugin-vue": "^9.28.0",
+		"postcss": "^8.4.49",
+		"postcss-assign-layer": "^0.4.0",
 		"prettier": "3.2.5",
 		"storybook": "8.0.5",
 		"vite": "^5.2.7",

src/ui/vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from "url";
 import { defineConfig, UserConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import writerPlugin from "./viteWriterPlugin";
+import postcssAssignLayer from "postcss-assign-layer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +12,16 @@ export default defineConfig({
 	define: {
 		WRITER_LIVE_CCT: JSON.stringify("no"),
 	},
+	css: {
+		postcss: {
+			plugins: [
+				// we move all our CSS into Cascade layers to let the user's stylesheets have more priority
+				postcssAssignLayer([
+					{ include: "**/*/*.css", layerName: "wf" },
+				]),
+			],
+		},
+	},
 	build: {
 		outDir: "../writer/static",
 		emptyOutDir: true,