Merge pull request #766 from MattStypa/next-cli

Updated CLI init command
This commit is contained in:
Adam Wathan 2019-03-15 10:42:18 -04:00 committed by GitHub
commit 6fddfa068b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 524 additions and 624 deletions

View File

@ -1,4 +1,4 @@
/lib
/docs
/__tests__/fixtures/cli-utils.js
defaultConfig.stub.js
/stubs/*

View File

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

View File

@ -1,12 +1,14 @@
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', () => {
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()
@ -32,6 +34,18 @@ describe('cli', () => {
expect(utils.writeFile.mock.calls[0][1]).not.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', () => {

View File

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

View File

@ -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: {

View File

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

View File

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

View File

@ -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__ */

View File

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

View File

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

View File

@ -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, {

View File

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

View File

@ -1,76 +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'],
listStylePosition: ['responsive'],
listStyleType: ['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'],
inset: ['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'],
wordBreak: ['responsive'],
width: ['responsive'],
zIndex: ['responsive'],
},
corePlugins: {},
plugins: [],
}

View File

@ -1,374 +1,4 @@
module.exports = function() {
return {
colors: {
transparent: 'transparent',
const cloneDeep = require('lodash/cloneDeep')
const defaultConfig = require('./stubs/defaultConfig.stub.js')
black: '#000',
white: '#fff',
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',
'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: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
fontFamily: {
sans: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'SFMono-Regular',
'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',
'6xl': '4rem',
},
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.gray[700] }, 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,
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
inset: {
'0': 0,
auto: 'auto',
},
}
}
module.exports = cloneDeep(defaultConfig.theme)

View File

@ -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%"

View File

@ -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]'

View File

@ -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'
@ -10,13 +10,13 @@ export const description =
export const options = [
{
usage: '--no-comments',
description: 'Omit comments from the config file.',
usage: '--full',
description: 'Generate complete configuration file.',
},
]
export const optionMap = {
noComments: ['no-comments'],
full: ['full'],
}
/**
@ -30,16 +30,13 @@ export function run(cliParams, cliOptions) {
return new Promise(resolve => {
utils.header()
const noComments = cliOptions.noComments
const full = cliOptions.full
const file = cliParams[0] || constants.defaultConfigFile
utils.exists(file) && utils.die(chalk.bold.magenta(file), 'already exists.')
let stub = utils
.readFile(constants.configStubFile)
.replace("require('./plugins/container')", "require('tailwindcss/plugins/container')")
noComments && (stub = utils.stripBlockComments(stub))
const stubFile = full ? constants.defaultConfigStubFile : constants.simpleConfigStubFile
const stub = utils.readFile(stubFile)
utils.writeFile(file, stub)

View File

@ -1,5 +0,0 @@
import path from 'path'
export const cli = 'tailwind'
export const defaultConfigFile = 'tailwind.js'
export const configStubFile = path.resolve(__dirname, '../../defaultConfig.stub.js')

View File

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

6
src/constants.js Normal file
View File

@ -0,0 +1,6 @@
import path from 'path'
export const cli = 'tailwind'
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')

View File

@ -8,6 +8,9 @@ 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'
function resolveConfigPath(filePath) {
if (_.isObject(filePath)) {
@ -19,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) {
@ -29,17 +32,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 => {

445
stubs/defaultConfig.stub.js Normal file
View File

@ -0,0 +1,445 @@
module.exports = {
prefix: '',
important: false,
separator: ':',
theme: {
colors: {
transparent: 'transparent',
black: '#000',
white: '#fff',
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',
'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: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
fontFamily: {
sans: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'SFMono-Regular',
'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',
'6xl': '4rem',
},
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.gray[700] }, 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,
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
inset: {
'0': 0,
auto: 'auto',
},
},
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'],
listStylePosition: ['responsive'],
listStyleType: ['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'],
inset: ['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'],
wordBreak: ['responsive'],
width: ['responsive'],
zIndex: ['responsive'],
},
corePlugins: {},
plugins: [],
}

View File

@ -0,0 +1,11 @@
module.exports = {
theme: {
// Some useful comment
},
variants: {
// Some useful comment
},
plugins: [
// Some useful comment
]
}

View File

@ -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"