feat: decouple cli from plugin

apps/demo/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.styles

apps/demo/package.json

@@ -2,15 +2,17 @@
   "name": "@tgp/demo",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "run-p vite styles:watch",
+    "vite": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "lint": "eslint src",
     "lint:fix": "eslint --fix src",
     "types": "tsc",
-    "tgp": "tgp"
+    "styles": "tgp src/styles .styles",
+    "styles:watch": "pnpm styles --watch"
   },
   "dependencies": {
     "react": "18.2.0",
@@ -22,6 +24,7 @@
     "@types/react-dom": "18.2.19",
     "@vitejs/plugin-react-swc": "3.5.0",
     "autoprefixer": "10.4.17",
+    "npm-run-all": "4.1.5",
     "postcss": "8.4.35",
     "tailwindcss": "3.4.1",
     "vite": "5.1.4"

apps/demo/src/App.tsx

@@ -1,7 +1,7 @@
 function App() {
   return (
     <div>
-      <button>Button</button>
+      <button className="button button-secondary">Button</button>
     </div>
   );
 }

apps/demo/src/styles/components/button/button.css

@@ -0,0 +1,21 @@
+.button {
+	color: black;
+
+	@apply bg-red-400;
+
+	&-primary {
+		@apply bg-green-500;
+	}
+
+	&-secondary {
+		@apply bg-blue-400;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+
+	&:active {
+		transform: scale(.9);
+	}
+}

apps/demo/tailwind.config.ts

@@ -1,11 +1,16 @@
-import type { Config as PluginConfig } from '@tgp/tailwind-generator-plugin';
+import plugin from 'tailwindcss/plugin';
+
+import components from './.styles/components.json';
 
 import type { Config } from 'tailwindcss';
 
 const config = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  plugins: [require(require.resolve('@tgp/tailwind-generator-plugin'))],
-  pluginGenerator: { stylesDirectory: 'styles' },
-} satisfies Config & PluginConfig;
+  plugins: [
+    plugin(({ addComponents }) => {
+      addComponents(components);
+    }),
+  ],
+} satisfies Config;
 
 export default config;

apps/demo/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "tailwind.config.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/tailwind-generator-plugin/package.json

@@ -3,7 +3,6 @@
   "name": "@tgp/tailwind-generator-plugin",
   "version": "0.1.0",
   "type": "module",
-  "main": "./src/index.ts",
   "bin": {
     "tgp": "./src/bin.cjs"
   },
@@ -27,6 +26,7 @@
     "@types/node": "20.11.20",
     "@types/postcss-js": "4.0.4",
     "@types/yargs": "17.0.32",
+    "chokidar": "3.6.0",
     "tsup": "8.0.2"
   }
 }

packages/tailwind-generator-plugin/src/build.ts

@@ -4,10 +4,11 @@ import * as path from 'node:path';
 import type { CssInJs } from 'postcss-js';
 
 import { compileStyleSheet } from './compiler';
+import type { Kind } from './util';
 
 export async function readStyles(dir: string): Promise<string[]> {
   const entries = await fsp.readdir(dir);
-  const files = entries.map((entry) => path.join(entry, `${entry}.css`));
+  const files = entries.map((entry) => path.join(dir, entry, `${entry}.css`));
   return Promise.all(files.map(async (file) => await fsp.readFile(file, 'utf8')));
 }
 
@@ -19,3 +20,8 @@ export async function parseStyles(dir: string): Promise<CssInJs> {
     return { ...kind, ...style };
   }, {});
 }
+
+export async function writeStyles(dir: string, kind: Kind, style: CssInJs) {
+  await fsp.mkdir(dir, { recursive: true });
+  return fsp.writeFile(path.join(dir, `${kind}.json`), JSON.stringify(style));
+}

packages/tailwind-generator-plugin/src/cli.ts

@@ -1,16 +1,27 @@
+import * as fsp from 'node:fs/promises';
 import * as path from 'node:path';
 
+import { watch } from 'chokidar';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 import { z } from 'zod';
 
+import { parseStyles, writeStyles } from './build';
+import { NoStylesDirectory } from './error';
+import { kinds } from './util';
+
 const { argv } = yargs(hideBin(process.argv))
-  .usage('tgp <styles-directory>')
-  .command('$0 <styles-directory>', 'The main command', (yargs) => {
-    yargs.positional('styles-directory', {
-      describe: 'path to the source styles directory',
-      type: 'string',
-    });
+  .usage('tgp <styles-directory> <output-directory>')
+  .command('$0 <styles-directory> <output-directory>', 'The main command', (yargs) => {
+    yargs
+      .positional('styles-directory', {
+        describe: 'path to the source styles directory',
+        type: 'string',
+      })
+      .positional('output-directory', {
+        describe: 'path to the output file',
+        type: 'string',
+      });
   })
   .option('watch', {
     alias: 'w',
@@ -21,10 +32,51 @@ const { argv } = yargs(hideBin(process.argv))
   .help()
   .alias('help', 'h');
 
-const schema = z.object({ stylesDirectory: z.string() });
+const schema = z.object({
+  stylesDirectory: z.string(),
+  outputDirectory: z.string(),
+  watch: z.boolean(),
+});
+console.debug({ argv });
 const args = schema.parse(argv);
 
 const cwd = process.cwd();
 const stylesDirectory = path.join(cwd, args.stylesDirectory);
+const outputDirectory = path.join(cwd, args.outputDirectory);
+
+console.debug({ cwd });
+
+async function assertDirExists(dir: string) {
+  try {
+    await fsp.stat(dir);
+  } catch (error) {
+    throw new NoStylesDirectory(`Styles Directory ${stylesDirectory} does not exist.`);
+  }
+}
+
+async function main() {
+  await assertDirExists(stylesDirectory);
+
+  await Promise.all(
+    kinds.map(async (kind) => {
+      const styles = await parseStyles(path.join(stylesDirectory, kind));
+      await writeStyles(outputDirectory, kind, styles);
+    }),
+  );
+
+  for (const kind of kinds) {
+    const kindPath = path.join(stylesDirectory, kind);
+    const watcher = watch(`${kindPath}/*/*.css`, {
+      awaitWriteFinish: { stabilityThreshold: 10, pollInterval: 10 },
+    });
+    console.debug(`${kindPath}/*/*.css`);
+    watcher.on('change', () => {
+      void (async () => {
+        const styles = await parseStyles(path.join(stylesDirectory, kind));
+        await writeStyles(outputDirectory, kind, styles);
+      })();
+    });
+  }
+}
 
-console.debug({ stylesDirectory });
+void main();

packages/tailwind-generator-plugin/src/error.ts

@@ -0,0 +1,5 @@
+export class NoStylesDirectory extends Error {
+  public constructor(message: string) {
+    super(message);
+  }
+}

packages/tailwind-generator-plugin/src/util.ts

@@ -1,2 +1,3 @@
 export const kinds = ['components'] as const;
 export type Kind = (typeof kinds)[number];
+export type Kinds = typeof kinds;