Merge pull request tailwindlabs#640 from MattStypa/build_refactor

CLI build process improvements

Author: adamwathan

__tests__/cli.compile.test.js

@@ -0,0 +1,19 @@
+import path from 'path'
+
+import autoprefixer from 'autoprefixer'
+
+import tailwind from '../src'
+import compile from '../src/cli/compile'
+
+describe('cli compile', () => {
+  const inputFile = path.resolve(__dirname, 'fixtures/tailwind-input.css')
+  const outputFile = 'output.css'
+  const plugins = [tailwind(), autoprefixer]
+
+  it('compiles CSS file', () => {
+    return compile({ inputFile, outputFile, plugins }).then(result => {
+      expect(result.css).toContain('.example')
+      expect(result.css).toContain('-ms-input-placeholder')
+    })
+  })
+})

__tests__/cli.utils.test.js

@@ -1,4 +1,5 @@
 import path from 'path'
+
 import * as utils from '../src/cli/utils'
 
 describe('cli utils', () => {

src/cli/commands/build.js

@@ -1,12 +1,12 @@
 import autoprefixer from 'autoprefixer'
 import bytes from 'bytes'
 import chalk from 'chalk'
-import postcss from 'postcss'
 import prettyHrtime from 'pretty-hrtime'
 
 import tailwind from '../..'
 
 import commands from '.'
+import compile from '../compile'
 import * as emoji from '../emoji'
 import * as utils from '../utils'
 
@@ -57,68 +57,37 @@ function stopWithHelp(...msgs) {
   utils.die()
 }
 
-/**
- * Compiles CSS file.
- *
- * @param {string} inputFile
- * @param {string} configFile
- * @param {string} outputFile
- * @param {boolean} autoprefix
- * @return {Promise}
- */
-function build(inputFile, configFile, outputFile, autoprefix) {
-  const css = utils.readFile(inputFile)
-
-  return new Promise((resolve, reject) => {
-    postcss([tailwind(configFile)].concat(autoprefix ? [autoprefixer] : []))
-      .process(css, {
-        from: inputFile,
-        to: outputFile,
-      })
-      .then(resolve)
-      .catch(reject)
-  })
-}
-
 /**
  * Compiles CSS file and writes it to stdout.
  *
- * @param {string} inputFile
- * @param {string} configFile
- * @param {string} outputFile
- * @param {boolean} autoprefix
+ * @param {CompileOptions} compileOptions
  * @return {Promise}
  */
-function buildToStdout(inputFile, configFile, outputFile, autoprefix) {
-  return build(inputFile, configFile, outputFile, autoprefix).then(result =>
-    process.stdout.write(result.css)
-  )
+function buildToStdout(compileOptions) {
+  return compile(compileOptions).then(result => process.stdout.write(result.css))
 }
 
 /**
  * Compiles CSS file and writes it to a file.
  *
- * @param {string} inputFile
- * @param {string} configFile
- * @param {string} outputFile
- * @param {boolean} autoprefix
+ * @param {CompileOptions} compileOptions
  * @param {int[]} startTime
  * @return {Promise}
  */
-function buildToFile(inputFile, configFile, outputFile, autoprefix, startTime) {
+function buildToFile(compileOptions, startTime) {
   utils.header()
   utils.log()
-  utils.log(emoji.go, 'Building...', chalk.bold.cyan(inputFile))
+  utils.log(emoji.go, 'Building...', chalk.bold.cyan(compileOptions.inputFile))
 
-  return build(inputFile, configFile, outputFile, autoprefix).then(result => {
-    utils.writeFile(outputFile, result.css)
+  return compile(compileOptions).then(result => {
+    utils.writeFile(compileOptions.outputFile, result.css)
 
     const prettyTime = prettyHrtime(process.hrtime(startTime))
 
     utils.log()
     utils.log(emoji.yes, 'Finished in', chalk.bold.magenta(prettyTime))
     utils.log(emoji.pack, 'Size:', chalk.bold.magenta(bytes(result.css.length)))
-    utils.log(emoji.disk, 'Saved to', chalk.bold.cyan(outputFile))
+    utils.log(emoji.disk, 'Saved to', chalk.bold.cyan(compileOptions.outputFile))
     utils.footer()
   })
 }
@@ -145,9 +114,15 @@ export function run(cliParams, cliOptions) {
       !utils.exists(configFile) &&
       stop(chalk.bold.magenta(configFile), 'does not exist.')
 
+    const compileOptions = {
+      inputFile,
+      outputFile,
+      plugins: [tailwind(configFile)].concat(autoprefix ? [autoprefixer] : []),
+    }
+
     const buildPromise = outputFile
-      ? buildToFile(inputFile, configFile, outputFile, autoprefix, startTime)
-      : buildToStdout(inputFile, configFile, outputFile, autoprefix)
+      ? buildToFile(compileOptions, startTime)
+      : buildToStdout(compileOptions)
 
     buildPromise.then(resolve).catch(reject)
   })

src/cli/compile.js

@@ -0,0 +1,39 @@
+import postcss from 'postcss'
+
+import * as utils from './utils'
+
+/**
+ * Compiler options
+ *
+ * @typedef {Object} CompileOptions
+ * @property {string} inputFile
+ * @property {string} outputFile
+ * @property {array} plugins
+ */
+
+const defaultOptions = {
+  inputFile: null,
+  outputFile: null,
+  plugins: [],
+}
+
+/**
+ * Compiles CSS file.
+ *
+ * @param {CompileOptions} options
+ * @return {Promise}
+ */
+export default function compile(options = {}) {
+  const config = { ...defaultOptions, ...options }
+  const css = utils.readFile(config.inputFile)
+
+  return new Promise((resolve, reject) => {
+    postcss(config.plugins)
+      .process(css, {
+        from: config.inputFile,
+        to: config.outputFile,
+      })
+      .then(resolve)
+      .catch(reject)
+  })
+}