Migrating to using LightningCSS

.eslintrc

@@ -7,10 +7,10 @@
   },
   "parserOptions": {
     "sourceType": "module",
-    "ecmaVersion": 8
+    "ecmaVersion": "latest"
   },
   "extends": [
-    "eslint:recommended", 
+    "eslint:recommended",
     "prettier",
     "plugin:prettier/recommended"
   ],

build/css.mk

@@ -16,8 +16,10 @@ dist/css/min/black-highlighter.min.css: src/css/black-highlighter.css $(BUILD_SO
 		build/install.sh 644 $< dist/css/black-highlighter-imports.css
 		bun postcss dist/css/black-highlighter-imports.css --config build --env development -o dist/css/black-highlighter.css
 		bun postcss dist/css/black-highlighter-imports.css --config build --env production -o $@
+		touch $@
 
 dist/css/min/normalize.min.css: src/css/normalize.css $(BUILD_SOURCES) node_modules
 		build/install.sh 644 $< dist/css/normalize.css
 		bun postcss dist/css/normalize.css --config build --env development -r
 		bun postcss dist/css/normalize.css --config build --env production -o $@
+		touch $@

build/images.mk

@@ -6,18 +6,18 @@ IMAGE_OPTIMIZE_SOURCES := $(wildcard src/img/*)
 IMAGE_OPTIMIZE_OUTPUTS := $(patsubst src/img/%,dist/img/%,$(IMAGE_OPTIMIZE_SOURCES))
 
 # Images to copy
-dist/img/page-toolbar-icons/%: src/img/page-toolbar-icons/%
+dist/img/page-toolbar-icons/%: src/img/page-toolbar-icons/% $(IMAGE_COPY_SOURCES)
 	build/install.sh 644 $< $@
 
-dist/img/text-editor-icons/%: src/img/text-editor-icons/%
+dist/img/text-editor-icons/%: src/img/text-editor-icons/% $(IMAGE_COPY_SOURCES)
 	build/install.sh 644 $< $@
 
-dist/img/social-icons/%: src/img/social-icons/%
+dist/img/social-icons/%: src/img/social-icons/% $(IMAGE_COPY_SOURCES)
 	build/install.sh 644 $< $@
 
 # Images to optimize
-dist/img/%.png: src/img/%.png node_modules
+dist/img/%.png: src/img/%.png $(IMAGE_OPTIMIZE_SOURCES) node_modules
 	bun svgo $< -o $@
 
-dist/img/%.svg: src/img/%.svg node_modules
+dist/img/%.svg: src/img/%.svg $(IMAGE_OPTIMIZE_SOURCES) node_modules
 	bun svgo $< -o $@

build/meta.mk

@@ -27,4 +27,3 @@ $(DIRECTORIES):
 # bun rules
 node_modules: package.json bun.lockb
 	bun install
-	touch node_modules

build/postcss.config.mjs

@@ -1,104 +1,71 @@
 import fs from "fs";
 import path from "path";
-import globalData from "@csstools/postcss-global-data";
-import stylelint from "stylelint";
-import postcssImport from "postcss-import";
+import postcss from "postcss";
 import postcssMixins from "postcss-mixins";
-import presetEnv from "postcss-preset-env";
-import autoprefixer from "autoprefixer";
-import url from "postcss-url";
-import csso from "postcss-csso";
+import stylelint from "stylelint";
+import postcssLightningcss from "postcss-lightningcss";
 import reporter from "postcss-reporter";
-/* Disabling LightningCSS until its functionality is a little more robust
-import lightningCSS from "postcss-lightningcss";
-*/
+import { bundle } from "lightningcss";
 
-export default (ctx) => {
+const lightningcssBundle = (opts = {}) => {
+	return {
+		postcssPlugin: "lightningcss-bundle",
+		Once(root, { result }) {
+			const filename = opts.filename || result.opts.from;
+			const { code } = bundle({
+				filename,
+				...opts.lightningcssOptions
+			});
+
+			root.removeAll();
+			const parsedCode = postcss.parse(code);
+			root.append(parsedCode);
+		}
+	};
+};
 
+export default (ctx) => {
 	const nodeEnv = ctx.env;
 	const dev = nodeEnv === "development";
-        const browserslistpath = path.resolve(ctx.file.dirname, "../../.browserslistrc");
-	const browserslist = fs.readFileSync(browserslistpath, "utf8").trim();
 
-	const globalDataOptions = {
-		files: [ path.join( ctx.file.dirname,"/parts/root.css" ) ]
-	};
+	const browserslistpath = path.resolve(ctx.file.dirname, "../../.browserslistrc");
+	const browserslist = fs.readFileSync(browserslistpath, "utf8").trim();
 
 	const stylelintOptions = {
 		configFile: path.join(ctx.cwd, "/.stylelintrc"),
 		fix: true
 	};
 
 	const mixinOptions = {
-		mixinsDir: path.join( ctx.file.dirname,"/parts" )
-	};
-
-	const presetEnvOptions = ({
-		autoprefixer: false,
-		preserve: false,
-		browsers: browserslist,
-		features: {
-			"custom-properties": false,
-			"custom-media-queries": true,
-			"media-query-ranges": true,
-			"nesting-rules": true,
-			"has-pseudo-class": true,
-			"is-pseudo-class": false
-		}
-	});
-
-	const urlOptions = ({
-		url: "rebase"
-	});
-
-	const fileImportOptions = {
-		plugins: [
-			globalData(globalDataOptions),
-			presetEnv(presetEnvOptions),
-			url(urlOptions),
-			postcssMixins(mixinOptions),
-			autoprefixer
-		]
+		mixinsDir: path.join(ctx.file.dirname, "/parts")
 	};
 
-	const cssoOptions = ({
-		restructure: !dev,
-		forceMediaMerge: !dev,
-		sourceMap: true
-	});
+	lightningcssBundle.postcss = true;
 
-	/* 	==============================
-			LIGHTNING CSS DISABLED FOR NOW
-			==============================
-	const lightningcssOptions = ({
-		filename: path.join(ctx.file.dirname,"/",ctx.file.basename),
+	const lightningcssOptions = {
 		browsers: browserslist,
 		lightningcssOptions: {
-			projectRoot: path.join( ctx.file.dirname,"/parts" ),
 			minify: !dev,
 			sourceMap: true,
-			errorRecovery: false,
+			cssModules: false,
 			drafts: {
 				nesting: true,
 				customMedia: true
 			},
 			visitor: {
-				/* Assures relative URL links point to the correct files on /dist */
-				/* Url(url) {
-					let urlArray = url.url.split("/").reverse();
-					if (url.url.includes("../")) {
-						dev ? [
-							url.url = `../${urlArray[1]}/${urlArray[0]}`
-						] : [
-							url.url = `../../${urlArray[1]}/${urlArray[0]}`
-						];
+				Url(url) {
+					if (!dev) {
+						url.url = url.url;
+					} else {
+						if (url.url.startsWith("../../")) {
+							url.url = url.url.replace("../../", "../");
+						}
 					}
-				return url;
+					return url;
 				}
 			}
-		}
-	});
-	*/
+		},
+	};
 
 	const reporterOptions = {
 		formatter: input => {
@@ -109,28 +76,14 @@ export default (ctx) => {
 
 	let plugins = [];
 
-	switch(nodeEnv) {
-		/*
-		case "lightningcss":
-			plugins = [
-				postcssImport(fileImportOptions),
-				lightningcss(lightningcssOptions),
-				reporter(reporterOptions)
-			];
-			break;
-		*/
+	switch (nodeEnv) {
 		case "production":
-			plugins = [
-				stylelint(stylelintOptions),
-				postcssImport(fileImportOptions),
-				csso(cssoOptions),
-				reporter(reporterOptions)
-			];
-			break;
 		case "development":
 			plugins = [
 				stylelint(stylelintOptions),
-				postcssImport(fileImportOptions),
+				lightningcssBundle(lightningcssOptions),
+				postcssMixins(mixinOptions),
+				postcssLightningcss(lightningcssOptions),
 				reporter(reporterOptions)
 			];
 			break;
@@ -139,7 +92,7 @@ export default (ctx) => {
 	}
 
 	return {
-		map: {inline: false},
+		map: { inline: false },
 		plugins: plugins
 	};
 };

package.json

@@ -18,16 +18,12 @@
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "lightningcss": "^1.19.0",
+    "lightningcss": "^1.22.1",
     "postcss": "^8.4.21",
     "postcss-cli": "^11.0.0",
     "postcss-csso": "^6.0.1",
-    "postcss-import": "^16.0.0",
     "postcss-lightningcss": "^1.0.0",
     "postcss-mixins": "^9.0.4",
-    "postcss-preset-env": "^9.0.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-url": "^10.1.3",
     "prettier": "^3.0.0",
     "stylelint": "^16.0.2",
     "stylelint-config-property-sort-order-smacss": "^10.0.0",