feat: Search for Proper Tailwind Config File (#87)

* feat: Search for Proper Tailwind Config File * Update to Patch Version * Minor tweaks * Proper message when tailwind file not found
tzsk · Aug 19, 2022 · dbd86ee · dbd86ee
1 parent e61f85a
commit dbd86ee
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 138 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twify",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A Tool to Setup TailwindCSS in your Project with a Single Command",
   "bin": {
     "twify": "dist/main.js"

diff --git a/src/constants.ts b/src/constants.ts
@@ -4,3 +4,8 @@ export const CSS_STUB = `@tailwind base;
 `;
 
 export const prettierDependencies = ['prettier', 'prettier-plugin-tailwindcss'];
+
+export const tailwindConfigFiles = [
+  'tailwind.config.js',
+  'tailwind.config.cjs',
+];
diff --git a/src/content.ts b/src/content.ts
@@ -3,6 +3,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import j from 'jscodeshift';
 import { Framework } from './types';
+import { tailwindConfigFiles } from './constants';
 
 export function addContentToCode(code: string, content: string[]): string {
   const parse = j.withParser('flow');
@@ -23,16 +24,21 @@ export function addContentToCode(code: string, content: string[]): string {
 
 export async function setupContent({ content }: Framework) {
   console.log(
-    `\n${chalk.green('✔')} Configuring ${chalk.blue.bold(
-      content.name
-    )} content...`
+    `\n${chalk.green('✔')} Configuring ${chalk.blue.bold(content)} content...`
   );
-  console.log(chalk.blue(`- ${content.files.join('\n- ')}`));
+  console.log(chalk.blue(`- ${content.join('\n- ')}`));
 
-  const contentPath = path.join(process.cwd(), content.name);
+  const [contentPath] = tailwindConfigFiles
+    .map((file) => path.join(process.cwd(), file))
+    .filter((file) => fs.existsSync(file));
+
+  if (!contentPath) {
+    console.log(chalk.red('✘ Tailwind config not found.'));
+    return;
+  }
 
   const fileContent = await fs.readFile(contentPath, 'utf8');
-  const newContent = addContentToCode(fileContent, content.files);
+  const newContent = addContentToCode(fileContent, content);
 
   await fs.writeFile(contentPath, newContent);
 }
diff --git a/src/frameworks/angular.ts b/src/frameworks/angular.ts
@@ -4,10 +4,7 @@ const Angular: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init'],
   cssLocation: './src/styles.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: ['./src/**/*.{html,ts}'],
-  },
+  content: ['./src/**/*.{html,ts}'],
   steps: [],
 };
 

diff --git a/src/frameworks/cra.ts b/src/frameworks/cra.ts
@@ -4,10 +4,7 @@ const CreateReactApp: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init -p'],
   cssLocation: './src/index.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: ['./src/**/*.{js,jsx,ts,tsx}'],
-  },
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   steps: [],
 };
 

diff --git a/src/frameworks/laravel.ts b/src/frameworks/laravel.ts
@@ -5,13 +5,10 @@ const Laravel: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init -p'],
   cssLocation: './resources/css/app.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: [
-      './resources/**/*.blade.php',
-      './resources/**/*.{js,jsx,ts,tsx,vue,svelte}',
-    ],
-  },
+  content: [
+    './resources/**/*.blade.php',
+    './resources/**/*.{js,jsx,ts,tsx,vue,svelte}',
+  ],
   steps: [setupWelcomePage],
 };
 

diff --git a/src/frameworks/nextjs.ts b/src/frameworks/nextjs.ts
@@ -4,13 +4,10 @@ const NextJS: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init -p'],
   cssLocation: './styles/globals.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: [
-      './pages/**/*.{js,ts,jsx,tsx}',
-      './components/**/*.{js,ts,jsx,tsx}',
-    ],
-  },
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   steps: [],
 };
 

diff --git a/src/frameworks/nuxt2.ts b/src/frameworks/nuxt2.ts
@@ -10,16 +10,13 @@ const NuxtJS: Framework = {
   ],
   initCommands: ['npx tailwindcss init'],
   cssLocation: './assets/css/main.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: [
-      './components/**/*.{js,vue,ts}',
-      './layouts/**/*.vue',
-      './pages/**/*.vue',
-      './plugins/**/*.{js,ts}',
-      './nuxt.config.{js,ts}',
-    ],
-  },
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    './nuxt.config.{js,ts}',
+  ],
   steps: [setupConfigFile],
 };
 

diff --git a/src/frameworks/nuxt3.ts b/src/frameworks/nuxt3.ts
@@ -9,16 +9,13 @@ const NuxtJS: Framework = {
   ],
   initCommands: ['npx tailwindcss init'],
   cssLocation: './assets/css/main.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: [
-      './components/**/*.{js,vue,ts}',
-      './layouts/**/*.vue',
-      './pages/**/*.vue',
-      './app.vue',
-      './plugins/**/*.{js,ts}',
-    ],
-  },
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './app.vue',
+    './plugins/**/*.{js,ts}',
+  ],
   steps: [setupConfigFile],
 };
 

diff --git a/src/frameworks/remix.ts b/src/frameworks/remix.ts
@@ -4,10 +4,7 @@ import { setupIndexFile, setupPackageJson } from './steps/remix';
 const Remix: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init -p'],
-  content: {
-    name: 'tailwind.config.js',
-    files: ['./app/**/*.{js,ts,jsx,tsx}'],
-  },
+  content: ['./app/**/*.{js,ts,jsx,tsx}'],
   cssLocation: './styles/app.css',
   steps: [setupPackageJson, setupIndexFile],
 };

diff --git a/src/frameworks/sveltekit.ts b/src/frameworks/sveltekit.ts
@@ -14,10 +14,7 @@ const SvelteKit: Framework = {
   ],
   initCommands: ['npx tailwindcss init tailwind.config.cjs -p'],
   cssLocation: './src/app.css',
-  content: {
-    name: 'tailwind.config.cjs',
-    files: ['./src/**/*.{html,js,svelte,ts}'],
-  },
+  content: ['./src/**/*.{html,js,svelte,ts}'],
   steps: [movePostCSS, setupConfigFile, setupLayoutFile],
 };
 

diff --git a/src/frameworks/vite.ts b/src/frameworks/vite.ts
@@ -5,10 +5,7 @@ const Vite: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init -p'],
   cssLocation: './src/style.css',
-  content: {
-    name: 'tailwind.config.js',
-    files: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,svelte}'],
-  },
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,svelte}'],
   steps: [setupMainFile],
 };
 

diff --git a/src/types.ts b/src/types.ts
@@ -16,10 +16,7 @@ export interface Framework {
   requiredDependencies: string[];
   initCommands: string[];
   cssLocation: string;
-  content: {
-    name: string;
-    files: string[];
-  };
+  content: string[];
   steps: Step[];
 }
 

diff --git a/tests/__snapshots__/drivers.spec.ts.snap b/tests/__snapshots__/drivers.spec.ts.snap
@@ -2,13 +2,10 @@
 
 exports[`Drivers > has a list of drivers 1`] = `
 {
-  "content": {
-    "files": [
-      "./pages/**/*.{js,ts,jsx,tsx}",
-      "./components/**/*.{js,ts,jsx,tsx}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   "cssLocation": "./styles/globals.css",
   "initCommands": [
     "npx tailwindcss init -p",
@@ -24,16 +21,13 @@ exports[`Drivers > has a list of drivers 1`] = `
 
 exports[`Drivers > has a list of drivers 2`] = `
 {
-  "content": {
-    "files": [
-      "./components/**/*.{js,vue,ts}",
-      "./layouts/**/*.vue",
-      "./pages/**/*.vue",
-      "./plugins/**/*.{js,ts}",
-      "./nuxt.config.{js,ts}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./nuxt.config.{js,ts}",
+  ],
   "cssLocation": "./assets/css/main.css",
   "initCommands": [
     "npx tailwindcss init",
@@ -52,16 +46,13 @@ exports[`Drivers > has a list of drivers 2`] = `
 
 exports[`Drivers > has a list of drivers 3`] = `
 {
-  "content": {
-    "files": [
-      "./components/**/*.{js,vue,ts}",
-      "./layouts/**/*.vue",
-      "./pages/**/*.vue",
-      "./app.vue",
-      "./plugins/**/*.{js,ts}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./app.vue",
+    "./plugins/**/*.{js,ts}",
+  ],
   "cssLocation": "./assets/css/main.css",
   "initCommands": [
     "npx tailwindcss init",
@@ -79,12 +70,9 @@ exports[`Drivers > has a list of drivers 3`] = `
 
 exports[`Drivers > has a list of drivers 4`] = `
 {
-  "content": {
-    "files": [
-      "./app/**/*.{js,ts,jsx,tsx}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./app/**/*.{js,ts,jsx,tsx}",
+  ],
   "cssLocation": "./styles/app.css",
   "initCommands": [
     "npx tailwindcss init -p",
@@ -103,12 +91,9 @@ exports[`Drivers > has a list of drivers 4`] = `
 
 exports[`Drivers > has a list of drivers 5`] = `
 {
-  "content": {
-    "files": [
-      "./src/**/*.{html,js,svelte,ts}",
-    ],
-    "name": "tailwind.config.cjs",
-  },
+  "content": [
+    "./src/**/*.{html,js,svelte,ts}",
+  ],
   "cssLocation": "./src/app.css",
   "initCommands": [
     "npx tailwindcss init tailwind.config.cjs -p",
@@ -129,13 +114,10 @@ exports[`Drivers > has a list of drivers 5`] = `
 
 exports[`Drivers > has a list of drivers 6`] = `
 {
-  "content": {
-    "files": [
-      "./index.html",
-      "./src/**/*.{vue,js,ts,jsx,tsx,svelte}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx,svelte}",
+  ],
   "cssLocation": "./src/style.css",
   "initCommands": [
     "npx tailwindcss init -p",
@@ -153,12 +135,9 @@ exports[`Drivers > has a list of drivers 6`] = `
 
 exports[`Drivers > has a list of drivers 7`] = `
 {
-  "content": {
-    "files": [
-      "./src/**/*.{html,ts}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./src/**/*.{html,ts}",
+  ],
   "cssLocation": "./src/styles.css",
   "initCommands": [
     "npx tailwindcss init",
@@ -174,12 +153,9 @@ exports[`Drivers > has a list of drivers 7`] = `
 
 exports[`Drivers > has a list of drivers 8`] = `
 {
-  "content": {
-    "files": [
-      "./src/**/*.{js,jsx,ts,tsx}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   "cssLocation": "./src/index.css",
   "initCommands": [
     "npx tailwindcss init -p",
@@ -195,13 +171,10 @@ exports[`Drivers > has a list of drivers 8`] = `
 
 exports[`Drivers > has a list of drivers 9`] = `
 {
-  "content": {
-    "files": [
-      "./resources/**/*.blade.php",
-      "./resources/**/*.{js,jsx,ts,tsx,vue,svelte}",
-    ],
-    "name": "tailwind.config.js",
-  },
+  "content": [
+    "./resources/**/*.blade.php",
+    "./resources/**/*.{js,jsx,ts,tsx,vue,svelte}",
+  ],
   "cssLocation": "./resources/css/app.css",
   "initCommands": [
     "npx tailwindcss init -p",