feat/use ts for tw and postcss configs (#665)

.eslintignore

@@ -1,3 +1,3 @@
 dist
 node_modules
-tailwind.config.js
+tailwind.config.ts

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
 }

packages/tailwind-config/tailwind.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'tailwindcss/types/config';
+
+export default {
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} as Omit<Config, 'content'>;

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}'],
 });

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',

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}'],
+  });
 }

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}'],
+});

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"
   }
 }

pages/devtools-panel/postcss.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'postcss-load-config';
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} as Config;

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;

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"
   }
 }

pages/new-tab/postcss.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'postcss-load-config';
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} as Config;

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}'],
+});

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"
   }
 }

pages/options/postcss.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'postcss-load-config';
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} as Config;

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}'],
+});

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"
   }
 }

pages/popup/postcss.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'postcss-load-config';
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} as Config;

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;

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"
   }
 }

pages/side-panel/postcss.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'postcss-load-config';
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} as Config;

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;