Remove PostCSS and move to Lightning CSS (#3820)

* Remove postcss and move to lightningcss

* Remove non-standard `size` property

build.js

@@ -4,9 +4,9 @@
 // Build JS and CSS using esbuild and PostCSS
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
+import browserslist from 'browserslist';
 import esbuild from 'esbuild';
-import postcss from 'postcss';
-import postcssConfig from './postcss.config.js';
+import * as lightningcss from 'lightningcss';
 
 // Packages to build but exclude from bundle
 const externalPackages = ['chart.js/auto', 'alpinejs/dist/cdn.min.js'];
@@ -69,11 +69,39 @@ async function processCSS(inputFile, outputFile) {
 	try {
 		await ensureDir(path.dirname(outputFile));
 		const css = await fs.readFile(inputFile);
-		const result = await postcss(postcssConfig.plugins).process(css, {
-			from: inputFile,
-			to: outputFile,
+		const bundle = await lightningcss.bundleAsync({
+			filename: inputFile,
+			sourceMap: true,
+			code: Buffer.from(css),
+			minify: true,
+			targets: lightningcss.browserslistToTargets(browserslist()),
+			drafts: { customMedia: true, nesting: true },
+			visitor: {
+				Url: (node) => {
+					// Fix relative paths for webfonts
+					if (node.url.startsWith('../webfonts/')) {
+						return {
+							url: node.url.replace('../webfonts/', '/webfonts/'),
+							loc: node.loc,
+						};
+					}
+					return node;
+				},
+			},
+			resolver: {
+				resolve(specifier, from) {
+					if (!specifier.endsWith('.css')) {
+						specifier += '.css';
+					}
+					if (specifier.startsWith('node:')) {
+						return `node_modules/${specifier.replace('node:', '')}`;
+					}
+					return `${path.dirname(from)}/${specifier}`;
+				},
+			},
 		});
-		await fs.writeFile(outputFile, result.css);
+		await fs.writeFile(outputFile, bundle.code);
+		await fs.writeFile(`${outputFile}.map`, bundle.map);
 		console.log(`✅ CSS build completed for ${inputFile}`);
 	} catch (error) {
 		console.error(`❌ Error processing CSS for ${inputFile}:`, error);

package.json

@@ -27,20 +27,16 @@
 	},
 	"devDependencies": {
 		"@prettier/plugin-php": "^0.19.6",
-		"cssnano": "^6.0.1",
+		"browserslist": "^4.21.9",
 		"esbuild": "^0.18.13",
 		"eslint": "^8.45.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-editorconfig": "^4.0.3",
 		"eslint-plugin-import": "^2.27.5",
 		"husky": "^8.0.3",
+		"lightningcss": "^1.21.5",
 		"lint-staged": "^13.2.3",
 		"markdownlint-cli2": "^0.8.1",
-		"postcss": "^8.4.26",
-		"postcss-import": "^15.1.0",
-		"postcss-path-replace": "^1.0.4",
-		"postcss-preset-env": "^9.0.0",
-		"postcss-size": "^4.0.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-nginx": "^1.0.3",
 		"prettier-plugin-sh": "^0.12.8",

postcss.config.js

@@ -1,24 +0,0 @@
-import postcssImport from 'postcss-import';
-import postcssPathReplace from 'postcss-path-replace';
-import postcssSize from 'postcss-size';
-import cssnano from 'cssnano';
-import postcssPresetEnv from 'postcss-preset-env';
-
-export default {
-	plugins: [
-		postcssImport,
-		postcssPathReplace({
-			publicPath: '/webfonts/',
-			matched: '../webfonts/',
-			mode: 'replace',
-		}),
-		postcssSize,
-		cssnano,
-		postcssPresetEnv({
-			autoprefixer: {
-				flexbox: 'no-2009',
-			},
-			stage: 1,
-		}),
-	],
-};

web/css/src/themes/default.css

@@ -1,6 +1,6 @@
-@import url("normalize.css");
-@import url("@fortawesome/fontawesome-free/css/fontawesome");
-@import url("@fortawesome/fontawesome-free/css/solid");
+@import url("node:normalize.css/normalize.css");
+@import url("node:@fortawesome/fontawesome-free/css/fontawesome");
+@import url("node:@fortawesome/fontawesome-free/css/solid");
 @import url("../dependencies/animate");
 @import url("../media_queries");
 @import url("../fonts");
@@ -75,7 +75,8 @@
 	border-bottom: 1px solid #fff;
 	position: fixed;
 	display: flex;
-	size: 100% 40px;
+	width: 100%;
+	height: 40px;
 	z-index: 2;
 	top: 0;
 }
@@ -1554,7 +1555,8 @@
 .password-meter-input {
 	appearance: none;
 	display: block;
-	size: 100%;
+	width: 100%;
+	height: 100%;
 	background: #e7e7e7;
 
 	&[value="1"] {
@@ -2037,7 +2039,8 @@
 		background-size: 22px auto;
 		background-repeat: no-repeat;
 		background-position: center;
-		size: 22px 100%;
+		width: 22px;
+		height: 100%;
 		position: absolute;
 		top: 0;
 		right: 15px;
@@ -2375,7 +2378,8 @@
 
 	& .fas {
 		flex-shrink: 0;
-		size: 32px;
+		width: 32px;
+		height: 32px;
 		font-size: 1.3rem;
 		font-weight: 600;
 		line-height: 30px;