Merge pull request #259 from Nu-SCPTheme/Duplicating-Code-Fix

Modifying PostCSS Config To Fix Duplicating CSS
Nu-SCPTheme · Dec 11, 2024 · c55112c · c55112c
2 parents f4516b3 + 07ad7a7
commit c55112c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 91 deletions.
diff --git a/build/postcss.config.mjs b/build/postcss.config.mjs
@@ -1,59 +1,25 @@
 import fs from "fs";
 import path from "path";
-import postcss from "postcss";
+import postcssImport from "postcss-import";
 import postcssMixins from "postcss-mixins";
 import stylelint from "stylelint";
 import postcssLightningcss from "postcss-lightningcss";
 import reporter from "postcss-reporter";
-import { bundleAsync } from "lightningcss";
-
-const lightningcssBundle = (opts = {}) => {
-	return {
-		postcssPlugin: "lightningcss-bundle",
-		async Once(root, { result }) {
-			const filename = opts.filename || result.opts.from;
-			const tempRoot = postcss.root();
-
-			try {
-				const { code } = await bundleAsync({
-					filename,
-					...opts.lightningcssOptions,
-					resolver: {
-						read(filePath) {
-							if (filePath.startsWith('http')) {
-								return '';
-							}
-							return fs.readFileSync(filePath, 'utf8');
-						},
-						resolve(specifier, from) {
-							if (specifier.startsWith('http')) {
-								return from;
-							}
-							const resolvedPath = path.resolve(path.dirname(from), specifier);
-							const content = fs.readFileSync(resolvedPath, 'utf8');
-							tempRoot.append(postcss.parse(content));
-							return resolvedPath;
-						}
-					}
-				});
-
-				root.removeAll();
-				root.append(tempRoot);
-				root.append(postcss.parse(code));
-			} catch (error) {
-				console.error("LightningCSS bundling error:", error);
-				throw error;
-			}
-		}
-	};
-};
+import browserslist from "browserslist";
+import { browserslistToTargets } from "lightningcss";
 
 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 browserslistpath = path.resolve(
+		ctx.file.dirname,
+		"../../.browserslistrc"
+	);
+	const browserslistText = fs.readFileSync(browserslistpath, "utf8").trim();
+	const browserTargets = browserslistToTargets(
+		browserslist(browserslistText)
+	);
 
 	const stylelintOptions = {
 		configFile: path.join(ctx.cwd, "/.stylelintrc"),
@@ -64,16 +30,14 @@ export default (ctx) => {
 		mixinsDir: path.join(ctx.file.dirname, "/parts")
 	};
 
-	lightningcssBundle.postcss = true;
-
 	const lightningcssOptions = {
-		browsers: browserslist,
+		browsers: browserslistText,
 		lightningcssOptions: {
 			minify: !dev,
 			sourceMap: true,
 			cssModules: false,
+			targets: browserTargets,
 			drafts: {
-				nesting: true,
 				customMedia: true
 			},
 			visitor: {
@@ -92,9 +56,8 @@ export default (ctx) => {
 	};
 
 	const reporterOptions = {
-		formatter: input => {
-			return input.source + " produced " + input.messages.length + " messages \n";
-		},
+		formatter: (input) =>
+			`${input.source} produced ${input.messages.length} messages \n`,
 		clearMessages: true
 	};
 
@@ -104,8 +67,8 @@ export default (ctx) => {
 		case "production":
 		case "development":
 			plugins = [
+				postcssImport(), // Add postcss-import at the beginning
 				stylelint(stylelintOptions),
-				lightningcssBundle(lightningcssOptions),
 				postcssMixins(mixinOptions),
 				postcssLightningcss(lightningcssOptions),
 				reporter(reporterOptions)

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,40 +1,41 @@
 {
-  "name": "black-highlighter",
-  "description": "Modern base theme for the SCP Wiki (build process)",
-  "version": "1.0.0",
-  "authors": "Woedenaz, Croquembouche",
-  "license": "CC-BY-SA-3.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Nu-SCPTheme/Black-Highlighter"
-  },
-  "engines": {
-    "bun": ">=1.0.17"
-  },
-  "devDependencies": {
-    "@csstools/postcss-global-data": "^3.0.0",
-    "autoprefixer": "^10.4.20",
-    "caniuse-lite": "^1.0.30001651",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.9.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "lightningcss": "^1.26.0",
-    "postcss": "^8.4.41",
-    "postcss-cli": "^11.0.0",
-    "postcss-csso": "^6.0.1",
-    "postcss-lightningcss": "^1.0.1",
-    "postcss-mixins": "^11.0.0",
-    "postcss-reporter": "^7.1.0",
-    "prettier": "^3.3.3",
-    "stylelint": "^16.8.2",
-    "stylelint-config-property-sort-order-smacss": "^10.0.0",
-    "stylelint-config-standard": "^36.0.1",
-    "svgo": "^3.3.2"
-  },
-  "scripts": {
-    "build": "make",
-    "base": "cross-env postcss $bhl_i --config build/postcss.config.mjs -o $bhl_o -w --env $bhl_env --verbose",
-    "watch": "cross-env bhl_i=src/css/black-highlighter.css bhl_o=dist/css/black-highlighter.css bhl_env=development bun base & cross-env bhl_i=src/css/black-highlighter.css bhl_o=dist/css/min/black-highlighter.min.css bhl_env=production bun base & cross-env bhl_i=src/css/normalize.css bhl_o=dist/css/min/normalize.min.css bhl_env=development bun base"
-  }
+	"name": "black-highlighter",
+	"description": "Modern base theme for the SCP Wiki (build process)",
+	"version": "1.0.0",
+	"authors": "Woedenaz, Croquembouche",
+	"license": "CC-BY-SA-3.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Nu-SCPTheme/Black-Highlighter"
+	},
+	"engines": {
+		"bun": ">=1.0.17"
+	},
+	"devDependencies": {
+		"@csstools/postcss-global-data": "^3.0.0",
+		"autoprefixer": "^10.4.20",
+		"caniuse-lite": "^1.0.30001651",
+		"cross-env": "^7.0.3",
+		"eslint": "^9.9.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"lightningcss": "^1.26.0",
+		"postcss": "^8.4.41",
+		"postcss-cli": "^11.0.0",
+		"postcss-csso": "^6.0.1",
+		"postcss-import": "^16.1.0",
+		"postcss-lightningcss": "^1.0.1",
+		"postcss-mixins": "^11.0.0",
+		"postcss-reporter": "^7.1.0",
+		"prettier": "^3.3.3",
+		"stylelint": "^16.8.2",
+		"stylelint-config-property-sort-order-smacss": "^10.0.0",
+		"stylelint-config-standard": "^36.0.1",
+		"svgo": "^3.3.2"
+	},
+	"scripts": {
+		"build": "make",
+		"base": "cross-env postcss $bhl_i --config build/postcss.config.mjs -o $bhl_o -w --env $bhl_env --verbose",
+		"watch": "cross-env bhl_i=src/css/black-highlighter.css bhl_o=dist/css/black-highlighter.css bhl_env=development bun base & cross-env bhl_i=src/css/black-highlighter.css bhl_o=dist/css/min/black-highlighter.min.css bhl_env=production bun base & cross-env bhl_i=src/css/normalize.css bhl_o=dist/css/min/normalize.min.css bhl_env=development bun base"
+	}
 }