From 5a4b977982602f2c62214ed9b0d5a282d0af2b66 Mon Sep 17 00:00:00 2001 From: PatrykKuniczak <64608510+PatrykKuniczak@users.noreply.github.com> Date: Sun, 1 Sep 2024 10:48:30 +0200 Subject: [PATCH] feat/use ts for tw and postcss configs (#665) --- .eslintignore | 2 +- packages/tailwind-config/package.json | 2 +- packages/tailwind-config/tailwind.config.js | 9 ----- packages/tailwind-config/tailwind.config.ts | 8 ++++ packages/ui/README.md | 11 +++--- packages/ui/build.mjs | 4 +- packages/ui/lib/withUI.ts | 14 +++---- packages/ui/tailwind.config.ts | 6 --- pages/content-ui/tailwind.config.js | 8 ---- pages/content-ui/tailwind.config.ts | 7 ++++ pages/devtools-panel/package.json | 3 +- pages/devtools-panel/postcss.config.js | 6 --- pages/devtools-panel/postcss.config.ts | 8 ++++ pages/devtools-panel/tailwind.config.js | 7 ---- pages/devtools-panel/tailwind.config.ts | 7 ++++ pages/new-tab/package.json | 3 +- pages/new-tab/postcss.config.js | 6 --- pages/new-tab/postcss.config.ts | 8 ++++ pages/new-tab/tailwind.config.js | 8 ---- pages/new-tab/tailwind.config.ts | 7 ++++ pages/options/package.json | 3 +- pages/options/postcss.config.js | 6 --- pages/options/postcss.config.ts | 8 ++++ pages/options/tailwind.config.js | 8 ---- pages/options/tailwind.config.ts | 7 ++++ pages/popup/package.json | 3 +- pages/popup/postcss.config.js | 6 --- pages/popup/postcss.config.ts | 8 ++++ pages/popup/tailwind.config.js | 7 ---- pages/popup/tailwind.config.ts | 7 ++++ pages/side-panel/package.json | 3 +- pages/side-panel/postcss.config.js | 6 --- pages/side-panel/postcss.config.ts | 8 ++++ pages/side-panel/tailwind.config.js | 7 ---- pages/side-panel/tailwind.config.ts | 7 ++++ pnpm-lock.yaml | 42 +++++++++++++++++++++ 36 files changed, 156 insertions(+), 114 deletions(-) delete mode 100644 packages/tailwind-config/tailwind.config.js create mode 100644 packages/tailwind-config/tailwind.config.ts delete mode 100644 packages/ui/tailwind.config.ts delete mode 100644 pages/content-ui/tailwind.config.js create mode 100644 pages/content-ui/tailwind.config.ts delete mode 100644 pages/devtools-panel/postcss.config.js create mode 100644 pages/devtools-panel/postcss.config.ts delete mode 100644 pages/devtools-panel/tailwind.config.js create mode 100644 pages/devtools-panel/tailwind.config.ts delete mode 100644 pages/new-tab/postcss.config.js create mode 100644 pages/new-tab/postcss.config.ts delete mode 100644 pages/new-tab/tailwind.config.js create mode 100644 pages/new-tab/tailwind.config.ts delete mode 100644 pages/options/postcss.config.js create mode 100644 pages/options/postcss.config.ts delete mode 100644 pages/options/tailwind.config.js create mode 100644 pages/options/tailwind.config.ts delete mode 100644 pages/popup/postcss.config.js create mode 100644 pages/popup/postcss.config.ts delete mode 100644 pages/popup/tailwind.config.js create mode 100644 pages/popup/tailwind.config.ts delete mode 100644 pages/side-panel/postcss.config.js create mode 100644 pages/side-panel/postcss.config.ts delete mode 100644 pages/side-panel/tailwind.config.js create mode 100644 pages/side-panel/tailwind.config.ts diff --git a/.eslintignore b/.eslintignore index 00e83f596..485eb66dd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,3 @@ dist node_modules -tailwind.config.js +tailwind.config.ts diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json index 3f5ffac77..2a2982d39 100644 --- a/packages/tailwind-config/package.json +++ b/packages/tailwind-config/package.json @@ -2,6 +2,6 @@ "name": "@extension/tailwindcss-config", "version": "0.3.1", "description": "Tailwind CSS configuration for boilerplate", - "main": "./tailwind.config.js", + "main": "tailwind.config.ts", "private": true } diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js deleted file mode 100644 index ed08a2c9e..000000000 --- a/packages/tailwind-config/tailwind.config.js +++ /dev/null @@ -1,9 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - /** shared theme configuration */ - theme: { - extend: {}, - }, - /** shared plugins configuration */ - plugins: [], -}; diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts new file mode 100644 index 000000000..1b88671d5 --- /dev/null +++ b/packages/tailwind-config/tailwind.config.ts @@ -0,0 +1,8 @@ +import type { Config } from 'tailwindcss/types/config'; + +export default { + theme: { + extend: {}, + }, + plugins: [], +} as Omit; diff --git a/packages/ui/README.md b/packages/ui/README.md index 6a63ed55e..0f396c090 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -26,14 +26,13 @@ Then, run `pnpm install`. pnpm install ``` -Add the following to the `tailwind.config.js` file. +Add the following to the `tailwind.config.ts` file. -```js -const baseConfig = require('@extension/tailwindcss-config'); -const { withUI } = require('@extension/ui'); +```ts +import baseConfig from '@extension/tailwindcss-config'; +import { withUI } from '@extension/ui'; -/** @type {import('tailwindcss').Config} */ -module.exports = withUI({ +export default withUI({ ...baseConfig, content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], }); diff --git a/packages/ui/build.mjs b/packages/ui/build.mjs index be04d2979..a794ffc0d 100644 --- a/packages/ui/build.mjs +++ b/packages/ui/build.mjs @@ -3,10 +3,10 @@ import * as fs from 'fs'; import { resolve } from 'node:path'; /** - * @type { import("esbuild").BuildOptions } + * @type { import('esbuild').BuildOptions } */ const buildOptions = { - entryPoints: ['./index.ts', './tailwind.config.ts', './lib/**/*.ts', './lib/**/*.tsx'], + entryPoints: ['./index.ts', './lib/**/*.ts', './lib/**/*.tsx'], tsconfig: './tsconfig.json', bundle: false, target: 'es6', diff --git a/packages/ui/lib/withUI.ts b/packages/ui/lib/withUI.ts index 1b7996488..ce7de6ec0 100644 --- a/packages/ui/lib/withUI.ts +++ b/packages/ui/lib/withUI.ts @@ -1,12 +1,8 @@ import deepmerge from 'deepmerge'; -import type { Config } from 'tailwindcss'; -import config from '../tailwind.config'; +import type { Config } from 'tailwindcss/types/config'; -export function withUI(tailwindConfig: Config) { - return deepmerge( - tailwindConfig, - deepmerge(config, { - content: ['./node_modules/@extension/ui/lib/**/*.{tsx,ts,js,jsx}'], - }), - ); +export function withUI(tailwindConfig: Config): Config { + return deepmerge(tailwindConfig, { + content: ['./node_modules/@extension/ui/lib/**/*.{tsx,ts,js,jsx}'], + }); } diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts deleted file mode 100644 index 3aa0d4bca..000000000 --- a/packages/ui/tailwind.config.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { Config } from 'tailwindcss'; - -const config: Config = { - content: [], -}; -export default config; diff --git a/pages/content-ui/tailwind.config.js b/pages/content-ui/tailwind.config.js deleted file mode 100644 index b34e1d130..000000000 --- a/pages/content-ui/tailwind.config.js +++ /dev/null @@ -1,8 +0,0 @@ -const baseConfig = require('@extension/tailwindcss-config'); -const { withUI } = require('@extension/ui'); - -/** @type {import('tailwindcss').Config} */ -module.exports = withUI({ - ...baseConfig, - content: ['src/**/*.{ts,tsx}'], -}); diff --git a/pages/content-ui/tailwind.config.ts b/pages/content-ui/tailwind.config.ts new file mode 100644 index 000000000..7be8fa8c9 --- /dev/null +++ b/pages/content-ui/tailwind.config.ts @@ -0,0 +1,7 @@ +import baseConfig from '@extension/tailwindcss-config'; +import { withUI } from '@extension/ui'; + +export default withUI({ + ...baseConfig, + content: ['src/**/*.{ts,tsx}'], +}); diff --git a/pages/devtools-panel/package.json b/pages/devtools-panel/package.json index f0c085f09..8a7a1b340 100644 --- a/pages/devtools-panel/package.json +++ b/pages/devtools-panel/package.json @@ -24,6 +24,7 @@ "devDependencies": { "@extension/tailwindcss-config": "workspace:*", "@extension/tsconfig": "workspace:*", - "@extension/vite-config": "workspace:*" + "@extension/vite-config": "workspace:*", + "postcss-load-config": "^6.0.1" } } diff --git a/pages/devtools-panel/postcss.config.js b/pages/devtools-panel/postcss.config.js deleted file mode 100644 index 12a703d90..000000000 --- a/pages/devtools-panel/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/pages/devtools-panel/postcss.config.ts b/pages/devtools-panel/postcss.config.ts new file mode 100644 index 000000000..e89b8ac05 --- /dev/null +++ b/pages/devtools-panel/postcss.config.ts @@ -0,0 +1,8 @@ +import type { Config } from 'postcss-load-config'; + +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} as Config; diff --git a/pages/devtools-panel/tailwind.config.js b/pages/devtools-panel/tailwind.config.js deleted file mode 100644 index 5c3657df5..000000000 --- a/pages/devtools-panel/tailwind.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const baseConfig = require('@extension/tailwindcss-config'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - ...baseConfig, - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], -}; diff --git a/pages/devtools-panel/tailwind.config.ts b/pages/devtools-panel/tailwind.config.ts new file mode 100644 index 000000000..3428bbb63 --- /dev/null +++ b/pages/devtools-panel/tailwind.config.ts @@ -0,0 +1,7 @@ +import baseConfig from '@extension/tailwindcss-config'; +import type { Config } from 'tailwindcss/types/config'; + +export default { + ...baseConfig, + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], +} as Config; diff --git a/pages/new-tab/package.json b/pages/new-tab/package.json index 2f88105b5..1af01f0ec 100644 --- a/pages/new-tab/package.json +++ b/pages/new-tab/package.json @@ -27,6 +27,7 @@ "@extension/tailwindcss-config": "workspace:*", "@extension/tsconfig": "workspace:*", "@extension/vite-config": "workspace:*", - "sass": "1.77.8" + "sass": "1.77.8", + "postcss-load-config": "^6.0.1" } } diff --git a/pages/new-tab/postcss.config.js b/pages/new-tab/postcss.config.js deleted file mode 100644 index 12a703d90..000000000 --- a/pages/new-tab/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/pages/new-tab/postcss.config.ts b/pages/new-tab/postcss.config.ts new file mode 100644 index 000000000..e89b8ac05 --- /dev/null +++ b/pages/new-tab/postcss.config.ts @@ -0,0 +1,8 @@ +import type { Config } from 'postcss-load-config'; + +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} as Config; diff --git a/pages/new-tab/tailwind.config.js b/pages/new-tab/tailwind.config.js deleted file mode 100644 index 390fb7aaa..000000000 --- a/pages/new-tab/tailwind.config.js +++ /dev/null @@ -1,8 +0,0 @@ -const baseConfig = require('@extension/tailwindcss-config'); -const { withUI } = require('@extension/ui'); - -/** @type {import('tailwindcss').Config} */ -module.exports = withUI({ - ...baseConfig, - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], -}); diff --git a/pages/new-tab/tailwind.config.ts b/pages/new-tab/tailwind.config.ts new file mode 100644 index 000000000..ef8764539 --- /dev/null +++ b/pages/new-tab/tailwind.config.ts @@ -0,0 +1,7 @@ +import baseConfig from '@extension/tailwindcss-config'; +import { withUI } from '@extension/ui'; + +export default withUI({ + ...baseConfig, + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], +}); diff --git a/pages/options/package.json b/pages/options/package.json index e5a2cf71a..656c062a2 100644 --- a/pages/options/package.json +++ b/pages/options/package.json @@ -25,6 +25,7 @@ "devDependencies": { "@extension/tailwindcss-config": "workspace:*", "@extension/tsconfig": "workspace:*", - "@extension/vite-config": "workspace:*" + "@extension/vite-config": "workspace:*", + "postcss-load-config": "^6.0.1" } } diff --git a/pages/options/postcss.config.js b/pages/options/postcss.config.js deleted file mode 100644 index 12a703d90..000000000 --- a/pages/options/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/pages/options/postcss.config.ts b/pages/options/postcss.config.ts new file mode 100644 index 000000000..e89b8ac05 --- /dev/null +++ b/pages/options/postcss.config.ts @@ -0,0 +1,8 @@ +import type { Config } from 'postcss-load-config'; + +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} as Config; diff --git a/pages/options/tailwind.config.js b/pages/options/tailwind.config.js deleted file mode 100644 index 390fb7aaa..000000000 --- a/pages/options/tailwind.config.js +++ /dev/null @@ -1,8 +0,0 @@ -const baseConfig = require('@extension/tailwindcss-config'); -const { withUI } = require('@extension/ui'); - -/** @type {import('tailwindcss').Config} */ -module.exports = withUI({ - ...baseConfig, - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], -}); diff --git a/pages/options/tailwind.config.ts b/pages/options/tailwind.config.ts new file mode 100644 index 000000000..ef8764539 --- /dev/null +++ b/pages/options/tailwind.config.ts @@ -0,0 +1,7 @@ +import baseConfig from '@extension/tailwindcss-config'; +import { withUI } from '@extension/ui'; + +export default withUI({ + ...baseConfig, + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], +}); diff --git a/pages/popup/package.json b/pages/popup/package.json index 29c6d4af5..1d0ff684a 100644 --- a/pages/popup/package.json +++ b/pages/popup/package.json @@ -26,6 +26,7 @@ "devDependencies": { "@extension/tailwindcss-config": "workspace:*", "@extension/tsconfig": "workspace:*", - "@extension/vite-config": "workspace:*" + "@extension/vite-config": "workspace:*", + "postcss-load-config": "^6.0.1" } } diff --git a/pages/popup/postcss.config.js b/pages/popup/postcss.config.js deleted file mode 100644 index 12a703d90..000000000 --- a/pages/popup/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/pages/popup/postcss.config.ts b/pages/popup/postcss.config.ts new file mode 100644 index 000000000..e89b8ac05 --- /dev/null +++ b/pages/popup/postcss.config.ts @@ -0,0 +1,8 @@ +import type { Config } from 'postcss-load-config'; + +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} as Config; diff --git a/pages/popup/tailwind.config.js b/pages/popup/tailwind.config.js deleted file mode 100644 index 5c3657df5..000000000 --- a/pages/popup/tailwind.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const baseConfig = require('@extension/tailwindcss-config'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - ...baseConfig, - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], -}; diff --git a/pages/popup/tailwind.config.ts b/pages/popup/tailwind.config.ts new file mode 100644 index 000000000..3428bbb63 --- /dev/null +++ b/pages/popup/tailwind.config.ts @@ -0,0 +1,7 @@ +import baseConfig from '@extension/tailwindcss-config'; +import type { Config } from 'tailwindcss/types/config'; + +export default { + ...baseConfig, + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], +} as Config; diff --git a/pages/side-panel/package.json b/pages/side-panel/package.json index 6e6e8455d..cba1c0ae6 100644 --- a/pages/side-panel/package.json +++ b/pages/side-panel/package.json @@ -24,6 +24,7 @@ "devDependencies": { "@extension/tailwindcss-config": "workspace:*", "@extension/tsconfig": "workspace:*", - "@extension/vite-config": "workspace:*" + "@extension/vite-config": "workspace:*", + "postcss-load-config": "^6.0.1" } } diff --git a/pages/side-panel/postcss.config.js b/pages/side-panel/postcss.config.js deleted file mode 100644 index 12a703d90..000000000 --- a/pages/side-panel/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/pages/side-panel/postcss.config.ts b/pages/side-panel/postcss.config.ts new file mode 100644 index 000000000..e89b8ac05 --- /dev/null +++ b/pages/side-panel/postcss.config.ts @@ -0,0 +1,8 @@ +import type { Config } from 'postcss-load-config'; + +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} as Config; diff --git a/pages/side-panel/tailwind.config.js b/pages/side-panel/tailwind.config.js deleted file mode 100644 index 5c3657df5..000000000 --- a/pages/side-panel/tailwind.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const baseConfig = require('@extension/tailwindcss-config'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - ...baseConfig, - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], -}; diff --git a/pages/side-panel/tailwind.config.ts b/pages/side-panel/tailwind.config.ts new file mode 100644 index 000000000..3428bbb63 --- /dev/null +++ b/pages/side-panel/tailwind.config.ts @@ -0,0 +1,7 @@ +import baseConfig from '@extension/tailwindcss-config'; +import type { Config } from 'tailwindcss/types/config'; + +export default { + ...baseConfig, + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], +} as Config; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5e492e64..40a145096 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -337,6 +337,9 @@ importers: '@extension/vite-config': specifier: workspace:* version: link:../../packages/vite-config + postcss-load-config: + specifier: ^6.0.1 + version: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.16.2)(yaml@2.4.5) pages/new-tab: dependencies: @@ -362,6 +365,9 @@ importers: '@extension/vite-config': specifier: workspace:* version: link:../../packages/vite-config + postcss-load-config: + specifier: ^6.0.1 + version: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.16.2)(yaml@2.4.5) sass: specifier: 1.77.8 version: 1.77.8 @@ -387,6 +393,9 @@ importers: '@extension/vite-config': specifier: workspace:* version: link:../../packages/vite-config + postcss-load-config: + specifier: ^6.0.1 + version: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.16.2)(yaml@2.4.5) pages/popup: dependencies: @@ -412,6 +421,9 @@ importers: '@extension/vite-config': specifier: workspace:* version: link:../../packages/vite-config + postcss-load-config: + specifier: ^6.0.1 + version: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.16.2)(yaml@2.4.5) pages/side-panel: dependencies: @@ -431,6 +443,9 @@ importers: '@extension/vite-config': specifier: workspace:* version: link:../../packages/vite-config + postcss-load-config: + specifier: ^6.0.1 + version: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.16.2)(yaml@2.4.5) packages: @@ -2382,6 +2397,24 @@ packages: ts-node: optional: true + postcss-load-config@6.0.1: + resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==} + engines: {node: '>= 18'} + peerDependencies: + jiti: '>=1.21.0' + postcss: '>=8.0.9' + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + jiti: + optional: true + postcss: + optional: true + tsx: + optional: true + yaml: + optional: true + postcss-nested@6.0.1: resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -4984,6 +5017,15 @@ snapshots: postcss: 8.4.39 ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.14.10)(typescript@5.5.4) + postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.16.2)(yaml@2.4.5): + dependencies: + lilconfig: 3.1.2 + optionalDependencies: + jiti: 1.21.6 + postcss: 8.4.41 + tsx: 4.16.2 + yaml: 2.4.5 + postcss-nested@6.0.1(postcss@8.4.39): dependencies: postcss: 8.4.39