wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Reverted changes to processTailwindFeatures that would impact Webpack watch ability. As a result all commands also became Promise based

Browse source
This commit is contained in:
mattstypa 2018-09-14 11:07:23 -05:00
parent 933b557e87
commit d91eea88fb
7 changed files with 98 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

35
__tests__/cli.test.js
View file

@ -15,35 +15,40 @@ describe('cli', () => {
describe('init', () => {
it('creates a Tailwind config file', () => {
cli(['init'])
expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultConfigFile)
expect(utils.writeFile.mock.calls[0][1]).toContain('defaultConfig')
cli(['init']).then(() => {
expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultConfigFile)
expect(utils.writeFile.mock.calls[0][1]).toContain('defaultConfig')
})
})
it('creates a Tailwind config file in a custom location', () => {
cli(['init', 'custom.js'])
expect(utils.writeFile.mock.calls[0][0]).toEqual('custom.js')
expect(utils.writeFile.mock.calls[0][1]).toContain('defaultConfig')
cli(['init', 'custom.js']).then(() => {
expect(utils.writeFile.mock.calls[0][0]).toEqual('custom.js')
expect(utils.writeFile.mock.calls[0][1]).toContain('defaultConfig')
})
})
})
describe('build', () => {
it('compiles CSS file', () => {
cli(['build', inputCssPath])
expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultOutputFile)
expect(utils.writeFile.mock.calls[0][1]).toContain('.example')
cli(['build', inputCssPath]).then(() => {
expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultOutputFile)
expect(utils.writeFile.mock.calls[0][1]).toContain('.example')
})
})
it('compiles CSS file using custom configuration', () => {
cli(['build', inputCssPath, '--config', customConfigPath])
expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultOutputFile)
expect(utils.writeFile.mock.calls[0][1]).toContain('400px')
cli(['build', inputCssPath, '--config', customConfigPath]).then(() => {
expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultOutputFile)
expect(utils.writeFile.mock.calls[0][1]).toContain('400px')
})
})
it('creates compiled CSS file in a custom location', () => {
cli(['build', inputCssPath, '--output', 'custom.css'])
expect(utils.writeFile.mock.calls[0][0]).toEqual('custom.css')
expect(utils.writeFile.mock.calls[0][1]).toContain('.example')
cli(['build', inputCssPath, '--output', 'custom.css']).then(() => {
expect(utils.writeFile.mock.calls[0][0]).toEqual('custom.css')
expect(utils.writeFile.mock.calls[0][1]).toContain('.example')
})
})
})
})

9
src/cli.js
View file

@ -7,12 +7,9 @@ import { log, die } from './cli/utils'
* Runs the CLI application.
*/
function run() {
try {
main(process.argv.slice(2))
log()
} catch (e) {
die(e.stack)
}
main(process.argv.slice(2))
.then(() => log())
.catch(error => die(error.stack))
}
run()

62
src/cli/commands/build.js
View file

@ -34,39 +34,47 @@ export const optionMap = {
*
* @param {string[]} cliParams
* @param {object} cliOptions
* @return {Promise}
*/
export function run(cliParams, cliOptions) {
const time = process.hrtime()
const inputFile = cliParams[1]
const configFile = cliOptions.config && cliOptions.config[0]
const outputFile = (cliOptions.output && cliOptions.output[0]) || constants.defaultOutputFile
return new Promise((resolve, reject) => {
const time = process.hrtime()
const inputFile = cliParams[1]
const configFile = cliOptions.config && cliOptions.config[0]
const outputFile = (cliOptions.output && cliOptions.output[0]) || constants.defaultOutputFile
if (!inputFile) {
error('CSS file is required.')
commands.help.forCommand(this)
die()
}
if (!inputFile) {
error('CSS file is required.')
commands.help.forCommand(this)
die()
}
!exists(inputFile) && die(chalk.bold.magenta(inputFile), 'does not exist.')
configFile && !exists(configFile) && die(chalk.bold.magenta(configFile), 'does not exist.')
!exists(inputFile) && die(chalk.bold.magenta(inputFile), 'does not exist.')
configFile && !exists(configFile) && die(chalk.bold.magenta(configFile), 'does not exist.')
log()
log(emoji.go, 'Building', chalk.bold.cyan(inputFile))
log()
log(emoji.go, 'Building', chalk.bold.cyan(inputFile))
const css = readFile(inputFile)
const plugins = [tailwind(configFile), autoprefixer]
const css = readFile(inputFile)
const result = postcss(plugins).process(css, {
from: inputFile,
to: outputFile,
const postcssPromise = postcss([tailwind(configFile), autoprefixer]).process(css, {
from: inputFile,
to: outputFile,
})
postcssPromise
.then(result => {
writeFile(outputFile, result.css)
const prettyTime = prettyHrtime(process.hrtime(time))
log()
log(emoji.yes, 'Finished in', chalk.bold.magenta(prettyTime))
log(emoji.pack, 'Size:', chalk.bold.magenta(bytes(result.css.length)))
log(emoji.disk, 'Saved to', chalk.bold.cyan(outputFile))
resolve()
})
.catch(reject)
})
writeFile(outputFile, result.css)
const prettyTime = prettyHrtime(process.hrtime(time))
log()
log(emoji.yes, 'Finished in', chalk.bold.magenta(prettyTime))
log(emoji.pack, 'Size:', chalk.bold.magenta(bytes(result.css.length)))
log(emoji.disk, 'Saved to', chalk.bold.cyan(outputFile))
}

13
src/cli/commands/help.js
View file

@ -63,11 +63,16 @@ export function invalidCommand(commandName) {
* Runs the command.
*
* @param {string[]} cliParams
* @return {Promise}
*/
export function run(cliParams) {
const command = cliParams[1]
return new Promise(resolve => {
const command = cliParams[1]
!command && forApp()
command && commands[command] && forCommand(commands[command])
command && !commands[command] && invalidCommand(command)
!command && forApp()
command && commands[command] && forCommand(commands[command])
command && !commands[command] && invalidCommand(command)
resolve()
})
}

24
src/cli/commands/init.js
View file

@ -12,18 +12,26 @@ export const description =
* Runs the command.
*
* @param {string[]} cliParams
* @return {Promise}
*/
export function run(cliParams) {
const file = cliParams[1] || constants.defaultConfigFile
return new Promise(resolve => {
const file = cliParams[1] || constants.defaultConfigFile
exists(file) && die(chalk.bold.magenta(file), 'already exists.')
exists(file) && die(chalk.bold.magenta(file), 'already exists.')
let stub = readFile(constants.configStubFile)
stub = stub.replace('// let defaultConfig', 'let defaultConfig')
stub = stub.replace("require('./plugins/container')", "require('tailwindcss/plugins/container')")
let stub = readFile(constants.configStubFile)
stub = stub.replace('// let defaultConfig', 'let defaultConfig')
stub = stub.replace(
"require('./plugins/container')",
"require('tailwindcss/plugins/container')"
)
writeFile(file, stub)
writeFile(file, stub)
log()
log(emoji.yes, 'Created Tailwind config file:', chalk.bold.magenta(file))
log()
log(emoji.yes, 'Created Tailwind config file:', chalk.bold.magenta(file))
resolve()
})
}

2
src/cli/main.js
View file

@ -18,5 +18,5 @@ export default function run(args) {
const options = parseCliOptions(args, commands[commandName].optionMap)
commands[commandName].run(params, options)
return commands[commandName].run(params, options)
}

25
src/processTailwindFeatures.js
View file

@ -1,3 +1,4 @@
import _ from 'lodash'
import postcss from 'postcss'
import substituteTailwindAtRules from './lib/substituteTailwindAtRules'
@ -11,16 +12,18 @@ import generateUtilities from './util/generateUtilities'
import processPlugins from './util/processPlugins'
export default function(getConfig) {
const config = getConfig()
const processedPlugins = processPlugins(config)
const utilities = generateUtilities(config, processedPlugins.utilities)
return function(css) {
const config = getConfig()
const processedPlugins = processPlugins(config)
const utilities = generateUtilities(config, processedPlugins.utilities)
return postcss([
substituteTailwindAtRules(config, processedPlugins, utilities),
evaluateTailwindFunctions(config),
substituteVariantsAtRules(config, processedPlugins),
substituteResponsiveAtRules(config),
substituteScreenAtRules(config),
substituteClassApplyAtRules(config, utilities),
])
return postcss([
substituteTailwindAtRules(config, processedPlugins, utilities),
evaluateTailwindFunctions(config),
substituteVariantsAtRules(config, processedPlugins),
substituteResponsiveAtRules(config),
substituteScreenAtRules(config),
substituteClassApplyAtRules(config, utilities),
]).process(css, { from: _.get(css, 'source.input.file') })
}
}