✨ add carco support for tailwindcss

src/commands/add/tailwind.ts

@@ -1,5 +1,5 @@
 import { BaseCommand } from '../../utls/base-command';
-import { system, filesystem, patching } from 'gluegun';
+import { system, filesystem } from 'gluegun';
 import * as prompts from 'prompts';
 import { BaseAddCommand } from '../../utls/base-add-command';
 
@@ -19,6 +19,12 @@ export default class Tailwind extends BaseAddCommand {
       this.error('Tailwind is already installed in this project.');
     }
 
+    if (this.hasDependencyInPackageJson('@craco/craco')) {
+      this.error(
+        'Craco is already installed, this may bug so in case, I will stop there.',
+      );
+    }
+
     if (!this.hasDependencyInPackageJson('react-scripts')) {
       this.error('This script support only for now create react apps.');
     }
@@ -36,17 +42,14 @@ export default class Tailwind extends BaseAddCommand {
     );
 
     if (shouldCommit) {
-      this.initGit();
+      await this.initGit();
     }
 
     await this.installForCreateReactApps(shouldCommit);
   }
 
   async installForCreateReactApps(shouldCommit: boolean): Promise<void> {
-    await this.addDevDependency('@fullhuman/postcss-purgecss', shouldCommit);
-    await this.addDevDependency('autoprefixer', shouldCommit);
-    await this.addDevDependency('npm-run-all', shouldCommit);
-    await this.addDevDependency('postcss-cli', shouldCommit);
+    await this.addDevDependency('@craco/craco', shouldCommit);
     await this.addDependency('tailwindcss', shouldCommit);
 
     await this.runWithSpinner(
@@ -62,45 +65,47 @@ export default class Tailwind extends BaseAddCommand {
         }
       },
     );
-    await this.runWithSpinner('Generating postcss', async () => {
+    await this.runWithSpinner('Generating craco postcssconfig', async () => {
       await filesystem.write(
-        'postcss.config.js',
-        `const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: ['./src/**/*.jsx', './src/**/*.js', './src/index.js', './public/index.html'],
-  css: ['./src/tailwind.css'],
-  // Include any special characters you're using in this regular expression
-  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-});
-module.exports = {
-  plugins: [
-    require('tailwindcss')('./tailwind.config.js'),
-    require('autoprefixer'),
-    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
-  ],
+        'craco.config.js',
+        `module.exports = {
+  style: {
+    postcss: {
+      plugins: [require('tailwindcss')('./tailwind.config.js')],
+    },
+  },
 };
 `,
       );
 
       if (shouldCommit) {
-        await this.gitAdd({ filepath: 'postcss.config.js' });
-        await this.gitCommit({ message: ':wrench: add postcss config file' });
+        await this.gitAdd({ filepath: 'craco.config.js' });
+        await this.gitCommit({ message: ':wrench: craco postcss config file' });
       }
     });
 
     await this.runWithSpinner('Generating tailwind full css', async () => {
       await filesystem.dir('src/css');
       await filesystem.write(
-        'src/css/tailwind.src.css',
+        'src/css/tailwind.css',
         `@tailwind base;
 
+/* Write your own custom base styles here */
+
+/* Start purging... */
 @tailwind components;
+/* Stop purging. */
 
+/* Start purging... */
 @tailwind utilities;
+/* Stop purging. */
+
+/* Your own custom utilities */
 `,
       );
 
       if (shouldCommit) {
-        await this.gitAdd({ filepath: 'src/css/tailwind.src.css' });
+        await this.gitAdd({ filepath: 'src/css/tailwind.css' });
         await this.gitCommit({ message: ':wrench: add tailwind css file' });
       }
     });
@@ -112,14 +117,9 @@ module.exports = {
         ...packageJsonWithDeps,
         scripts: {
           ...packageJsonWithDeps.scripts,
-          'start': 'npm-run-all -p start:css start:js',
-          'build': 'npm-run-all build:css build:js',
-          'start:js': packageJsonWithDeps.scripts.start,
-          'build:js': packageJsonWithDeps.scripts.build,
-          'start:css':
-            'postcss src/css/tailwind.src.css -o src/tailwind.css -w',
-          'build:css':
-            'postcss src/css/tailwind.src.css -o src/tailwind.css --env production',
+          start: 'craco start',
+          build: 'craco build',
+          test: 'craco test',
         },
       };
 
@@ -132,22 +132,5 @@ module.exports = {
         });
       }
     });
-
-    await this.runWithSpinner(
-      'Adding full tailwind css to .gitignore',
-      async () => {
-        await patching.append(
-          '.gitignore',
-          '\n# ignore tailwind generated css\nsrc/tailwind.css',
-        );
-
-        if (shouldCommit) {
-          await this.gitAdd({ filepath: '.gitignore' });
-          await this.gitCommit({
-            message: ':see_no_evil: add generated tailwind to .gitignore',
-          });
-        }
-      },
-    );
   }
 }

src/tests/add/__snapshots__/tailwind.spec.ts.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`nbx add:tailwind should error if craco is found 1`] = `Array []`;
+
 exports[`nbx add:tailwind should error if no react is found 1`] = `Array []`;
 
 exports[`nbx add:tailwind should error if tailwind is found 1`] = `Array []`;
@@ -22,85 +24,69 @@ OPTIONS
 `;
 
 exports[`nbx add:tailwind should work on a react application with commits 1`] = `
-"const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: ['./src/**/*.jsx', './src/**/*.js', './src/index.js', './public/index.html'],
-  css: ['./src/tailwind.css'],
-  // Include any special characters you're using in this regular expression
-  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-});
-module.exports = {
-  plugins: [
-    require('tailwindcss')('./tailwind.config.js'),
-    require('autoprefixer'),
-    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
-  ],
-};
+"@tailwind base;
+
+/* Write your own custom base styles here */
+
+/* Start purging... */
+@tailwind components;
+/* Stop purging. */
+
+/* Start purging... */
+@tailwind utilities;
+/* Stop purging. */
+
+/* Your own custom utilities */
 "
 `;
 
 exports[`nbx add:tailwind should work on a react application with commits 2`] = `
 Array [
-  "Adding @fullhuman/postcss-purgecss as a dev dependency",
-  "The step was done without any error.",
-  "Adding autoprefixer as a dev dependency",
-  "The step was done without any error.",
-  "Adding npm-run-all as a dev dependency",
-  "The step was done without any error.",
-  "Adding postcss-cli as a dev dependency",
+  "Adding @craco/craco as a dev dependency",
   "The step was done without any error.",
   "Adding tailwindcss as a dependency",
   "The step was done without any error.",
   "Generating tailwind initial config",
   "The step was done without any error.",
-  "Generating postcss",
+  "Generating craco postcssconfig",
   "The step was done without any error.",
   "Generating tailwind full css",
   "The step was done without any error.",
   "Adding package.json scripts",
   "The step was done without any error.",
-  "Adding full tailwind css to .gitignore",
-  "The step was done without any error.",
 ]
 `;
 
 exports[`nbx add:tailwind should work on a react application without commits 1`] = `
-"const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: ['./src/**/*.jsx', './src/**/*.js', './src/index.js', './public/index.html'],
-  css: ['./src/tailwind.css'],
-  // Include any special characters you're using in this regular expression
-  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-});
-module.exports = {
-  plugins: [
-    require('tailwindcss')('./tailwind.config.js'),
-    require('autoprefixer'),
-    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
-  ],
-};
+"@tailwind base;
+
+/* Write your own custom base styles here */
+
+/* Start purging... */
+@tailwind components;
+/* Stop purging. */
+
+/* Start purging... */
+@tailwind utilities;
+/* Stop purging. */
+
+/* Your own custom utilities */
 "
 `;
 
 exports[`nbx add:tailwind should work on a react application without commits 2`] = `
 Array [
-  "Adding @fullhuman/postcss-purgecss as a dev dependency",
-  "The step was done without any error.",
-  "Adding autoprefixer as a dev dependency",
-  "The step was done without any error.",
-  "Adding npm-run-all as a dev dependency",
-  "The step was done without any error.",
-  "Adding postcss-cli as a dev dependency",
+  "Adding @craco/craco as a dev dependency",
   "The step was done without any error.",
   "Adding tailwindcss as a dependency",
   "The step was done without any error.",
   "Generating tailwind initial config",
   "The step was done without any error.",
-  "Generating postcss",
+  "Generating craco postcssconfig",
   "The step was done without any error.",
   "Generating tailwind full css",
   "The step was done without any error.",
   "Adding package.json scripts",
   "The step was done without any error.",
-  "Adding full tailwind css to .gitignore",
-  "The step was done without any error.",
 ]
 `;

src/tests/add/tailwind.spec.ts

@@ -12,22 +12,14 @@ import {
 jest.setTimeout(90000);
 
 const checkPackgeAndPostcssConfig = async () => {
-  const [
-    tailwind,
-    purgecss,
-    autoprefixer,
-    npmRunAll,
-    postcss,
-  ] = await Promise.all([
+  const [tailwind, craco] = await Promise.all([
     latestVersion('tailwindcss'),
-    latestVersion('@fullhuman/postcss-purgecss'),
-    latestVersion('autoprefixer'),
-    latestVersion('npm-run-all'),
-    latestVersion('postcss-cli'),
+    latestVersion('@craco/craco'),
   ]);
   const packageJson = filesystem.read('package.json', 'json');
 
-  expect(filesystem.read('postcss.config.js', 'utf8')).toMatchSnapshot();
+  expect(filesystem.read('src/css/tailwind.css', 'utf8')).toMatchSnapshot();
+  expect(filesystem.read('tailwind.config.js', 'utf8')).toBeDefined();
   expect(packageJson).toStrictEqual({
     name: 'sample',
     version: '0.1.0',
@@ -37,21 +29,13 @@ const checkPackgeAndPostcssConfig = async () => {
       'tailwindcss': tailwind,
     },
     devDependencies: {
-      '@fullhuman/postcss-purgecss': purgecss,
-      'autoprefixer': autoprefixer,
-      'npm-run-all': npmRunAll,
-      'postcss-cli': postcss,
+      '@craco/craco': craco,
     },
     scripts: {
-      'start': 'npm-run-all -p start:css start:js',
-      'start:css': 'postcss src/css/tailwind.src.css -o src/tailwind.css -w',
-      'start:js': 'react-scripts start',
-      'build': 'npm-run-all build:css build:js',
-      'build:css':
-        'postcss src/css/tailwind.src.css -o src/tailwind.css --env production',
-      'build:js': 'react-scripts build',
-      'test': 'react-scripts test',
-      'eject': 'react-scripts eject',
+      start: 'craco start',
+      build: 'craco build',
+      test: 'craco test',
+      eject: 'react-scripts eject',
     },
   });
 };
@@ -88,6 +72,18 @@ testCli({
         errorMessage: 'Tailwind is already installed in this project.',
       }),
     },
+    {
+      name: 'error if craco is found',
+      runner: expectFailGitCommits({
+        packageJson: {
+          dependencies: {
+            '@craco/craco': '2.0.0',
+          },
+        },
+        errorMessage:
+          'Craco is already installed, this may bug so in case, I will stop there.',
+      }),
+    },
     {
       name: 'work on a react application without commits',
       runner: expectGitCommits({
@@ -130,44 +126,24 @@ testCli({
           },
         },
         expectGitLog: async () => {
-          const [
-            tailwind,
-            purgecss,
-            autoprefixer,
-            npmRunAll,
-            postcss,
-          ] = await Promise.all([
+          const [tailwind, craco] = await Promise.all([
             latestVersion('tailwindcss'),
-            latestVersion('@fullhuman/postcss-purgecss'),
-            latestVersion('autoprefixer'),
-            latestVersion('npm-run-all'),
-            latestVersion('postcss-cli'),
+            latestVersion('@craco/craco'),
           ]);
 
           return [
-            ':see_no_evil: add generated tailwind to .gitignore',
-            'M\t.gitignore',
             ':wrench: add script for tailwind to package.json',
             'M\tpackage.json',
             ':wrench: add tailwind css file',
-            'A\tsrc/css/tailwind.src.css',
-            ':wrench: add postcss config file',
-            'A\tpostcss.config.js',
+            'A\tsrc/css/tailwind.css',
+            ':wrench: craco postcss config file',
+            'A\tcraco.config.js',
             ':wrench: add tailwind config file',
             'A\ttailwind.config.js',
             `:heavy_plus_sign: add tailwindcss@${tailwind} as a dependency`,
             'M\tpackage.json',
             'M\tyarn.lock',
-            `:heavy_plus_sign: add postcss-cli@${postcss} as a dev dependency`,
-            'M\tpackage.json',
-            'M\tyarn.lock',
-            `:heavy_plus_sign: add npm-run-all@${npmRunAll} as a dev dependency`,
-            'M\tpackage.json',
-            'M\tyarn.lock',
-            `:heavy_plus_sign: add autoprefixer@${autoprefixer} as a dev dependency`,
-            'M\tpackage.json',
-            'M\tyarn.lock',
-            `:heavy_plus_sign: add @fullhuman/postcss-purgecss@${purgecss} as a dev dependency`,
+            `:heavy_plus_sign: add @craco/craco@${craco} as a dev dependency`,
             'M\tpackage.json',
             'M\tyarn.lock',
           ];