Skip to content

Commit

Permalink
✨ add carco support for tailwindcss
Browse files Browse the repository at this point in the history
  • Loading branch information
@beaussan
beaussan committed Nov 5, 2020
1 parent fc04720 commit 55792da
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 146 deletions.
81 changes: 32 additions & 49 deletions src/commands/add/tailwind.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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.');
}
Expand All @@ -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(
Expand All @@ -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' });
}
});
Expand All @@ -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',
},
};

Expand All @@ -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',
});
}
},
);
}
}
78 changes: 32 additions & 46 deletions src/tests/add/__snapshots__/tailwind.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -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 []`;
Expand All @@ -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.",
]
`;
78 changes: 27 additions & 51 deletions src/tests/add/tailwind.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
},
});
};
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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',
];
Expand Down

0 comments on commit 55792da

Please sign in to comment.