Transpile CSS Nesting with postcss-nesting & Modularize

package.json

@@ -2,6 +2,7 @@
 	"name": "hkilang-tts",
 	"version": "0.0.0",
 	"description": "香港本土語言文字轉語音朗讀器",
+	"type": "module",
 	"scripts": {
 		"start": "parcel public/index.html --dist-dir build --open --port 3000",
 		"build": "parcel build public/index.html --dist-dir build --public-url /TTS --no-cache"
@@ -28,6 +29,7 @@
 		"eslint-plugin-react-refresh": "^0.4.7",
 		"parcel": "^2.12.0",
 		"parcel-transformer-papaparse": "^0.1.0",
+		"postcss-nesting": "^12.1.5",
 		"tailwindcss": "^3.4.3",
 		"typescript": "^5.4.5"
 	},

postcss.config.js

@@ -0,0 +1,13 @@
+// @ts-check
+import postCSSNesting from "postcss-nesting";
+import tailwindcss from "tailwindcss";
+import tailwindcssNesting from "tailwindcss/nesting/index.js"; // eslint-disable-line import/extensions
+
+/** @satisfies { import("postcss").ProcessOptions & { plugins?: import("postcss").AcceptedPlugin[] } } */
+const exports = {
+	plugins: [
+		tailwindcssNesting(postCSSNesting({ edition: "2024-02" })),
+		tailwindcss(),
+	],
+};
+export default exports;

src/index.css

@@ -39,6 +39,7 @@
 		&:first-child,
 		hr + &,
 		& + hr {
+			/* must be transformed by transpiler conforming the web standard (postcss-nesting, not postcss-nested) for this to work */
 			@apply mt-[1.125rem];
 		}
 	}

tailwind.config.js → tailwind.config.ts

@@ -1,7 +1,11 @@
-/** @type {import("tailwindcss").Config} */
-module.exports = {
+import daisyui from "daisyui";
+
+import type { Config as DaisyUIConfig } from "daisyui";
+import type { Config } from "tailwindcss";
+
+export default {
 	important: true,
-	content: ["./src/**/*"],
+	content: ["./public/index.html", "./src/**/*"],
 	theme: {
 		fontFamily: {
 			sans: [
@@ -24,9 +28,15 @@ module.exports = {
 				"Segoe UI Symbol",
 				"Noto Color Emoji",
 			],
+			symbol: [
+				"-apple-system",
+				"BlinkMacSystemFont",
+				"Segoe UI Symbol",
+				"sans-serif",
+			],
 		},
 	},
-	plugins: [require("daisyui")],
+	plugins: [daisyui],
 	daisyui: {
 		themes: [
 			{
@@ -50,5 +60,5 @@ module.exports = {
 				},
 			},
 		],
-	},
-};
+	} satisfies DaisyUIConfig,
+} satisfies Config;

tsconfig.json

@@ -1,9 +1,10 @@
 {
 	"compilerOptions": {
-		"target": "ES6",
+		"target": "ES2017",
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"module": "ESNext",
-		"moduleResolution": "Node",
+		"moduleResolution": "Bundler",
+		"moduleDetection": "force",
 
 		"strict": true,
 		"allowUnusedLabels": false,
@@ -26,5 +27,5 @@
 		"noEmit": true,
 		"jsx": "react-jsx"
 	},
-	"include": ["src"]
+	"include": ["src", "*.config.[jt]s"]
 }