From 7c1b392aa843a7fdf6793bf7e6916f543c8ac59f Mon Sep 17 00:00:00 2001 From: graphemecluster Date: Wed, 5 Jun 2024 18:57:30 +0800 Subject: [PATCH] Transpile CSS Nesting with `postcss-nesting` & Modularize --- .postcssrc.json | 6 -- package-lock.json | 109 +++++++++++++++++++++-- package.json | 2 + postcss.config.js | 13 +++ src/index.css | 1 + tailwind.config.js => tailwind.config.ts | 22 +++-- tsconfig.json | 7 +- 7 files changed, 139 insertions(+), 21 deletions(-) delete mode 100644 .postcssrc.json create mode 100644 postcss.config.js rename tailwind.config.js => tailwind.config.ts (72%) diff --git a/.postcssrc.json b/.postcssrc.json deleted file mode 100644 index c28f893..0000000 --- a/.postcssrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "plugins": { - "tailwindcss/nesting": {}, - "tailwindcss": {} - } -} diff --git a/package-lock.json b/package-lock.json index dca4f14..58775e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,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" } @@ -163,6 +164,50 @@ "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", "dev": true }, + "node_modules/@csstools/selector-resolve-nested": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz", + "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, + "node_modules/@csstools/selector-specificity": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", + "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -6617,10 +6662,37 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-nesting": { + "version": "12.1.5", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz", + "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/selector-resolve-nested": "^1.1.0", + "@csstools/selector-specificity": "^3.1.1", + "postcss-selector-parser": "^6.1.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz", + "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -7895,6 +7967,20 @@ } } }, + "@csstools/selector-resolve-nested": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz", + "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==", + "dev": true, + "requires": {} + }, + "@csstools/selector-specificity": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", + "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", + "dev": true, + "requires": {} + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -12159,10 +12245,21 @@ "postcss-selector-parser": "^6.0.11" } }, + "postcss-nesting": { + "version": "12.1.5", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz", + "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==", + "dev": true, + "requires": { + "@csstools/selector-resolve-nested": "^1.1.0", + "@csstools/selector-specificity": "^3.1.1", + "postcss-selector-parser": "^6.1.0" + } + }, "postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz", + "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==", "dev": true, "requires": { "cssesc": "^3.0.0", diff --git a/package.json b/package.json index 3026fe2..1afebfe 100644 --- a/package.json +++ b/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" }, diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..716baf9 --- /dev/null +++ b/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; diff --git a/src/index.css b/src/index.css index 9532c83..4b1969c 100644 --- a/src/index.css +++ b/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]; } } diff --git a/tailwind.config.js b/tailwind.config.ts similarity index 72% rename from tailwind.config.js rename to tailwind.config.ts index 08015eb..aa892c4 100644 --- a/tailwind.config.js +++ b/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; diff --git a/tsconfig.json b/tsconfig.json index 15a0e9d..4787d08 100644 --- a/tsconfig.json +++ b/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"] }