feat: make:tailwind command

scaffolds a basic tailwindcss config file

src/commands/make/tailwind.js

@@ -0,0 +1,47 @@
+const ora = require('ora')
+const path = require('path')
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const inquirer = require('inquirer')
+
+module.exports.scaffold = async (filename, cmd = {}) => {
+  if (cmd.args.length === 0) {
+    await inquirer
+      .prompt([
+        {
+          name: 'filename',
+          message: 'File name',
+          default: 'tailwind.config.js'
+        },
+        {
+          name: 'directory',
+          message: 'Directory to place it in',
+          default: './'
+        }
+      ])
+      .then(answers => {
+        filename = answers.filename
+        cmd.directory = answers.directory
+      })
+  }
+
+  filename = filename || 'tailwind.config.js'
+  cmd.directory = cmd.directory || './'
+
+  const spinner = ora()
+
+  if (path.parse(filename).ext !== '.js') {
+    return spinner.fail(`File must have a .js extension, i.e. ${filename}${chalk.bold('.js')}`)
+  }
+
+  const html = fs.readFileSync(path.resolve(__dirname, '../../stubs/config/tailwind.config.js'), 'utf8')
+  const destination = path.resolve(`${cmd.directory}/${filename}`)
+
+  if (fs.existsSync(destination)) {
+    return spinner.fail(`File exists: ${destination}`)
+  }
+
+  return fs.outputFile(destination, html)
+    .then(() => spinner.succeed(`Created new Tailwind CSS config in ${destination}`))
+    .catch(() => {})
+}

src/index.js

@@ -4,6 +4,7 @@ const Project = require('./commands/new')
 const Config = require('./commands/make/config')
 const Layout = require('./commands/make/layout')
 const updateNotifier = require('update-notifier')
+const Tailwind = require('./commands/make/tailwind')
 const Template = require('./commands/make/template')
 
 const notFoundError = 'Error: Framework not found\n\nMake sure to run this command in your Maizzle project root, with dependencies installed.'
@@ -33,6 +34,12 @@ module.exports = () => {
     .description('scaffold a new Config')
     .action((env, cmd) => Config.scaffold(env, cmd))
 
+  program
+    .command('make:tailwind [filename]')
+    .option('-d, --directory <dir>', 'directory where the file should be output')
+    .description('scaffold a new Tailwind CSS config')
+    .action((filename, cmd) => Tailwind.scaffold(filename, cmd))
+
   program
     .command('build [env]')
     .option('-b, --bin [bin]', 'path to the maizzle executable')

src/stubs/config/tailwind.config.js

@@ -0,0 +1,125 @@
+module.exports = {
+  theme: {
+    screens: {
+      sm: {max: '600px'},
+    },
+    extend: {
+      spacing: {
+        screen: '100vw',
+        full: '100%',
+        px: '1px',
+        0: '0',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+        5: '5px',
+        6: '6px',
+        7: '7px',
+        8: '8px',
+        9: '9px',
+        10: '10px',
+        11: '11px',
+        12: '12px',
+        14: '14px',
+        16: '16px',
+        20: '20px',
+        24: '24px',
+        28: '28px',
+        32: '32px',
+        36: '36px',
+        40: '40px',
+        44: '44px',
+        48: '48px',
+        52: '52px',
+        56: '56px',
+        60: '60px',
+        64: '64px',
+        72: '72px',
+        80: '80px',
+        96: '96px',
+        600: '600px',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '2/4': '50%',
+        '3/4': '75%',
+        '1/5': '20%',
+        '2/5': '40%',
+        '3/5': '60%',
+        '4/5': '80%',
+        '1/6': '16.666667%',
+        '2/6': '33.333333%',
+        '3/6': '50%',
+        '4/6': '66.666667%',
+        '5/6': '83.333333%',
+        '1/12': '8.333333%',
+        '2/12': '16.666667%',
+        '3/12': '25%',
+        '4/12': '33.333333%',
+        '5/12': '41.666667%',
+        '6/12': '50%',
+        '7/12': '58.333333%',
+        '8/12': '66.666667%',
+        '9/12': '75%',
+        '10/12': '83.333333%',
+        '11/12': '91.666667%',
+      },
+      borderRadius: {
+        sm: '2px',
+        DEFAULT: '4px',
+        lg: '8px',
+      },
+      fontFamily: {
+        sans: ['ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
+        serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+        mono: ['ui-monospace', 'Menlo', 'Consolas', 'monospace'],
+      },
+      fontSize: {
+        0: '0',
+        xs: '12px',
+        sm: '14px',
+        base: '16px',
+        lg: '18px',
+        xl: '20px',
+        '2xl': '24px',
+        '3xl': '30px',
+        '4xl': '36px',
+        '5xl': '48px',
+        '6xl': '60px',
+        '7xl': '72px',
+        '8xl': '96px',
+        '9xl': '128px',
+      },
+      inset: theme => ({
+        ...theme('spacing'),
+      }),
+      letterSpacing: theme => ({
+        ...theme('spacing'),
+      }),
+      lineHeight: theme => ({
+        ...theme('spacing'),
+      }),
+      maxHeight: theme => ({
+        ...theme('spacing'),
+      }),
+      maxWidth: theme => ({
+        ...theme('spacing'),
+      }),
+      minHeight: theme => ({
+        ...theme('spacing'),
+      }),
+      minWidth: theme => ({
+        ...theme('spacing'),
+      }),
+    },
+  },
+  corePlugins: {
+    animation: false,
+    backgroundOpacity: false,
+    borderOpacity: false,
+    divideOpacity: false,
+    placeholderOpacity: false,
+    textOpacity: false,
+  },
+}

test/test-tailwind.js

@@ -0,0 +1,48 @@
+const test = require('ava')
+const fs = require('fs-extra')
+const execa = require('execa')
+
+test.beforeEach(t => {
+  t.context.folder = '_temp_' + Math.random().toString(36).slice(2, 9)
+})
+
+test.afterEach.always(async t => {
+  if (t.context.folder) {
+    await fs.remove(t.context.folder)
+    delete t.context.folder
+  }
+})
+
+test('it scaffolds a tailwindcss config', async t => {
+  await execa.command('node bin/maizzle make:tailwind tailwind.config.js')
+
+  const file = 'tailwind.config.js'
+
+  t.true(fs.existsSync(file))
+  t.true(fs.readFileSync(file, 'utf8').length > 0)
+
+  await fs.remove('tailwind.config.js')
+})
+
+test('it scaffolds a layout in the specified directory', async t => {
+  await execa.command(`node bin/maizzle make:tailwind tailwind.config.js -d ${t.context.folder}`)
+
+  const file = `${t.context.folder}/tailwind.config.js`
+
+  t.true(fs.existsSync(file))
+  t.true(fs.readFileSync(file, 'utf8').length > 0)
+})
+
+test('it requires a file extension', async t => {
+  await execa.command(`node bin/maizzle make:tailwind tailwind.config -d ${t.context.folder}`)
+
+  t.false(fs.existsSync(`${t.context.folder}/tailwind.config`))
+})
+
+test('it does not overwrite existing files', async t => {
+  await execa.command(`node bin/maizzle make:tailwind tailwind.config.js -d ${t.context.folder}`)
+  const mtimeMs = fs.statSync(`${t.context.folder}/tailwind.config.js`).mtimeMs
+  await execa.command(`node bin/maizzle make:tailwind tailwind.config.js -d ${t.context.folder}`)
+
+  t.is(fs.statSync(`${t.context.folder}/tailwind.config.js`).mtimeMs, mtimeMs)
+})