From ddfae0b38f6c8947e1513afdbc48f714e768da66 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 24 Dec 2024 10:13:28 +0100
Subject: [PATCH] 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.
---
 package-lock.json     | 54 +++++++++++++++++++++++++++++++++++--------
 src/ui/package.json   |  2 ++
 src/ui/vite.config.ts | 11 +++++++++
 3 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 649fd5198..fe541b6e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5227,6 +5227,20 @@
 				}
 			}
 		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+			"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"estree-walker": "^2.0.1",
+				"picomatch": "^2.2.2"
+			},
+			"engines": {
+				"node": ">= 8.0.0"
+			}
+		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
 			"version": "4.14.0",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz",
@@ -18537,7 +18551,9 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.0.0",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
@@ -18695,9 +18711,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.38",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+			"version": "8.4.49",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+			"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -18712,15 +18728,32 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.0",
-				"source-map-js": "^1.2.0"
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
 			},
 			"engines": {
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-assign-layer": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/postcss-assign-layer/-/postcss-assign-layer-0.4.0.tgz",
+			"integrity": "sha512-ART9ENWnvEyW3yyfJe83nz5j/IsbQHBgSMsUNFmC/+6zy0uC9YTriHKV6TEjOOHXRzXS2yNPj0ksvYkEwwkv5w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^4.2.1"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.0"
+			}
+		},
 		"node_modules/postcss-selector-parser": {
 			"version": "6.0.15",
 			"dev": true,
@@ -20560,9 +20593,10 @@
 			}
 		},
 		"node_modules/source-map-js": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -23582,6 +23616,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",
diff --git a/src/ui/package.json b/src/ui/package.json
index 9787cafb2..8bdc95057 100644
--- a/src/ui/package.json
+++ b/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",
diff --git a/src/ui/vite.config.ts b/src/ui/vite.config.ts
index b4e58235a..f6d297770 100644
--- a/src/ui/vite.config.ts
+++ b/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,