feat: Preserve CSS & Package Manager (#34)

* feat: Preserve CSS & Package Manager

* Version patch

Author: tzsk

README.md

@@ -15,12 +15,36 @@ Here is a screen grab of how it looks.
 
 ## :gift: Installation
 
-Scaffold a new project of your choice then simply run,
+Scaffold a new project of your choice of framework, then simply run,
 
 ```sh
 npx twify init
 ```
 
+### Command Options
+
+Other than `--help` you can also do more.
+
+#### Preserve Existing CSS
+
+By default, twify will replace your existing CSS and only keep Tailwind. But if you want to preserve the existing CSS you can use the `-p, --preserve` flag.
+
+```sh
+npx twify init -p
+# OR
+npx twify init --preserve
+```
+
+#### Force Package Manager for Installation
+
+By default, twify will try to guess the Package Manager for installing dependencies in your project but if you want to force your standard or you don't want to take any chances you can use the `-i, --installer` option.
+
+```sh
+npx twify init -i yarn # Options: npm, yarn, pnpm
+# OR
+npx twify init --installer yarn
+```
+
 ## :star: Supported Projects
 
 Below are the list of Supported Projects,

assets/twify.png

@@ -1,6 +1,6 @@
 {
   "name": "twify",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A Tool to Setup TailwindCSS in your Project with a Single Command",
   "bin": {
     "twify": "dist/main.js"

package-lock.json

@@ -4,8 +4,9 @@ import gradient from 'gradient-string';
 import { drivers } from '../drivers';
 import { detectFramework } from '../helpers';
 import { handle } from '../processor';
+import { InitOptions } from '../types';
 
-export const InitCommand = async () => {
+export const InitCommand = async (options: InitOptions = {}) => {
   console.log(gradient.fruit('\n\n🔥 Welcome to Twify!\n'));
   console.log(
     chalk.blue.bold(
@@ -65,7 +66,7 @@ export const InitCommand = async () => {
 
   console.log(chalk.cyan.bold('\n🚀 Applying fresh quote of paint...'));
   try {
-    await handle(framework);
+    await handle(framework, options);
 
     console.log(gradient.morning('\n✨ You are all set with TailwindCSS! \n'));
   } catch (e) {

package.json

@@ -1,7 +1,7 @@
 import fs from 'fs-extra';
 import { exec } from 'child_process';
 import path from 'path';
-import { Driver } from './types';
+import { Driver, PackageManager } from './types';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -28,10 +28,21 @@ export function detectFramework(): Driver | undefined {
   if (devDependencies['vite']) return 'Vite';
 }
 
-export function detectInstaller(): string {
-  return fs.existsSync(path.join(process.cwd(), 'yarn.lock'))
-    ? 'yarn add --dev'
-    : 'npm install --save-dev';
+export function installerPrefix(manager?: PackageManager): string {
+  const npm = 'npm install --save-dev';
+  const yarn = 'yarn add --dev';
+  const pnpm = 'pnpm install --save-dev';
+
+  switch (manager) {
+    case 'npm':
+      return npm;
+    case 'yarn':
+      return yarn;
+    case 'pnpm':
+      return pnpm;
+    default:
+      return fs.existsSync(path.join(process.cwd(), 'yarn.lock')) ? yarn : npm;
+  }
 }
 
 export function runCommand(cmd: string) {

src/commands/init.ts

@@ -13,6 +13,11 @@ async function runApp(app: Command) {
 
   app
     .command('init')
+    .option(
+      '-i, --installer <installer>',
+      'Explicitly set the package manager to use'
+    )
+    .option('-p, --preserve', 'Preserve existing CSS')
     .description('Initialize TailwindCSS in the current project')
     .action(InitCommand);
 

src/helpers.ts

@@ -1,14 +1,14 @@
 import fs from 'fs-extra';
 import chalk from 'chalk';
-import { Framework } from './types';
+import { Framework, InitOptions } from './types';
 import { CSS_STUB } from './constants';
-import { detectInstaller, runCommand } from './helpers';
+import { installerPrefix, runCommand } from './helpers';
 import { setupContent } from './content';
 import ora from 'ora';
 
-export async function handle(framework: Framework) {
+export async function handle(framework: Framework, options: InitOptions) {
   const { requiredDependencies, initCommands, cssLocation, steps } = framework;
-  const installer = detectInstaller();
+  const installer = installerPrefix(options.installer);
 
   // Install required dependencies
   if (requiredDependencies.length) {
@@ -39,7 +39,10 @@ export async function handle(framework: Framework) {
   );
   fs.ensureFileSync(cssLocation);
   const exitingCss = fs.readFileSync(cssLocation, 'utf8');
-  fs.writeFileSync(cssLocation, `${exitingCss}\n\n${CSS_STUB}`);
+  const updatedCss = !options.preserve
+    ? CSS_STUB
+    : `${exitingCss}\n\n${CSS_STUB}`;
+  fs.writeFileSync(cssLocation, updatedCss);
 
   await setupContent(framework);
 

src/main.ts

@@ -1,5 +1,12 @@
 import { drivers } from './drivers';
 
+export type PackageManager = 'npm' | 'yarn' | 'pnpm';
+
+export interface InitOptions {
+  preserve?: boolean;
+  installer?: PackageManager;
+}
+
 export interface Step {
   (): Promise<void>;
 }

src/processor.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import { exec } from 'child_process';
-import { detectFramework, detectInstaller, runCommand } from '../src/helpers';
+import { detectFramework, installerPrefix, runCommand } from '../src/helpers';
 
 vi.mock('child_process');
 
@@ -46,10 +46,14 @@ describe('Helpers', () => {
     const dep = vi.spyOn(fs, 'existsSync');
 
     dep.mockReturnValue(true);
-    expect(detectInstaller()).toBe('yarn add --dev');
+    expect(installerPrefix()).toBe('yarn add --dev');
 
     dep.mockReturnValue(false);
-    expect(detectInstaller()).toBe('npm install --save-dev');
+    expect(installerPrefix()).toBe('npm install --save-dev');
+
+    expect(installerPrefix('pnpm')).toBe('pnpm install --save-dev');
+    expect(installerPrefix('npm')).toBe('npm install --save-dev');
+    expect(installerPrefix('yarn')).toBe('yarn add --dev');
   });
 
   it('can run command', async () => {

src/types.ts

@@ -7,6 +7,7 @@ vi.mock('commander', () => {
       description: vi.fn().mockReturnThis(),
       version: vi.fn().mockReturnThis(),
       command: vi.fn().mockReturnThis(),
+      option: vi.fn().mockReturnThis(),
       parse: vi.fn().mockReturnThis(),
       action: vi.fn().mockReturnThis(),
     },

tests/helpers.spec.ts

@@ -1,10 +1,15 @@
 import fs from 'fs-extra';
+import { CSS_STUB } from '../src/constants';
 import * as content from '../src/content';
 import * as helpers from '../src/helpers';
 import { handle } from '../src/processor';
 import { Framework } from '../src/types';
 
 describe('Processor', () => {
+  beforeAll(() => {
+    vi.stubGlobal('console', { ...console, log: vi.fn() });
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -13,8 +18,39 @@ describe('Processor', () => {
     vi.stubGlobal('console', { log: vi.fn() });
     vi.spyOn(fs, 'ensureFileSync').mockReturnValue();
     vi.spyOn(fs, 'readFileSync').mockReturnValue('');
-    vi.spyOn(fs, 'writeFileSync').mockReturnValue();
-    vi.spyOn(helpers, 'detectInstaller').mockReturnValue('npm');
+    const write = vi.spyOn(fs, 'writeFileSync').mockReturnValue();
+    vi.spyOn(helpers, 'installerPrefix').mockReturnValue('npm');
+    const runner = vi
+      .spyOn(helpers, 'runCommand')
+      .mockReturnValue(Promise.resolve());
+    const setup = vi.spyOn(content, 'setupContent').mockResolvedValue();
+    const step = vi.fn().mockResolvedValue(true);
+    const framework: Framework = {
+      content: {
+        name: 'content',
+        files: [],
+      },
+      requiredDependencies: ['deps'],
+      initCommands: ['init'],
+      cssLocation: 'css',
+      steps: [step],
+    };
+
+    await handle(framework, {});
+
+    expect(runner).toHaveBeenCalledWith('npm deps');
+    expect(runner).toHaveBeenCalledWith('init');
+    expect(setup).toHaveBeenCalledWith(framework);
+    expect(step).toHaveBeenCalled();
+    expect(write).toHaveBeenCalledWith('css', CSS_STUB);
+  });
+
+  it('will process a framework driver with replace', async () => {
+    vi.stubGlobal('console', { log: vi.fn() });
+    vi.spyOn(fs, 'ensureFileSync').mockReturnValue();
+    vi.spyOn(fs, 'readFileSync').mockReturnValue('existing');
+    const write = vi.spyOn(fs, 'writeFileSync').mockReturnValue();
+    vi.spyOn(helpers, 'installerPrefix').mockReturnValue('npm');
     const runner = vi
       .spyOn(helpers, 'runCommand')
       .mockReturnValue(Promise.resolve());
@@ -31,11 +67,12 @@ describe('Processor', () => {
       steps: [step],
     };
 
-    await handle(framework);
+    await handle(framework, { preserve: true });
 
     expect(runner).toHaveBeenCalledWith('npm deps');
     expect(runner).toHaveBeenCalledWith('init');
     expect(setup).toHaveBeenCalledWith(framework);
     expect(step).toHaveBeenCalled();
+    expect(write).toHaveBeenCalledWith('css', 'existing\n\n' + CSS_STUB);
   });
 });