From dbd86ee95773b00c7d9fa200d173552dbf6b2c70 Mon Sep 17 00:00:00 2001 From: Kazi Ahmed Date: Fri, 19 Aug 2022 13:39:50 +0530 Subject: [PATCH] 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 --- package-lock.json | 4 +- package.json | 2 +- src/constants.ts | 5 ++ src/content.ts | 18 ++-- src/frameworks/angular.ts | 5 +- src/frameworks/cra.ts | 5 +- src/frameworks/laravel.ts | 11 +-- src/frameworks/nextjs.ts | 11 +-- src/frameworks/nuxt2.ts | 17 ++-- src/frameworks/nuxt3.ts | 17 ++-- src/frameworks/remix.ts | 5 +- src/frameworks/sveltekit.ts | 5 +- src/frameworks/vite.ts | 5 +- src/types.ts | 5 +- tests/__snapshots__/drivers.spec.ts.snap | 103 +++++++++-------------- tests/content.spec.ts | 12 +-- 16 files changed, 92 insertions(+), 138 deletions(-) diff --git a/package-lock.json b/package-lock.json index d2cd5eb..5075e8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "twify", - "version": "0.3.2", + "version": "0.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "twify", - "version": "0.3.2", + "version": "0.3.3", "license": "MIT", "dependencies": { "chalk": "^5.0.1", diff --git a/package.json b/package.json index b3fb0b7..898f990 100644 --- 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 index a98639e..b027bb0 100644 --- 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 index b6d3020..8181c38 100644 --- 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 index f4b7a3f..e06fe69 100644 --- 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 index 34f95b1..34da2c6 100644 --- 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 index 5b30d1a..2ced485 100644 --- 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 index ec1e751..569e7b3 100644 --- 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 index 74681a6..9505e56 100644 --- 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 index 78d7d50..f5c174a 100644 --- 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 index d8dcd58..cae571c 100644 --- 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 index ba8d539..278cca8 100644 --- 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 index cfbbb03..93c70f9 100644 --- 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 index 8f3423c..a92a9ff 100644 --- 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 index d0f69ad..1c8d4f0 100644 --- 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", diff --git a/tests/content.spec.ts b/tests/content.spec.ts index c719859..d97c990 100644 --- a/tests/content.spec.ts +++ b/tests/content.spec.ts @@ -15,12 +15,12 @@ describe('Content Code Mod', () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any vi.spyOn(fs, 'readFile').mockResolvedValue(code as any); vi.stubGlobal('console', { ...console, log: vi.fn() }); + vi.spyOn(fs, 'existsSync') + .mockResolvedValueOnce(true) + .mockResolvedValueOnce(false); const writeSpy = vi.spyOn(fs, 'writeFile').mockResolvedValue(); const framework: Framework = { - content: { - name: 'fake-tailwind.js', - files: ['foo.{js,ts}', 'bar.{js,ts}'], - }, + content: ['foo.{js,ts}', 'bar.{js,ts}'], requiredDependencies: [], initCommands: [], cssLocation: 'css', @@ -28,11 +28,11 @@ describe('Content Code Mod', () => { }; await setupContent(framework); - const modified = addContentToCode(code, framework.content.files); + const modified = addContentToCode(code, framework.content); const [fileName, content] = writeSpy.mock.lastCall || []; - expect(fileName).toMatch('fake-tailwind.js'); + expect(fileName).toMatch('tailwind.config.js'); expect(content).toMatchSnapshot(); expect(content).toMatch(modified); });