From 92b3b0c0a1ef79c1ec7636e04674a5dfab687199 Mon Sep 17 00:00:00 2001 From: mattstypa Date: Thu, 14 Mar 2019 15:51:21 -0500 Subject: [PATCH 1/8] Updated CLI init commend --- .eslintignore | 2 +- __tests__/applyAtRule.test.js | 2 +- __tests__/cli.test.js | 14 + __tests__/defaultConfig.test.js | 8 +- __tests__/defaultTheme.test.js | 11 + __tests__/responsiveAtRule.test.js | 2 +- __tests__/sanity.test.js | 2 +- __tests__/variantsAtRule.test.js | 2 +- defaultConfig.js | 7 +- defaultConfig.stub.js | 79 ------ defaultTheme.js | 337 +----------------------- src/cli/commands/init.js | 11 +- src/cli/constants.js | 3 +- src/index.js | 9 +- stubs/defaultConfig.stub.js | 409 +++++++++++++++++++++++++++++ stubs/simpleConfig.stub.js | 11 + 16 files changed, 479 insertions(+), 430 deletions(-) create mode 100644 __tests__/defaultTheme.test.js delete mode 100644 defaultConfig.stub.js create mode 100644 stubs/defaultConfig.stub.js create mode 100644 stubs/simpleConfig.stub.js diff --git a/.eslintignore b/.eslintignore index f7288b4ad..7de3c52e3 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,4 @@ /lib /docs /__tests__/fixtures/cli-utils.js -defaultConfig.stub.js +/stubs/* diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index d2ac99272..c212745b3 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -3,7 +3,7 @@ import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules' import processPlugins from '../src/util/processPlugins' import resolveConfig from '../src/util/resolveConfig' import corePlugins from '../src/corePlugins' -import defaultConfig from '../defaultConfig.stub.js' +import defaultConfig from '../stubs/defaultConfig.stub.js' const resolvedDefaultConfig = resolveConfig([defaultConfig]) diff --git a/__tests__/cli.test.js b/__tests__/cli.test.js index 91f7665f9..40a79e224 100644 --- a/__tests__/cli.test.js +++ b/__tests__/cli.test.js @@ -7,6 +7,8 @@ import * as utils from '../src/cli/utils' describe('cli', () => { const inputCssPath = path.resolve(__dirname, 'fixtures/tailwind-input.css') const customConfigPath = path.resolve(__dirname, 'fixtures/custom-config.js') + const defaultConfigFixture = utils.readFile(constants.defaultConfigStubFile) + const simpleConfigFixture = utils.readFile(constants.simpleConfigStubFile) beforeEach(() => { console.log = jest.fn() @@ -33,6 +35,18 @@ describe('cli', () => { expect(utils.writeFile.mock.calls[0][1]).toContain('//') }) }) + + it('creates a simple Tailwind config file', () => { + return cli(['init']).then(() => { + expect(utils.writeFile.mock.calls[0][1]).toEqual(simpleConfigFixture) + }) + }) + + it('creates a full Tailwind config file', () => { + return cli(['init', '--full']).then(() => { + expect(utils.writeFile.mock.calls[0][1]).toEqual(defaultConfigFixture) + }) + }) }) describe('build', () => { diff --git a/__tests__/defaultConfig.test.js b/__tests__/defaultConfig.test.js index 4596b71b7..c6ce1a6fe 100644 --- a/__tests__/defaultConfig.test.js +++ b/__tests__/defaultConfig.test.js @@ -1,5 +1,11 @@ import config from '../defaultConfig.js' +import configStub from '../stubs/defaultConfig.stub.js' test('the default config matches the stub', () => { - expect(config()).toEqual(require('../defaultConfig.stub.js')) + expect(config).toEqual(configStub) +}) + +test('modifying the default config does not affect the stub', () => { + config.theme = {} + expect(config).not.toEqual(configStub) }) diff --git a/__tests__/defaultTheme.test.js b/__tests__/defaultTheme.test.js new file mode 100644 index 000000000..b90914846 --- /dev/null +++ b/__tests__/defaultTheme.test.js @@ -0,0 +1,11 @@ +import theme from '../defaultTheme.js' +import configStub from '../stubs/defaultConfig.stub.js' + +test('the default theme matches the stub', () => { + expect(theme).toEqual(configStub.theme) +}) + +test('modifying the default theme does not affect the stub', () => { + theme.colors = {} + expect(theme).not.toEqual(configStub.theme) +}) diff --git a/__tests__/responsiveAtRule.test.js b/__tests__/responsiveAtRule.test.js index ae9f18c9b..63c6319a4 100644 --- a/__tests__/responsiveAtRule.test.js +++ b/__tests__/responsiveAtRule.test.js @@ -1,6 +1,6 @@ import postcss from 'postcss' import plugin from '../src/lib/substituteResponsiveAtRules' -import config from '../defaultConfig.stub.js' +import config from '../stubs/defaultConfig.stub.js' function run(input, opts = config) { return postcss([plugin(opts)]).process(input, { from: undefined }) diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js index 5ff3470c3..36344edfb 100644 --- a/__tests__/sanity.test.js +++ b/__tests__/sanity.test.js @@ -2,7 +2,7 @@ import fs from 'fs' import path from 'path' import postcss from 'postcss' import tailwind from '../src/index' -import config from '../defaultConfig.js' +import config from '../stubs/defaultConfig.stub.js' it('generates the right CSS', () => { const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index 44411663f..af81375e5 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -1,7 +1,7 @@ import postcss from 'postcss' import plugin from '../src/lib/substituteVariantsAtRules' -import config from '../defaultConfig.stub.js' import processPlugins from '../src/util/processPlugins' +import config from '../stubs/defaultConfig.stub.js' function run(input, opts = config) { return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, { diff --git a/defaultConfig.js b/defaultConfig.js index e4feb52fe..820ae3e16 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -1,3 +1,4 @@ -module.exports = function() { - return require('lodash').cloneDeep(require('./defaultConfig.stub.js')) -} +const cloneDeep = require('lodash/cloneDeep') +const defaultConfig = require('./stubs/defaultConfig.stub.js') + +module.exports = cloneDeep(defaultConfig) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js deleted file mode 100644 index 48104ae6c..000000000 --- a/defaultConfig.stub.js +++ /dev/null @@ -1,79 +0,0 @@ -const defaultTheme = require('./defaultTheme')() - -module.exports = { - prefix: '', - important: false, - separator: ':', - theme: defaultTheme, - variants: { - appearance: ['responsive'], - backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: [], - borderColor: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidth: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexDirection: ['responsive'], - flexWrap: ['responsive'], - alignItems: ['responsive'], - alignSelf: ['responsive'], - justifyContent: ['responsive'], - alignContent: ['responsive'], - flex: ['responsive'], - flexGrow: ['responsive'], - flexShrink: ['responsive'], - float: ['responsive'], - fontFamily: ['responsive'], - fontWeight: ['responsive', 'hover', 'focus'], - height: ['responsive'], - lineHeight: ['responsive'], - listStyle: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - negativeMargin: ['responsive'], - objectFit: ['responsive'], - objectPosition: ['responsive'], - opacity: ['responsive'], - outline: ['focus'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - resize: ['responsive'], - boxShadow: ['responsive', 'hover', 'focus'], - fill: [], - stroke: [], - tableLayout: ['responsive'], - textAlign: ['responsive'], - textColor: ['responsive', 'hover', 'focus'], - fontSize: ['responsive'], - fontStyle: ['responsive'], - textTransform: ['responsive'], - textDecoration: ['responsive', 'hover', 'focus'], - fontSmoothing: ['responsive'], - letterSpacing: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'], - }, - corePlugins: { - }, - plugins: [ - require('./plugins/container')({ - // center: true, - // padding: '1rem', - }), - ], -} diff --git a/defaultTheme.js b/defaultTheme.js index d28b6ee39..70e74af7f 100644 --- a/defaultTheme.js +++ b/defaultTheme.js @@ -1,335 +1,4 @@ -module.exports = function() { - return { - colors: { - transparent: 'transparent', +const cloneDeep = require('lodash/cloneDeep') +const defaultConfig = require('./stubs/defaultConfig.stub.js') - black: '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - grey: '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', - white: '#ffffff', - - 'red-darkest': '#3b0d0c', - 'red-darker': '#621b18', - 'red-dark': '#cc1f1a', - red: '#e3342f', - 'red-light': '#ef5753', - 'red-lighter': '#f9acaa', - 'red-lightest': '#fcebea', - - 'orange-darkest': '#462a16', - 'orange-darker': '#613b1f', - 'orange-dark': '#de751f', - orange: '#f6993f', - 'orange-light': '#faad63', - 'orange-lighter': '#fcd9b6', - 'orange-lightest': '#fff5eb', - - 'yellow-darkest': '#453411', - 'yellow-darker': '#684f1d', - 'yellow-dark': '#f2d024', - yellow: '#ffed4a', - 'yellow-light': '#fff382', - 'yellow-lighter': '#fff9c2', - 'yellow-lightest': '#fcfbeb', - - 'green-darkest': '#0f2f21', - 'green-darker': '#1a4731', - 'green-dark': '#1f9d55', - green: '#38c172', - 'green-light': '#51d88a', - 'green-lighter': '#a2f5bf', - 'green-lightest': '#e3fcec', - - 'teal-darkest': '#0d3331', - 'teal-darker': '#20504f', - 'teal-dark': '#38a89d', - teal: '#4dc0b5', - 'teal-light': '#64d5ca', - 'teal-lighter': '#a0f0ed', - 'teal-lightest': '#e8fffe', - - 'blue-darkest': '#12283a', - 'blue-darker': '#1c3d5a', - 'blue-dark': '#2779bd', - blue: '#3490dc', - 'blue-light': '#6cb2eb', - 'blue-lighter': '#bcdefa', - 'blue-lightest': '#eff8ff', - - 'indigo-darkest': '#191e38', - 'indigo-darker': '#2f365f', - 'indigo-dark': '#5661b3', - indigo: '#6574cd', - 'indigo-light': '#7886d7', - 'indigo-lighter': '#b2b7ff', - 'indigo-lightest': '#e6e8ff', - - 'purple-darkest': '#21183c', - 'purple-darker': '#382b5f', - 'purple-dark': '#794acf', - purple: '#9561e2', - 'purple-light': '#a779e9', - 'purple-lighter': '#d6bbfc', - 'purple-lightest': '#f3ebff', - - 'pink-darkest': '#451225', - 'pink-darker': '#6f213f', - 'pink-dark': '#eb5286', - pink: '#f66d9b', - 'pink-light': '#fa7ea8', - 'pink-lighter': '#ffbbca', - 'pink-lightest': '#ffebef', - }, - spacing: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '40': '10rem', - '48': '12rem', - '56': '14rem', - '64': '16rem', - }, - screens: { - sm: '568px', - md: '768px', - lg: '1024px', - xl: '1280px', - }, - fontFamily: { - sans: [ - 'system-ui', - 'BlinkMacSystemFont', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif', - ], - serif: [ - 'Constantia', - 'Lucida Bright', - 'Lucidabright', - 'Lucida Serif', - 'Lucida', - 'DejaVu Serif', - 'Bitstream Vera Serif', - 'Liberation Serif', - 'Georgia', - 'serif', - ], - mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'], - }, - fontSize: { - xs: '.75rem', - sm: '.875rem', - base: '1rem', - lg: '1.125rem', - xl: '1.25rem', - '2xl': '1.5rem', - '3xl': '1.875rem', - '4xl': '2.25rem', - '5xl': '3rem', - }, - fontWeight: { - hairline: 100, - thin: 200, - light: 300, - normal: 400, - medium: 500, - semibold: 600, - bold: 700, - extrabold: 800, - black: 900, - }, - lineHeight: { - none: 1, - tight: 1.25, - snug: 1.375, - normal: 1.5, - relaxed: 1.625, - loose: 2, - }, - letterSpacing: { - tighter: '-.05em', - tight: '-.025em', - normal: '0', - wide: '.025em', - wider: '.05em', - widest: '.1em', - }, - textColor: theme => theme.colors, - backgroundColor: theme => theme.colors, - backgroundPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', - }, - backgroundSize: { - auto: 'auto', - cover: 'cover', - contain: 'contain', - }, - borderWidth: { - default: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px', - }, - borderColor: theme => { - return global.Object.assign({ default: theme.colors['grey-light'] }, theme.colors) - }, - borderRadius: { - none: '0', - sm: '.125rem', - default: '.25rem', - lg: '.5rem', - full: '9999px', - }, - cursor: { - auto: 'auto', - default: 'default', - pointer: 'pointer', - wait: 'wait', - move: 'move', - 'not-allowed': 'not-allowed', - }, - width: theme => ({ - auto: 'auto', - ...theme.spacing, - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - full: '100%', - screen: '100vw', - }), - height: theme => ({ - auto: 'auto', - ...theme.spacing, - full: '100%', - screen: '100vh', - }), - minWidth: { - '0': '0', - full: '100%', - }, - minHeight: { - '0': '0', - full: '100%', - screen: '100vh', - }, - maxWidth: { - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - full: '100%', - }, - maxHeight: { - full: '100%', - screen: '100vh', - }, - padding: theme => theme.spacing, - margin: theme => ({ auto: 'auto', ...theme.spacing }), - negativeMargin: theme => theme.spacing, - objectPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', - }, - boxShadow: { - default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)', - md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)', - lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)', - xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)', - '2xl': '0 25px 50px -12px rgba(0, 0, 0, .25)', - inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', - outline: '0 0 0 3px rgba(52,144,220,0.5)', - none: 'none', - }, - zIndex: { - auto: 'auto', - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50, - }, - opacity: { - '0': '0', - '25': '.25', - '50': '.5', - '75': '.75', - '100': '1', - }, - fill: { - current: 'currentColor', - }, - stroke: { - current: 'currentColor', - }, - flex: { - '1': '1 1 0%', - auto: '1 1 auto', - initial: '0 1 auto', - none: 'none', - }, - flexGrow: { - '0': 0, - default: 1, - }, - flexShrink: { - '0': 0, - default: 1, - }, - } -} +module.exports = cloneDeep(defaultConfig.theme) diff --git a/src/cli/commands/init.js b/src/cli/commands/init.js index d4bcba14c..2e8b1ec2b 100644 --- a/src/cli/commands/init.js +++ b/src/cli/commands/init.js @@ -9,6 +9,10 @@ export const description = 'Creates Tailwind config file. Default: ' + chalk.bold.magenta(constants.defaultConfigFile) export const options = [ + { + usage: '--full', + description: 'Generate complete configuration file.', + }, { usage: '--no-comments', description: 'Omit comments from the config file.', @@ -16,6 +20,7 @@ export const options = [ ] export const optionMap = { + full: ['full'], noComments: ['no-comments'], } @@ -30,14 +35,16 @@ export function run(cliParams, cliOptions) { return new Promise(resolve => { utils.header() + const full = cliOptions.full const noComments = cliOptions.noComments const file = cliParams[0] || constants.defaultConfigFile utils.exists(file) && utils.die(chalk.bold.magenta(file), 'already exists.') + const stubFile = full ? constants.defaultConfigStubFile : constants.simpleConfigStubFile let stub = utils - .readFile(constants.configStubFile) - .replace("require('./plugins/container')", "require('tailwindcss/plugins/container')") + .readFile(stubFile) + .replace("require('../plugins/container')", "require('tailwindcss/plugins/container')") noComments && (stub = utils.stripBlockComments(stub)) diff --git a/src/cli/constants.js b/src/cli/constants.js index 3e9fdb42d..f1b7da863 100644 --- a/src/cli/constants.js +++ b/src/cli/constants.js @@ -2,4 +2,5 @@ import path from 'path' export const cli = 'tailwind' export const defaultConfigFile = 'tailwind.js' -export const configStubFile = path.resolve(__dirname, '../../defaultConfig.stub.js') +export const defaultConfigStubFile = path.resolve(__dirname, '../../stubs/defaultConfig.stub.js') +export const simpleConfigStubFile = path.resolve(__dirname, '../../stubs/simpleConfig.stub.js') diff --git a/src/index.js b/src/index.js index b1bbf50f6..2c8e373ff 100644 --- a/src/index.js +++ b/src/index.js @@ -9,6 +9,8 @@ import registerConfigAsDependency from './lib/registerConfigAsDependency' import processTailwindFeatures from './processTailwindFeatures' import resolveConfig from './util/resolveConfig' +import defaultConfig from '../stubs/defaultConfig.stub.js' + function resolveConfigPath(filePath) { if (_.isObject(filePath)) { return undefined @@ -29,17 +31,14 @@ function resolveConfigPath(filePath) { const getConfigFunction = config => () => { if (_.isUndefined(config) && !_.isObject(config)) { - return resolveConfig([require('../defaultConfig')()]) + return resolveConfig([defaultConfig]) } if (!_.isObject(config)) { delete require.cache[require.resolve(config)] } - return resolveConfig([ - _.isObject(config) ? config : require(config), - require('../defaultConfig')(), - ]) + return resolveConfig([_.isObject(config) ? config : require(config), defaultConfig]) } const plugin = postcss.plugin('tailwind', config => { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js new file mode 100644 index 000000000..5c226721f --- /dev/null +++ b/stubs/defaultConfig.stub.js @@ -0,0 +1,409 @@ +module.exports = { + prefix: '', + important: false, + separator: ':', + theme: { + colors: { + transparent: 'transparent', + + black: '#22292f', + 'grey-darkest': '#3d4852', + 'grey-darker': '#606f7b', + 'grey-dark': '#8795a1', + grey: '#b8c2cc', + 'grey-light': '#dae1e7', + 'grey-lighter': '#f1f5f8', + 'grey-lightest': '#f8fafc', + white: '#ffffff', + + 'red-darkest': '#3b0d0c', + 'red-darker': '#621b18', + 'red-dark': '#cc1f1a', + red: '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', + + 'orange-darkest': '#462a16', + 'orange-darker': '#613b1f', + 'orange-dark': '#de751f', + orange: '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', + + 'yellow-darkest': '#453411', + 'yellow-darker': '#684f1d', + 'yellow-dark': '#f2d024', + yellow: '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', + + 'green-darkest': '#0f2f21', + 'green-darker': '#1a4731', + 'green-dark': '#1f9d55', + green: '#38c172', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#20504f', + 'teal-dark': '#38a89d', + teal: '#4dc0b5', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', + + 'blue-darkest': '#12283a', + 'blue-darker': '#1c3d5a', + 'blue-dark': '#2779bd', + blue: '#3490dc', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + 'indigo-darkest': '#191e38', + 'indigo-darker': '#2f365f', + 'indigo-dark': '#5661b3', + indigo: '#6574cd', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', + + 'purple-darkest': '#21183c', + 'purple-darker': '#382b5f', + 'purple-dark': '#794acf', + purple: '#9561e2', + 'purple-light': '#a779e9', + 'purple-lighter': '#d6bbfc', + 'purple-lightest': '#f3ebff', + + 'pink-darkest': '#451225', + 'pink-darker': '#6f213f', + 'pink-dark': '#eb5286', + pink: '#f66d9b', + 'pink-light': '#fa7ea8', + 'pink-lighter': '#ffbbca', + 'pink-lightest': '#ffebef', + }, + spacing: { + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', + '40': '10rem', + '48': '12rem', + '56': '14rem', + '64': '16rem', + }, + screens: { + sm: '568px', + md: '768px', + lg: '1024px', + xl: '1280px', + }, + fontFamily: { + sans: [ + 'system-ui', + 'BlinkMacSystemFont', + '-apple-system', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + 'sans-serif', + ], + serif: [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif', + ], + mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'], + }, + fontSize: { + xs: '.75rem', + sm: '.875rem', + base: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.875rem', + '4xl': '2.25rem', + '5xl': '3rem', + }, + fontWeight: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + lineHeight: { + none: 1, + tight: 1.25, + snug: 1.375, + normal: 1.5, + relaxed: 1.625, + loose: 2, + }, + letterSpacing: { + tighter: '-.05em', + tight: '-.025em', + normal: '0', + wide: '.025em', + wider: '.05em', + widest: '.1em', + }, + textColor: theme => theme.colors, + backgroundColor: theme => theme.colors, + backgroundPosition: { + bottom: 'bottom', + center: 'center', + left: 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + right: 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + top: 'top', + }, + backgroundSize: { + auto: 'auto', + cover: 'cover', + contain: 'contain', + }, + borderWidth: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', + }, + borderColor: theme => { + return global.Object.assign({ default: theme.colors['grey-light'] }, theme.colors) + }, + borderRadius: { + none: '0', + sm: '.125rem', + default: '.25rem', + lg: '.5rem', + full: '9999px', + }, + cursor: { + auto: 'auto', + default: 'default', + pointer: 'pointer', + wait: 'wait', + move: 'move', + 'not-allowed': 'not-allowed', + }, + width: theme => ({ + auto: 'auto', + ...theme.spacing, + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + full: '100%', + screen: '100vw', + }), + height: theme => ({ + auto: 'auto', + ...theme.spacing, + full: '100%', + screen: '100vh', + }), + minWidth: { + '0': '0', + full: '100%', + }, + minHeight: { + '0': '0', + full: '100%', + screen: '100vh', + }, + maxWidth: { + xs: '20rem', + sm: '24rem', + md: '28rem', + lg: '32rem', + xl: '36rem', + '2xl': '42rem', + '3xl': '48rem', + '4xl': '56rem', + '5xl': '64rem', + '6xl': '72rem', + full: '100%', + }, + maxHeight: { + full: '100%', + screen: '100vh', + }, + padding: theme => theme.spacing, + margin: theme => ({ auto: 'auto', ...theme.spacing }), + negativeMargin: theme => theme.spacing, + objectPosition: { + bottom: 'bottom', + center: 'center', + left: 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + right: 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + top: 'top', + }, + boxShadow: { + default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)', + md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)', + lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)', + xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)', + '2xl': '0 25px 50px -12px rgba(0, 0, 0, .25)', + inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', + outline: '0 0 0 3px rgba(52,144,220,0.5)', + none: 'none', + }, + zIndex: { + auto: 'auto', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, + }, + opacity: { + '0': '0', + '25': '.25', + '50': '.5', + '75': '.75', + '100': '1', + }, + fill: { + current: 'currentColor', + }, + stroke: { + current: 'currentColor', + }, + flex: { + '1': '1 1 0%', + auto: '1 1 auto', + initial: '0 1 auto', + none: 'none', + }, + flexGrow: { + '0': 0, + default: 1, + }, + flexShrink: { + '0': 0, + default: 1, + }, + }, + variants: { + appearance: ['responsive'], + backgroundAttachment: ['responsive'], + backgroundColor: ['responsive', 'hover', 'focus'], + backgroundPosition: ['responsive'], + backgroundRepeat: ['responsive'], + backgroundSize: ['responsive'], + borderCollapse: [], + borderColor: ['responsive', 'hover', 'focus'], + borderRadius: ['responsive'], + borderStyle: ['responsive'], + borderWidth: ['responsive'], + cursor: ['responsive'], + display: ['responsive'], + flexDirection: ['responsive'], + flexWrap: ['responsive'], + alignItems: ['responsive'], + alignSelf: ['responsive'], + justifyContent: ['responsive'], + alignContent: ['responsive'], + flex: ['responsive'], + flexGrow: ['responsive'], + flexShrink: ['responsive'], + float: ['responsive'], + fontFamily: ['responsive'], + fontWeight: ['responsive', 'hover', 'focus'], + height: ['responsive'], + lineHeight: ['responsive'], + listStyle: ['responsive'], + margin: ['responsive'], + maxHeight: ['responsive'], + maxWidth: ['responsive'], + minHeight: ['responsive'], + minWidth: ['responsive'], + negativeMargin: ['responsive'], + objectFit: ['responsive'], + objectPosition: ['responsive'], + opacity: ['responsive'], + outline: ['focus'], + overflow: ['responsive'], + padding: ['responsive'], + pointerEvents: ['responsive'], + position: ['responsive'], + resize: ['responsive'], + boxShadow: ['responsive', 'hover', 'focus'], + fill: [], + stroke: [], + tableLayout: ['responsive'], + textAlign: ['responsive'], + textColor: ['responsive', 'hover', 'focus'], + fontSize: ['responsive'], + fontStyle: ['responsive'], + textTransform: ['responsive'], + textDecoration: ['responsive', 'hover', 'focus'], + fontSmoothing: ['responsive'], + letterSpacing: ['responsive'], + userSelect: ['responsive'], + verticalAlign: ['responsive'], + visibility: ['responsive'], + whitespace: ['responsive'], + width: ['responsive'], + zIndex: ['responsive'], + }, + corePlugins: { + }, + plugins: [ + require('../plugins/container')({ + // center: true, + // padding: '1rem', + }), + ], +} diff --git a/stubs/simpleConfig.stub.js b/stubs/simpleConfig.stub.js new file mode 100644 index 000000000..5d8a99676 --- /dev/null +++ b/stubs/simpleConfig.stub.js @@ -0,0 +1,11 @@ +module.exports = { + theme: { + // Some useful comment + }, + variants: { + // Some useful comment + }, + plugins: [ + // Some useful comment + ] +} From 9e835e45469d2356dac89f756aca84ac0e7add90 Mon Sep 17 00:00:00 2001 From: Matt Stypa Date: Thu, 14 Mar 2019 16:51:36 -0500 Subject: [PATCH 2/8] Fixed failing tests and added additional coverage --- __tests__/cli.test.js | 4 +++- __tests__/cli.utils.test.js | 26 ++++++++++++++++++++++++++ src/cli/commands/init.js | 5 ++--- src/cli/constants.js | 4 ++++ src/cli/utils.js | 14 ++++++++++++++ 5 files changed, 49 insertions(+), 4 deletions(-) diff --git a/__tests__/cli.test.js b/__tests__/cli.test.js index 40a79e224..8d332a629 100644 --- a/__tests__/cli.test.js +++ b/__tests__/cli.test.js @@ -44,7 +44,9 @@ describe('cli', () => { it('creates a full Tailwind config file', () => { return cli(['init', '--full']).then(() => { - expect(utils.writeFile.mock.calls[0][1]).toEqual(defaultConfigFixture) + expect(utils.writeFile.mock.calls[0][1]).toEqual( + utils.replaceAll(defaultConfigFixture, constants.replacements) + ) }) }) }) diff --git a/__tests__/cli.utils.test.js b/__tests__/cli.utils.test.js index 594b86e6e..a15f51b3e 100644 --- a/__tests__/cli.utils.test.js +++ b/__tests__/cli.utils.test.js @@ -109,4 +109,30 @@ describe('cli utils', () => { expect(result).toEqual(expect.stringContaining('__comment_docblock_important__')) }) }) + + describe('replaceAll', () => { + it('replaces strings', () => { + const result = utils.replaceAll('test', [['test', 'pass']]) + + expect(result).toEqual('pass') + }) + + it('replaces regex patterns', () => { + const result = utils.replaceAll('TEST', [[/test/i, 'pass']]) + + expect(result).toEqual('pass') + }) + + it('replaces all matches', () => { + const result = utils.replaceAll('test test', [['test', 'pass']]) + + expect(result).toEqual('pass pass') + }) + + it('replaces all multiple patterns', () => { + const result = utils.replaceAll('hello world', [['hello', 'greetings'], ['world', 'earth']]) + + expect(result).toEqual('greetings earth') + }) + }) }) diff --git a/src/cli/commands/init.js b/src/cli/commands/init.js index 2e8b1ec2b..270e447f7 100644 --- a/src/cli/commands/init.js +++ b/src/cli/commands/init.js @@ -42,10 +42,9 @@ export function run(cliParams, cliOptions) { utils.exists(file) && utils.die(chalk.bold.magenta(file), 'already exists.') const stubFile = full ? constants.defaultConfigStubFile : constants.simpleConfigStubFile - let stub = utils - .readFile(stubFile) - .replace("require('../plugins/container')", "require('tailwindcss/plugins/container')") + let stub = utils.readFile(stubFile) + stub = utils.replaceAll(stub, constants.replacements) noComments && (stub = utils.stripBlockComments(stub)) utils.writeFile(file, stub) diff --git a/src/cli/constants.js b/src/cli/constants.js index f1b7da863..76a27981a 100644 --- a/src/cli/constants.js +++ b/src/cli/constants.js @@ -4,3 +4,7 @@ export const cli = 'tailwind' export const defaultConfigFile = 'tailwind.js' export const defaultConfigStubFile = path.resolve(__dirname, '../../stubs/defaultConfig.stub.js') export const simpleConfigStubFile = path.resolve(__dirname, '../../stubs/simpleConfig.stub.js') + +export const replacements = [ + ["require('../plugins/container')", "require('tailwindcss/plugins/container')"], +] diff --git a/src/cli/utils.js b/src/cli/utils.js index ff9eec491..b04149ca0 100644 --- a/src/cli/utils.js +++ b/src/cli/utils.js @@ -136,3 +136,17 @@ export function stripBlockComments(input) { .trim() .concat('\n') } + +/** + * Performs string replacement for multiple patterns. + * + * @param {string} input + * @param {array} replacements + * @return {string} + */ +export function replaceAll(input, replacements) { + return replacements.reduce( + (str, [pattern, replacement]) => str.split(pattern).join(replacement), + input + ) +} From 99d087a063b4af893385775403f61058b6abb43d Mon Sep 17 00:00:00 2001 From: Matt Stypa Date: Thu, 14 Mar 2019 17:51:33 -0500 Subject: [PATCH 3/8] Test suit will now pass before babelification --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index ed4f6896b..115c92b18 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,9 @@ ] }, "jest": { + "moduleNameMapper": { + "lib/plugins/container": "/src/plugins/container" + }, "setupFilesAfterEnv": [ "/jest/customMatchers.js" ], From e0cad52c571f761aa6f5faaad03a80eae1108c84 Mon Sep 17 00:00:00 2001 From: Matt Stypa Date: Thu, 14 Mar 2019 18:09:42 -0500 Subject: [PATCH 4/8] Added a file that was removed during merge --- stubs/defaultConfig.stub.js | 259 ++++++++++++++++++++---------------- 1 file changed, 147 insertions(+), 112 deletions(-) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 5c226721f..00d9da186 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -6,87 +6,119 @@ module.exports = { colors: { transparent: 'transparent', - black: '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - grey: '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', - white: '#ffffff', + black: '#000', + white: '#fff', - 'red-darkest': '#3b0d0c', - 'red-darker': '#621b18', - 'red-dark': '#cc1f1a', - red: '#e3342f', - 'red-light': '#ef5753', - 'red-lighter': '#f9acaa', - 'red-lightest': '#fcebea', - - 'orange-darkest': '#462a16', - 'orange-darker': '#613b1f', - 'orange-dark': '#de751f', - orange: '#f6993f', - 'orange-light': '#faad63', - 'orange-lighter': '#fcd9b6', - 'orange-lightest': '#fff5eb', - - 'yellow-darkest': '#453411', - 'yellow-darker': '#684f1d', - 'yellow-dark': '#f2d024', - yellow: '#ffed4a', - 'yellow-light': '#fff382', - 'yellow-lighter': '#fff9c2', - 'yellow-lightest': '#fcfbeb', - - 'green-darkest': '#0f2f21', - 'green-darker': '#1a4731', - 'green-dark': '#1f9d55', - green: '#38c172', - 'green-light': '#51d88a', - 'green-lighter': '#a2f5bf', - 'green-lightest': '#e3fcec', - - 'teal-darkest': '#0d3331', - 'teal-darker': '#20504f', - 'teal-dark': '#38a89d', - teal: '#4dc0b5', - 'teal-light': '#64d5ca', - 'teal-lighter': '#a0f0ed', - 'teal-lightest': '#e8fffe', - - 'blue-darkest': '#12283a', - 'blue-darker': '#1c3d5a', - 'blue-dark': '#2779bd', - blue: '#3490dc', - 'blue-light': '#6cb2eb', - 'blue-lighter': '#bcdefa', - 'blue-lightest': '#eff8ff', - - 'indigo-darkest': '#191e38', - 'indigo-darker': '#2f365f', - 'indigo-dark': '#5661b3', - indigo: '#6574cd', - 'indigo-light': '#7886d7', - 'indigo-lighter': '#b2b7ff', - 'indigo-lightest': '#e6e8ff', - - 'purple-darkest': '#21183c', - 'purple-darker': '#382b5f', - 'purple-dark': '#794acf', - purple: '#9561e2', - 'purple-light': '#a779e9', - 'purple-lighter': '#d6bbfc', - 'purple-lightest': '#f3ebff', - - 'pink-darkest': '#451225', - 'pink-darker': '#6f213f', - 'pink-dark': '#eb5286', - pink: '#f66d9b', - 'pink-light': '#fa7ea8', - 'pink-lighter': '#ffbbca', - 'pink-lightest': '#ffebef', + gray: { + 100: '#f7fafc', + 200: '#edf2f7', + 300: '#e2e8f0', + 400: '#cbd5e0', + 500: '#a0aec0', + 600: '#718096', + 700: '#4a5568', + 800: '#2d3748', + 900: '#1a202c', + }, + red: { + 100: '#fff5f5', + 200: '#fed7d7', + 300: '#feb2b2', + 400: '#fc8181', + 500: '#f56565', + 600: '#e53e3e', + 700: '#c53030', + 800: '#9b2c2c', + 900: '#742a2a', + }, + orange: { + 100: '#fffaf0', + 200: '#feebc8', + 300: '#fbd38d', + 400: '#f6ad55', + 500: '#ed8936', + 600: '#dd6b20', + 700: '#c05621', + 800: '#9c4221', + 900: '#7b341e', + }, + yellow: { + 100: '#fffff0', + 200: '#fefcbf', + 300: '#faf089', + 400: '#f6e05e', + 500: '#ecc94b', + 600: '#d69e2e', + 700: '#b7791f', + 800: '#975a16', + 900: '#744210', + }, + green: { + 100: '#f0fff4', + 200: '#c6f6d5', + 300: '#9ae6b4', + 400: '#68d391', + 500: '#48bb78', + 600: '#38a169', + 700: '#2f855a', + 800: '#276749', + 900: '#22543d', + }, + teal: { + 100: '#e6fffa', + 200: '#b2f5ea', + 300: '#81e6d9', + 400: '#4fd1c5', + 500: '#38b2ac', + 600: '#319795', + 700: '#2c7a7b', + 800: '#285e61', + 900: '#234e52', + }, + blue: { + 100: '#ebf8ff', + 200: '#bee3f8', + 300: '#90cdf4', + 400: '#63b3ed', + 500: '#4299e1', + 600: '#3182ce', + 700: '#2b6cb0', + 800: '#2c5282', + 900: '#2a4365', + }, + indigo: { + 100: '#ebf4ff', + 200: '#c3dafe', + 300: '#a3bffa', + 400: '#7f9cf5', + 500: '#667eea', + 600: '#5a67d8', + 700: '#4c51bf', + 800: '#434190', + 900: '#3c366b', + }, + purple: { + 100: '#faf5ff', + 200: '#e9d8fd', + 300: '#d6bcfa', + 400: '#b794f4', + 500: '#9f7aea', + 600: '#805ad5', + 700: '#6b46c1', + 800: '#553c9a', + 900: '#44337a', + }, + pink: { + 100: '#fff5f7', + 200: '#fed7e2', + 300: '#fbb6ce', + 400: '#f687b3', + 500: '#ed64a6', + 600: '#d53f8c', + 700: '#b83280', + 800: '#97266d', + 900: '#702459', + }, }, spacing: { px: '1px', @@ -110,39 +142,36 @@ module.exports = { '64': '16rem', }, screens: { - sm: '568px', + sm: '640px', md: '768px', lg: '1024px', xl: '1280px', }, fontFamily: { sans: [ - 'system-ui', - 'BlinkMacSystemFont', '-apple-system', - 'Segoe UI', + 'BlinkMacSystemFont', + '"Segoe UI"', 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', + '"Helvetica Neue"', + 'Arial', + '"Noto Sans"', 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + '"Noto Color Emoji"', ], - serif: [ - 'Constantia', - 'Lucida Bright', - 'Lucidabright', - 'Lucida Serif', - 'Lucida', - 'DejaVu Serif', - 'Bitstream Vera Serif', - 'Liberation Serif', - 'Georgia', - 'serif', + serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], + mono: [ + 'SFMono-Regular', + 'Menlo', + 'Monaco', + 'Consolas', + '"Liberation Mono"', + '"Courier New"', + 'monospace', ], - mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'], }, fontSize: { xs: '.75rem', @@ -154,6 +183,7 @@ module.exports = { '3xl': '1.875rem', '4xl': '2.25rem', '5xl': '3rem', + '6xl': '4rem', }, fontWeight: { hairline: 100, @@ -208,7 +238,7 @@ module.exports = { '8': '8px', }, borderColor: theme => { - return global.Object.assign({ default: theme.colors['grey-light'] }, theme.colors) + return global.Object.assign({ default: theme.colors.gray[700] }, theme.colors) }, borderRadius: { none: '0', @@ -334,6 +364,15 @@ module.exports = { '0': 0, default: 1, }, + listStyleType: { + none: 'none', + disc: 'disc', + decimal: 'decimal', + }, + inset: { + '0': 0, + auto: 'auto', + }, }, variants: { appearance: ['responsive'], @@ -363,7 +402,8 @@ module.exports = { fontWeight: ['responsive', 'hover', 'focus'], height: ['responsive'], lineHeight: ['responsive'], - listStyle: ['responsive'], + listStylePosition: ['responsive'], + listStyleType: ['responsive'], margin: ['responsive'], maxHeight: ['responsive'], maxWidth: ['responsive'], @@ -378,6 +418,7 @@ module.exports = { padding: ['responsive'], pointerEvents: ['responsive'], position: ['responsive'], + inset: ['responsive'], resize: ['responsive'], boxShadow: ['responsive', 'hover', 'focus'], fill: [], @@ -398,12 +439,6 @@ module.exports = { width: ['responsive'], zIndex: ['responsive'], }, - corePlugins: { - }, - plugins: [ - require('../plugins/container')({ - // center: true, - // padding: '1rem', - }), - ], + corePlugins: {}, + plugins: [], } From 7ec4b11d73500d770a9fa739738182f00dfb4d12 Mon Sep 17 00:00:00 2001 From: Matt Stypa Date: Thu, 14 Mar 2019 20:24:31 -0500 Subject: [PATCH 5/8] Ripped out the code no longer needed --- __tests__/cli.test.js | 4 +- __tests__/cli.utils.test.js | 26 ------------ defaultConfig.stub.js | 79 ------------------------------------- package.json | 3 -- src/cli/commands/init.js | 1 - src/cli/constants.js | 4 -- src/cli/utils.js | 14 ------- 7 files changed, 1 insertion(+), 130 deletions(-) delete mode 100644 defaultConfig.stub.js diff --git a/__tests__/cli.test.js b/__tests__/cli.test.js index fd6f3d626..5f9bf3b4b 100644 --- a/__tests__/cli.test.js +++ b/__tests__/cli.test.js @@ -43,9 +43,7 @@ describe('cli', () => { it('creates a full Tailwind config file', () => { return cli(['init', '--full']).then(() => { - expect(utils.writeFile.mock.calls[0][1]).toEqual( - utils.replaceAll(defaultConfigFixture, constants.replacements) - ) + expect(utils.writeFile.mock.calls[0][1]).toEqual(defaultConfigFixture) }) }) }) diff --git a/__tests__/cli.utils.test.js b/__tests__/cli.utils.test.js index a15f51b3e..594b86e6e 100644 --- a/__tests__/cli.utils.test.js +++ b/__tests__/cli.utils.test.js @@ -109,30 +109,4 @@ describe('cli utils', () => { expect(result).toEqual(expect.stringContaining('__comment_docblock_important__')) }) }) - - describe('replaceAll', () => { - it('replaces strings', () => { - const result = utils.replaceAll('test', [['test', 'pass']]) - - expect(result).toEqual('pass') - }) - - it('replaces regex patterns', () => { - const result = utils.replaceAll('TEST', [[/test/i, 'pass']]) - - expect(result).toEqual('pass') - }) - - it('replaces all matches', () => { - const result = utils.replaceAll('test test', [['test', 'pass']]) - - expect(result).toEqual('pass pass') - }) - - it('replaces all multiple patterns', () => { - const result = utils.replaceAll('hello world', [['hello', 'greetings'], ['world', 'earth']]) - - expect(result).toEqual('greetings earth') - }) - }) }) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js deleted file mode 100644 index 48104ae6c..000000000 --- a/defaultConfig.stub.js +++ /dev/null @@ -1,79 +0,0 @@ -const defaultTheme = require('./defaultTheme')() - -module.exports = { - prefix: '', - important: false, - separator: ':', - theme: defaultTheme, - variants: { - appearance: ['responsive'], - backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: [], - borderColor: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidth: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexDirection: ['responsive'], - flexWrap: ['responsive'], - alignItems: ['responsive'], - alignSelf: ['responsive'], - justifyContent: ['responsive'], - alignContent: ['responsive'], - flex: ['responsive'], - flexGrow: ['responsive'], - flexShrink: ['responsive'], - float: ['responsive'], - fontFamily: ['responsive'], - fontWeight: ['responsive', 'hover', 'focus'], - height: ['responsive'], - lineHeight: ['responsive'], - listStyle: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - negativeMargin: ['responsive'], - objectFit: ['responsive'], - objectPosition: ['responsive'], - opacity: ['responsive'], - outline: ['focus'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - resize: ['responsive'], - boxShadow: ['responsive', 'hover', 'focus'], - fill: [], - stroke: [], - tableLayout: ['responsive'], - textAlign: ['responsive'], - textColor: ['responsive', 'hover', 'focus'], - fontSize: ['responsive'], - fontStyle: ['responsive'], - textTransform: ['responsive'], - textDecoration: ['responsive', 'hover', 'focus'], - fontSmoothing: ['responsive'], - letterSpacing: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'], - }, - corePlugins: { - }, - plugins: [ - require('./plugins/container')({ - // center: true, - // padding: '1rem', - }), - ], -} diff --git a/package.json b/package.json index 115c92b18..ed4f6896b 100644 --- a/package.json +++ b/package.json @@ -71,9 +71,6 @@ ] }, "jest": { - "moduleNameMapper": { - "lib/plugins/container": "/src/plugins/container" - }, "setupFilesAfterEnv": [ "/jest/customMatchers.js" ], diff --git a/src/cli/commands/init.js b/src/cli/commands/init.js index 270e447f7..67cc679af 100644 --- a/src/cli/commands/init.js +++ b/src/cli/commands/init.js @@ -44,7 +44,6 @@ export function run(cliParams, cliOptions) { const stubFile = full ? constants.defaultConfigStubFile : constants.simpleConfigStubFile let stub = utils.readFile(stubFile) - stub = utils.replaceAll(stub, constants.replacements) noComments && (stub = utils.stripBlockComments(stub)) utils.writeFile(file, stub) diff --git a/src/cli/constants.js b/src/cli/constants.js index 76a27981a..f1b7da863 100644 --- a/src/cli/constants.js +++ b/src/cli/constants.js @@ -4,7 +4,3 @@ export const cli = 'tailwind' export const defaultConfigFile = 'tailwind.js' export const defaultConfigStubFile = path.resolve(__dirname, '../../stubs/defaultConfig.stub.js') export const simpleConfigStubFile = path.resolve(__dirname, '../../stubs/simpleConfig.stub.js') - -export const replacements = [ - ["require('../plugins/container')", "require('tailwindcss/plugins/container')"], -] diff --git a/src/cli/utils.js b/src/cli/utils.js index b04149ca0..ff9eec491 100644 --- a/src/cli/utils.js +++ b/src/cli/utils.js @@ -136,17 +136,3 @@ export function stripBlockComments(input) { .trim() .concat('\n') } - -/** - * Performs string replacement for multiple patterns. - * - * @param {string} input - * @param {array} replacements - * @return {string} - */ -export function replaceAll(input, replacements) { - return replacements.reduce( - (str, [pattern, replacement]) => str.split(pattern).join(replacement), - input - ) -} From 6c461706c611e6a241ef3414a17065903ce0ab8c Mon Sep 17 00:00:00 2001 From: Matt Stypa Date: Fri, 15 Mar 2019 07:08:34 -0500 Subject: [PATCH 6/8] Moved constants and used it for hardcoded paths --- __tests__/cli.test.js | 2 +- __tests__/customConfig.test.js | 3 ++- src/cli/commands/help.js | 2 +- src/cli/commands/init.js | 2 +- src/{cli => }/constants.js | 6 +++--- src/index.js | 3 ++- 6 files changed, 10 insertions(+), 8 deletions(-) rename src/{cli => }/constants.js (61%) diff --git a/__tests__/cli.test.js b/__tests__/cli.test.js index 5f9bf3b4b..2e04a0234 100644 --- a/__tests__/cli.test.js +++ b/__tests__/cli.test.js @@ -1,7 +1,7 @@ import path from 'path' import cli from '../src/cli/main' -import * as constants from '../src/cli/constants' +import * as constants from '../src/constants' import * as utils from '../src/cli/utils' describe('cli', () => { diff --git a/__tests__/customConfig.test.js b/__tests__/customConfig.test.js index 8048673c3..97e15cfcf 100644 --- a/__tests__/customConfig.test.js +++ b/__tests__/customConfig.test.js @@ -3,6 +3,7 @@ import path from 'path' import rimraf from 'rimraf' import postcss from 'postcss' import tailwind from '../src/index' +import { defaultConfigFile } from '../src/constants' function inTempDirectory(callback) { return new Promise(resolve => { @@ -82,7 +83,7 @@ test('custom config can be passed as an object', () => { test('tailwind.config.js is picked up by default', () => { return inTempDirectory(() => { fs.writeFileSync( - path.resolve('./tailwind.config.js'), + path.resolve(defaultConfigFile), `module.exports = { theme: { screens: { diff --git a/src/cli/commands/help.js b/src/cli/commands/help.js index a08031456..321bca399 100644 --- a/src/cli/commands/help.js +++ b/src/cli/commands/help.js @@ -2,7 +2,7 @@ import chalk from 'chalk' import { forEach, map, padEnd } from 'lodash' import commands from '.' -import * as constants from '../constants' +import * as constants from '../../constants' import * as utils from '../utils' export const usage = 'help [command]' diff --git a/src/cli/commands/init.js b/src/cli/commands/init.js index 67cc679af..6b8daf4a3 100644 --- a/src/cli/commands/init.js +++ b/src/cli/commands/init.js @@ -1,6 +1,6 @@ import chalk from 'chalk' -import * as constants from '../constants' +import * as constants from '../../constants' import * as emoji from '../emoji' import * as utils from '../utils' diff --git a/src/cli/constants.js b/src/constants.js similarity index 61% rename from src/cli/constants.js rename to src/constants.js index f1b7da863..260a5b66d 100644 --- a/src/cli/constants.js +++ b/src/constants.js @@ -1,6 +1,6 @@ import path from 'path' export const cli = 'tailwind' -export const defaultConfigFile = 'tailwind.js' -export const defaultConfigStubFile = path.resolve(__dirname, '../../stubs/defaultConfig.stub.js') -export const simpleConfigStubFile = path.resolve(__dirname, '../../stubs/simpleConfig.stub.js') +export const defaultConfigFile = './tailwind.config.js' +export const defaultConfigStubFile = path.resolve(__dirname, '../stubs/defaultConfig.stub.js') +export const simpleConfigStubFile = path.resolve(__dirname, '../stubs/simpleConfig.stub.js') diff --git a/src/index.js b/src/index.js index a88ad4ac2..999385003 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import perfectionist from 'perfectionist' import registerConfigAsDependency from './lib/registerConfigAsDependency' import processTailwindFeatures from './processTailwindFeatures' import resolveConfig from './util/resolveConfig' +import { defaultConfigFile } from './constants' import defaultConfig from '../stubs/defaultConfig.stub.js' @@ -21,7 +22,7 @@ function resolveConfigPath(filePath) { } try { - const defaultConfigPath = path.resolve('./tailwind.config.js') + const defaultConfigPath = path.resolve(defaultConfigFile) fs.accessSync(defaultConfigPath) return defaultConfigPath } catch (err) { From 71b11a667ac341b696b37f08522f91ca8a2884a0 Mon Sep 17 00:00:00 2001 From: mattstypa Date: Fri, 15 Mar 2019 09:05:06 -0500 Subject: [PATCH 7/8] Updating the stub --- defaultConfig.stub.js | 0 stubs/defaultConfig.stub.js | 1 + 2 files changed, 1 insertion(+) delete mode 100644 defaultConfig.stub.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 00d9da186..429020555 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -436,6 +436,7 @@ module.exports = { verticalAlign: ['responsive'], visibility: ['responsive'], whitespace: ['responsive'], + wordBreak: ['responsive'], width: ['responsive'], zIndex: ['responsive'], }, From 6d65dfb058d2fda2c20f786fefe1b97214481540 Mon Sep 17 00:00:00 2001 From: mattstypa Date: Fri, 15 Mar 2019 09:15:16 -0500 Subject: [PATCH 8/8] Removed no-comments option from init command --- __tests__/cli.utils.test.js | 53 --------------------------------- __tests__/fixtures/cli-utils.js | 29 ------------------ package.json | 3 +- src/cli/commands/init.js | 10 +------ src/cli/utils.js | 15 ---------- yarn.lock | 43 -------------------------- 6 files changed, 2 insertions(+), 151 deletions(-) delete mode 100644 __tests__/fixtures/cli-utils.js diff --git a/__tests__/cli.utils.test.js b/__tests__/cli.utils.test.js index 594b86e6e..2d9082d5c 100644 --- a/__tests__/cli.utils.test.js +++ b/__tests__/cli.utils.test.js @@ -1,10 +1,6 @@ -import path from 'path' - import * as utils from '../src/cli/utils' describe('cli utils', () => { - const fixture = utils.readFile(path.resolve(__dirname, 'fixtures/cli-utils.js')) - describe('parseCliParams', () => { it('parses CLI parameters', () => { const result = utils.parseCliParams(['a', 'b', '-c', 'd']) @@ -60,53 +56,4 @@ describe('cli utils', () => { expect(result).toEqual({ test: ['c', 'd', 'h'] }) }) }) - - describe('stripBlockComments', () => { - it('does not strip code', () => { - const result = utils.stripBlockComments(fixture) - - expect(result).toEqual(expect.stringContaining('__code_no_comment__')) - expect(result).toEqual(expect.stringContaining('__code_comment_line__')) - expect(result).toEqual(expect.stringContaining('__code_comment_block__')) - expect(result).toEqual(expect.stringContaining('__code_comment_line_important__')) - expect(result).toEqual(expect.stringContaining('__code_comment_block_important__')) - }) - - it('strips block comments', () => { - const result = utils.stripBlockComments(fixture) - - expect(result).not.toEqual(expect.stringContaining('__comment_block__')) - expect(result).not.toEqual(expect.stringContaining('__comment_block_multiline__')) - expect(result).not.toEqual(expect.stringContaining('__comment_block_code__')) - }) - - it('strips docblock comments', () => { - const result = utils.stripBlockComments(fixture) - - expect(result).not.toEqual(expect.stringContaining('__comment_docblock__')) - }) - - it('does not strip line comments', () => { - const result = utils.stripBlockComments(fixture) - - expect(result).toEqual(expect.stringContaining('__comment_line__')) - expect(result).toEqual(expect.stringContaining('__comment_line_important__')) - expect(result).toEqual(expect.stringContaining('__comment_line_code__')) - expect(result).toEqual(expect.stringContaining('__comment_line_important_code__')) - }) - - it('does not strip important block comments', () => { - const result = utils.stripBlockComments(fixture) - - expect(result).toEqual(expect.stringContaining('__comment_block_important__')) - expect(result).toEqual(expect.stringContaining('__comment_block_multiline_important__')) - expect(result).toEqual(expect.stringContaining('__comment_block_important_code__')) - }) - - it('does not strip important docblock comments', () => { - const result = utils.stripBlockComments(fixture) - - expect(result).toEqual(expect.stringContaining('__comment_docblock_important__')) - }) - }) }) diff --git a/__tests__/fixtures/cli-utils.js b/__tests__/fixtures/cli-utils.js deleted file mode 100644 index 2b6500897..000000000 --- a/__tests__/fixtures/cli-utils.js +++ /dev/null @@ -1,29 +0,0 @@ -// __comment_line__ - -//! __comment_line_important__ - -/* __comment_block__ */ - -/*! __comment_block_important__ */ - -/* - __comment_block_multiline__ -*/ - -/*! - __comment_block_multiline_important__ -*/ - -/** - __comment_docblock__ -*/ - -/**! - __comment_docblock_important__ -*/ - -const __code_no_comment__ = 'test' -const __code_comment_line__ = 'test' // __comment_line_code__ -const __code_comment_block__ = 'test' /* __comment_block_code__ */ -const __code_comment_line_important__ = 'test' //! __comment_line_important_code__ -const __code_comment_block_important__ = 'test' /*! __comment_block_important_code__ */ diff --git a/package.json b/package.json index ed4f6896b..1555aa87b 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,7 @@ "postcss-js": "^2.0.0", "postcss-nested": "^4.1.1", "postcss-selector-parser": "^6.0.0", - "pretty-hrtime": "^1.0.3", - "strip-comments": "^1.0.2" + "pretty-hrtime": "^1.0.3" }, "browserslist": [ "> 1%" diff --git a/src/cli/commands/init.js b/src/cli/commands/init.js index 6b8daf4a3..0b3b34584 100644 --- a/src/cli/commands/init.js +++ b/src/cli/commands/init.js @@ -13,15 +13,10 @@ export const options = [ usage: '--full', description: 'Generate complete configuration file.', }, - { - usage: '--no-comments', - description: 'Omit comments from the config file.', - }, ] export const optionMap = { full: ['full'], - noComments: ['no-comments'], } /** @@ -36,15 +31,12 @@ export function run(cliParams, cliOptions) { utils.header() const full = cliOptions.full - const noComments = cliOptions.noComments const file = cliParams[0] || constants.defaultConfigFile utils.exists(file) && utils.die(chalk.bold.magenta(file), 'already exists.') const stubFile = full ? constants.defaultConfigStubFile : constants.simpleConfigStubFile - let stub = utils.readFile(stubFile) - - noComments && (stub = utils.stripBlockComments(stub)) + const stub = utils.readFile(stubFile) utils.writeFile(file, stub) diff --git a/src/cli/utils.js b/src/cli/utils.js index ff9eec491..ac138b854 100644 --- a/src/cli/utils.js +++ b/src/cli/utils.js @@ -1,7 +1,6 @@ import chalk from 'chalk' import { ensureFileSync, existsSync, outputFileSync, readFileSync } from 'fs-extra' import { findKey, mapValues, trimStart } from 'lodash' -import stripComments from 'strip-comments' import * as emoji from './emoji' import packageJson from '../../package.json' @@ -122,17 +121,3 @@ export function writeFile(path, content) { return outputFileSync(path, content) } - -/** - * Strips block comments from input string. Consolidates multiple line breaks. - * - * @param {string} input - * @return {string} - */ -export function stripBlockComments(input) { - return stripComments - .block(input, { keepProtected: true }) - .replace(/\n\s*\n\s*\n/g, '\n\n') // Strip unnecessary line breaks - .trim() - .concat('\n') -} diff --git a/yarn.lock b/yarn.lock index aea495654..a3bd92c4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -945,12 +945,6 @@ aws4@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" -babel-extract-comments@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21" - dependencies: - babylon "^6.18.0" - babel-jest@^24.3.1, babel-jest@^24.5.0: version "24.5.0" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.5.0.tgz#0ea042789810c2bec9065f7c8ab4dc18e1d28559" @@ -977,17 +971,6 @@ babel-plugin-jest-hoist@^24.3.0: dependencies: "@types/babel__traverse" "^7.0.6" -babel-plugin-syntax-object-rest-spread@^6.8.0: - version "6.13.0" - resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" - -babel-plugin-transform-object-rest-spread@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" - dependencies: - babel-plugin-syntax-object-rest-spread "^6.8.0" - babel-runtime "^6.26.0" - babel-preset-jest@^24.3.0: version "24.3.0" resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.3.0.tgz#db88497e18869f15b24d9c0e547d8e0ab950796d" @@ -995,17 +978,6 @@ babel-preset-jest@^24.3.0: "@babel/plugin-syntax-object-rest-spread" "^7.0.0" babel-plugin-jest-hoist "^24.3.0" -babel-runtime@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.11.0" - -babylon@^6.18.0: - version "6.18.0" - resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" - balanced-match@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" @@ -1288,10 +1260,6 @@ copy-descriptor@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" -core-js@^2.4.0: - version "2.5.6" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.6.tgz#0fe6d45bf3cac3ac364a9d72de7576f4eb221b9d" - core-js@^2.5.7: version "2.6.5" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895" @@ -3645,10 +3613,6 @@ regenerate@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" -regenerator-runtime@^0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" - regenerator-runtime@^0.12.0: version "0.12.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" @@ -4099,13 +4063,6 @@ strip-bom@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" -strip-comments@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d" - dependencies: - babel-extract-comments "^1.0.0" - babel-plugin-transform-object-rest-spread "^6.26.0" - strip-eof@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"