Merge branch 'master' into next

This commit is contained in:
Adam Wathan 2019-02-22 10:05:31 -05:00
commit db7f1e6728
6 changed files with 84 additions and 49 deletions

View file

@ -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')
})
})
})

View file

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

View file

@ -1,9 +1,9 @@
import _ from 'lodash'
import postcss from 'postcss'
import _postcss from 'postcss'
import processPlugins from '../src/util/processPlugins'
function css(nodes) {
return postcss.root({ nodes }).toString()
return _postcss.root({ nodes }).toString()
}
function makeConfig(overrides) {
@ -95,7 +95,7 @@ test('plugins can create utilities with arrays of objects', () => {
test('plugins can create utilities with raw PostCSS nodes', () => {
const { components, utilities } = processPlugins(
[
function({ addUtilities }) {
function({ addUtilities, postcss }) {
addUtilities([
postcss.rule({ selector: '.object-fill' }).append([
postcss.decl({
@ -140,7 +140,7 @@ test('plugins can create utilities with raw PostCSS nodes', () => {
test('plugins can create utilities with mixed object styles and PostCSS nodes', () => {
const { components, utilities } = processPlugins(
[
function({ addUtilities }) {
function({ addUtilities, postcss }) {
addUtilities([
{
'.object-fill': {
@ -317,7 +317,7 @@ test('plugins can add base styles with raw PostCSS nodes', () => {
test('plugins can create components with raw PostCSS nodes', () => {
const { components, utilities } = processPlugins(
[
function({ addComponents }) {
function({ addComponents, postcss }) {
addComponents([
postcss.rule({ selector: '.btn-blue' }).append([
postcss.decl({
@ -366,7 +366,7 @@ test('plugins can create components with raw PostCSS nodes', () => {
test('plugins can create components with mixed object styles and raw PostCSS nodes', () => {
const { components, utilities } = processPlugins(
[
function({ addComponents }) {
function({ addComponents, postcss }) {
addComponents([
postcss.rule({ selector: '.btn-blue' }).append([
postcss.decl({

View file

@ -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)
})

39
src/cli/compile.js Normal file
View file

@ -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)
})
}

View file

@ -27,6 +27,7 @@ export default function(plugins, config) {
plugins.forEach(plugin => {
plugin({
postcss,
config: (path, defaultValue) => _.get(config, path, defaultValue),
e: escapeClassName,
prefix: applyConfiguredPrefix,