fix: Next 13 CSS File Location (#243)

Author: tzsk

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "twify",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "A Tool to Setup TailwindCSS in your Project with a Single Command",
   "bin": {
     "twify": "dist/main.js"
@@ -37,15 +37,17 @@
   "license": "MIT",
   "dependencies": {
     "chalk": "^5.0.1",
-    "commander": "^9.3.0",
+    "commander": "^10.0.0",
     "enquirer": "^2.3.6",
-    "fs-extra": "^10.1.0",
+    "fs-extra": "^11.1.0",
+    "glob": "^8.1.0",
     "gradient-string": "^2.0.1",
     "jscodeshift": "^0.14.0",
     "ora": "^6.1.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
+    "@types/glob": "^8.0.1",
     "@types/gradient-string": "^1.1.2",
     "@types/jscodeshift": "^0.11.5",
     "@types/node": "^18.0.0",
@@ -59,7 +61,7 @@
     "microbundle": "^0.15.0",
     "prettier": "^2.6.2",
     "typescript": "^4.6.4",
-    "vitest": "^0.25.1"
+    "vitest": "^0.27.2"
   },
   "prettier": {
     "singleQuote": true,

package.json

@@ -23,9 +23,7 @@ export function addContentToCode(code: string, content: string[]): string {
 }
 
 export async function setupContent({ content }: Framework) {
-  console.log(
-    `\n${chalk.green('✔')} Configuring ${chalk.blue.bold(content)} content...`
-  );
+  console.log(`\n${chalk.green('✔')} Configuring content paths...`);
   console.log(chalk.blue(`- ${content.join('\n- ')}`));
 
   const [contentPath] = tailwindConfigFiles

src/content.ts

@@ -1,9 +1,10 @@
 import { Framework } from '../types';
+import { resolveCssLocation } from './steps/next';
 
 const NextJS: Framework = {
   requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
   initCommands: ['npx tailwindcss init -p'],
-  cssLocation: './styles/globals.css',
+  cssLocation: resolveCssLocation,
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',

src/frameworks/nextjs.ts

@@ -0,0 +1,12 @@
+import glob from 'glob';
+import util from 'util';
+
+export async function resolveCssLocation() {
+  const [match] = await util.promisify(glob)('./**/globals.css');
+
+  if (!match) {
+    return './styles/globals.css';
+  }
+
+  return match;
+}

src/frameworks/steps/next.ts

@@ -45,13 +45,15 @@ export async function handle(framework: Framework, options: InitOptions) {
   }
 
   // Write content to cssLocation
+  const cssTarget =
+    typeof cssLocation === 'string' ? cssLocation : await cssLocation();
   console.log(
-    `\n${chalk.green('✔')} Setting up ${chalk.blue.bold(cssLocation)}...`
+    `\n${chalk.green('✔')} Setting up ${chalk.blue.bold(cssTarget)}...`
   );
-  fs.ensureFileSync(cssLocation);
-  const exitingCss = fs.readFileSync(cssLocation, 'utf8');
+  fs.ensureFileSync(cssTarget);
+  const exitingCss = fs.readFileSync(cssTarget, 'utf8');
   const updatedCss = !options.keep ? CSS_STUB : `${exitingCss}\n\n${CSS_STUB}`;
-  fs.writeFileSync(cssLocation, updatedCss);
+  fs.writeFileSync(cssTarget, updatedCss);
 
   await setupContent(framework);
 

src/processor.ts

@@ -12,10 +12,12 @@ export interface Step {
   (): Promise<void>;
 }
 
+type CSSLocation = () => Promise<string>;
+
 export interface Framework {
   requiredDependencies: string[];
   initCommands: string[];
-  cssLocation: string;
+  cssLocation: string | CSSLocation;
   content: string[];
   steps: Step[];
 }

src/types.ts

@@ -8,7 +8,7 @@ exports[`Drivers > has a list of drivers 1`] = `
     "./src/**/*.{js,ts,jsx,tsx}",
     "./app/**/*.{js,ts,jsx,tsx}",
   ],
-  "cssLocation": "./styles/globals.css",
+  "cssLocation": [Function],
   "initCommands": [
     "npx tailwindcss init -p",
   ],

tests/__snapshots__/drivers.spec.ts.snap

@@ -7,7 +7,7 @@ import {
   runCommand,
   runCommandSpawn,
 } from '../src/helpers';
-import { EventEmitter } from 'stream';
+import stream from 'stream';
 
 vi.mock('child_process');
 
@@ -106,7 +106,7 @@ describe('Helpers', () => {
   });
 
   it('can run command with spawn', async () => {
-    const emitter = new EventEmitter();
+    const emitter = new stream.EventEmitter();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     vi.mocked(spawn).mockReturnValue(emitter as any);
     const resolve = runCommandSpawn('cmd');

tests/helpers.spec.ts

@@ -92,7 +92,7 @@ describe('Processor', () => {
       content: ['content'],
       requiredDependencies: [],
       initCommands: [],
-      cssLocation: 'css',
+      cssLocation: () => Promise.resolve('css'),
       steps: [step],
     };
 

tests/processor.spec.ts

@@ -0,0 +1,32 @@
+import glob from 'glob';
+import { resolveCssLocation } from '../../src/frameworks/steps/next';
+
+vi.mock('glob');
+
+describe('Next JS CSS', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.resetAllMocks();
+  });
+
+  it('can resolve css location', async () => {
+    vi.mocked(glob)
+      .mockImplementationOnce((_, cb) => {
+        console.log(typeof cb, cb);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (cb as any)(null, ['foo']) as any;
+      })
+      .mockImplementationOnce((_, cb) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (cb as any)(null, []) as any;
+      });
+    const first = await resolveCssLocation();
+    const second = await resolveCssLocation();
+
+    expect(first).toStrictEqual('foo');
+    expect(second).toStrictEqual('./styles/globals.css');
+  });
+});