feat: support typescript configs

tw-in-js · Mar 3, 2021 · 6db6316 · 6db6316
1 parent 0c214c3
commit 6db6316
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -20,26 +20,45 @@ yarn add @twind/cli
 ## Usage
 
 ```bash
-node -r esm -r esbuild-register bin/twind.js -c src/__fixtures__/twind.config.js -o build/tailwind.css -w -b
+# Find all htm,html,js,jsx,tsx,svelte,vue,mdx files and print generated CSS
+twind
+
+# Write CSS to a file
+twind -o public/styles.css
+
+# Use custom globs
+twind 'src/**/*.jsx' 'public/**/*.html'
+
+# Watch mode
+twind -w
+
+# Generate beautified css file
+twind -b
+
+# Use different twind config (esm or cjs)
+twind -c src/twind.config.js
+
+# Use different tailwind config (esm or cjs)
+twind -c tailwind.prod.js
 ```
 
 ```
   Usage
     $ twind [...globs=**/*.{htm,html,js,jsx,tsx,svelte,vue,mdx}] [options]
 
   Options
-    -o, --output      Set output css file path
-    -c, --config      Set config file path
-    -i, --ignore      Any file patterns to ignore
-    --ignore-file     gitignore like file  (default .gitignore)
-    -b, --beautify    Generate beautified css file  (default false)
-    -C, --cwd         The current directory to resolve from  (default .)
-    -w, --watch       Watch for changes  (default false)
-    --color           Print colorized output  (default [object Object])
-    -v, --version     Displays current version
-    -h, --help        Displays this message
+    -o, --output         Set output css file path (default print to console)
+    -c, --config         Set config file path (default twind.config.[cm]js or tailwind.config.[cm]js
+    -i, --ignore         Any file patterns to ignore
+    -I, --ignore-file    gitignore like file  (default .gitignore)
+    -b, --beautify       Generate beautified css file  (default false)
+    -C, --cwd            The current directory to resolve from  (default .)
+    -w, --watch          Watch for changes  (default false)
+    --color              Print colorized output - to disable use --no-color  (default true)
+    -v, --version        Displays current version
+    -h, --help           Displays this message
 ```
 
 ## License
 
-[MIT](https://github.com/tw-in-js/content/blob/main/LICENSE)
+[MIT](https://github.com/tw-in-js/cli/blob/main/LICENSE)
diff --git a/src/__fixtures__/test.html b/src/__fixtures__/test.html
@@ -6,6 +6,6 @@
     <title>Twind</title>
   </head>
   <body>
-    <h1 class="text-3xl sm:text-6xl">Hello World"</h1>
+    <h1 class="text-3xl sm:text-4xl hover:underline sm:hover:focus:first:bg-red-500">Hello World"</h1>
   </body>
 </html>
diff --git a/src/cli.ts b/src/cli.ts
@@ -6,17 +6,17 @@ import supportsColor from 'supports-color'
 export const cli = (argv = process.argv) =>
   sade('twind [...globs=**/*.{htm,html,js,jsx,tsx,svelte,vue,mdx}]', /* single commmand */ true)
     .version(version)
-    .option('-o, --output', 'Set output css file path (default print to console)')
+    .option('-o, --output', 'Set output css file path  (default print to console)')
     .option(
       '-c, --config',
-      'Set config file path (default twind.config.[cm]js or tailwind.config.[cm]js',
+      'Set config file path  (default twind.config.{[cm]js,ts} or tailwind.config.{[cm]js,ts})',
     )
     .option('-i, --ignore', 'Any file patterns to ignore')
     .option('-I, --ignore-file', 'gitignore like file', '.gitignore')
     .option('-b, --beautify', 'Generate beautified css file', false)
     .option('-C, --cwd', 'The current directory to resolve from', '.')
     .option('-w, --watch', 'Watch for changes', false)
-    .option('--color', 'Print colorized output - to disable use --no-color', supportsColor.stderr)
+    .option('--color', 'Print colorized output - to disable use --no-color', !!supportsColor.stderr)
     .action(async (globs, { _, ['ignore-file']: ignoreFile, ...options }) => {
       try {
         await run([globs, ..._], { ...options, ignoreFile })

diff --git a/src/run.ts b/src/run.ts
@@ -112,10 +112,10 @@ const run$ = async (globs: string[], options: RunOptions, esbuild: Service): Pro
 
   const configFile =
     (options.config && path.resolve(options.cwd, options.config)) ||
-    (await findUp(['twind.config.js', 'twind.config.mjs', 'twind.config.cjs'], {
+    (await findUp(['twind.config.js', 'twind.config.mjs', 'twind.config.cjs', 'twind.config.ts'], {
       cwd: options.cwd,
     })) ||
-    (await findUp(['tailwind.config.js', 'tailwind.config.mjs', 'tailwind.config.cjs'], {
+    (await findUp(['tailwind.config.js', 'tailwind.config.mjs', 'tailwind.config.cjs', 'tailwind.config.ts'], {
       cwd: options.cwd,
     }))
 
@@ -184,7 +184,7 @@ const run$ = async (globs: string[], options: RunOptions, esbuild: Service): Pro
   }
 
   console.error(
-    kleur.dim(`Watching the following patterns: ${kleur.bold(JSON.stringify(globs).slice(1, -1))}`),
+    kleur.dim(`Using the following patterns: ${kleur.bold(JSON.stringify(globs).slice(1, -1))}`),
   )
 
   for await (const changes of watch(configFile ? [configFile, ...globs] : globs, options)) {
@@ -316,6 +316,10 @@ const run$ = async (globs: string[], options: RunOptions, esbuild: Service): Pro
       console.error('\n' + kleur.dim('Waiting for file changes...'))
     }
   }
+
+  if (runCount < 0) {
+    console.error(kleur.yellow(`No matching files found...`))
+  }
 }
 
 function equals(a: Set<unknown>, b: Set<unknown>) {