Add scaffolding for future/experimental flags, with WIP new color palette as example
This commit is contained in:
Adam Wathan
parent
fb2c85e309
commit
1ac5874732
6 changed files with 73567 additions and 3 deletions
73330
__tests__/fixtures/tailwind-output-flagged.css
Normal file
73330
__tests__/fixtures/tailwind-output-flagged.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -52,6 +52,28 @@ it('generates the right CSS when using @import instead of @tailwind', () => {
|
|||
})
|
||||
})
|
||||
|
||||
it('generates the right CSS when enabling flagged features', () => {
|
||||
const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
|
||||
const input = fs.readFileSync(inputPath, 'utf8')
|
||||
|
||||
return postcss([
|
||||
tailwind({
|
||||
experimental: {
|
||||
uniformColorPalette: true,
|
||||
},
|
||||
}),
|
||||
])
|
||||
.process(input, { from: inputPath })
|
||||
.then(result => {
|
||||
const expected = fs.readFileSync(
|
||||
path.resolve(`${__dirname}/fixtures/tailwind-output-flagged.css`),
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
})
|
||||
})
|
||||
|
||||
// TODO: Move to per plugin unit tests for this sort of thing
|
||||
it('generates the right CSS when color opacity plugins are disabled', () => {
|
||||
const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
|
||||
|
|
|
|||
|
|
@ -57,6 +57,16 @@ Promise.all([
|
|||
},
|
||||
},
|
||||
}),
|
||||
build({
|
||||
from: '__tests__/fixtures/tailwind-input.css',
|
||||
to: '__tests__/fixtures/tailwind-output-flagged.css',
|
||||
config: {
|
||||
future: {},
|
||||
experimental: {
|
||||
uniformColorPalette: true,
|
||||
},
|
||||
},
|
||||
}),
|
||||
]).then(() => {
|
||||
console.log('\nFinished rebuilding fixtures.')
|
||||
console.log(
|
||||
|
|
|
|||
132
src/flagged/uniformColorPalette.js
Normal file
132
src/flagged/uniformColorPalette.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
export default {
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
|
||||
black: '#000000',
|
||||
white: '#ffffff',
|
||||
|
||||
gray: {
|
||||
'50': '#f9fafb',
|
||||
'100': '#f4f5f7',
|
||||
'200': '#e5e7eb',
|
||||
'300': '#d2d6dc',
|
||||
'400': '#9fa6b2',
|
||||
'500': '#6b7280',
|
||||
'600': '#4b5563',
|
||||
'700': '#374151',
|
||||
'800': '#252f3f',
|
||||
'900': '#161e2e',
|
||||
},
|
||||
red: {
|
||||
'50': '#fdf2f2',
|
||||
'100': '#fde8e8',
|
||||
'200': '#fbd5d5',
|
||||
'300': '#f8b4b4',
|
||||
'400': '#f98080',
|
||||
'500': '#f05252',
|
||||
'600': '#e02424',
|
||||
'700': '#c81e1e',
|
||||
'800': '#9b1c1c',
|
||||
'900': '#771d1d',
|
||||
},
|
||||
orange: {
|
||||
'50': '#fff8f1',
|
||||
'100': '#feecdc',
|
||||
'200': '#fcd9bd',
|
||||
'300': '#fdba8c',
|
||||
'400': '#ff8a4c',
|
||||
'500': '#ff5a1f',
|
||||
'600': '#d03801',
|
||||
'700': '#b43403',
|
||||
'800': '#8a2c0d',
|
||||
'900': '#73230d',
|
||||
},
|
||||
yellow: {
|
||||
'50': '#fdfdea',
|
||||
'100': '#fdf6b2',
|
||||
'200': '#fce96a',
|
||||
'300': '#faca15',
|
||||
'400': '#e3a008',
|
||||
'500': '#c27803',
|
||||
'600': '#9f580a',
|
||||
'700': '#8e4b10',
|
||||
'800': '#723b13',
|
||||
'900': '#633112',
|
||||
},
|
||||
green: {
|
||||
'50': '#f3faf7',
|
||||
'100': '#def7ec',
|
||||
'200': '#bcf0da',
|
||||
'300': '#84e1bc',
|
||||
'400': '#31c48d',
|
||||
'500': '#0e9f6e',
|
||||
'600': '#057a55',
|
||||
'700': '#046c4e',
|
||||
'800': '#03543f',
|
||||
'900': '#014737',
|
||||
},
|
||||
teal: {
|
||||
'50': '#edfafa',
|
||||
'100': '#d5f5f6',
|
||||
'200': '#afecef',
|
||||
'300': '#7edce2',
|
||||
'400': '#16bdca',
|
||||
'500': '#0694a2',
|
||||
'600': '#047481',
|
||||
'700': '#036672',
|
||||
'800': '#05505c',
|
||||
'900': '#014451',
|
||||
},
|
||||
blue: {
|
||||
'50': '#ebf5ff',
|
||||
'100': '#e1effe',
|
||||
'200': '#c3ddfd',
|
||||
'300': '#a4cafe',
|
||||
'400': '#76a9fa',
|
||||
'500': '#3f83f8',
|
||||
'600': '#1c64f2',
|
||||
'700': '#1a56db',
|
||||
'800': '#1e429f',
|
||||
'900': '#233876',
|
||||
},
|
||||
indigo: {
|
||||
'50': '#f0f5ff',
|
||||
'100': '#e5edff',
|
||||
'200': '#cddbfe',
|
||||
'300': '#b4c6fc',
|
||||
'400': '#8da2fb',
|
||||
'500': '#6875f5',
|
||||
'600': '#5850ec',
|
||||
'700': '#5145cd',
|
||||
'800': '#42389d',
|
||||
'900': '#362f78',
|
||||
},
|
||||
purple: {
|
||||
'50': '#f6f5ff',
|
||||
'100': '#edebfe',
|
||||
'200': '#dcd7fe',
|
||||
'300': '#cabffd',
|
||||
'400': '#ac94fa',
|
||||
'500': '#9061f9',
|
||||
'600': '#7e3af2',
|
||||
'700': '#6c2bd9',
|
||||
'800': '#5521b5',
|
||||
'900': '#4a1d96',
|
||||
},
|
||||
pink: {
|
||||
'50': '#fdf2f8',
|
||||
'100': '#fce8f3',
|
||||
'200': '#fad1e8',
|
||||
'300': '#f8b4d9',
|
||||
'400': '#f17eb8',
|
||||
'500': '#e74694',
|
||||
'600': '#d61f69',
|
||||
'700': '#bf125d',
|
||||
'800': '#99154b',
|
||||
'900': '#751a3d',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
17
src/index.js
17
src/index.js
|
|
@ -10,9 +10,20 @@ import processTailwindFeatures from './processTailwindFeatures'
|
|||
import formatCSS from './lib/formatCSS'
|
||||
import resolveConfig from './util/resolveConfig'
|
||||
import { defaultConfigFile } from './constants'
|
||||
|
||||
import defaultConfig from '../stubs/defaultConfig.stub.js'
|
||||
|
||||
import uniformColorPalette from './flagged/uniformColorPalette.js'
|
||||
|
||||
function getDefaultConfigs(config) {
|
||||
const configs = [defaultConfig]
|
||||
|
||||
if (_.get(config, ['experimental', 'uniformColorPalette'], false)) {
|
||||
configs.unshift(uniformColorPalette)
|
||||
}
|
||||
|
||||
return configs
|
||||
}
|
||||
|
||||
function resolveConfigPath(filePath) {
|
||||
// require('tailwindcss')({ theme: ..., variants: ... })
|
||||
if (_.isObject(filePath) && !_.has(filePath, 'config') && !_.isEmpty(filePath)) {
|
||||
|
|
@ -46,7 +57,7 @@ function resolveConfigPath(filePath) {
|
|||
|
||||
const getConfigFunction = config => () => {
|
||||
if (_.isUndefined(config) && !_.isObject(config)) {
|
||||
return resolveConfig([defaultConfig])
|
||||
return resolveConfig([...getDefaultConfigs(defaultConfig)])
|
||||
}
|
||||
|
||||
// Skip this if Jest is running: https://github.com/facebook/jest/pull/9841#issuecomment-621417584
|
||||
|
|
@ -60,7 +71,7 @@ const getConfigFunction = config => () => {
|
|||
|
||||
const configObject = _.isObject(config) ? _.get(config, 'config', config) : require(config)
|
||||
|
||||
return resolveConfig([configObject, defaultConfig])
|
||||
return resolveConfig([configObject, ...getDefaultConfigs(configObject)])
|
||||
}
|
||||
|
||||
const plugin = postcss.plugin('tailwind', config => {
|
||||
|
|
|
|||
|
|
@ -13,10 +13,69 @@ import purgeUnusedStyles from './lib/purgeUnusedStyles'
|
|||
import corePlugins from './corePlugins'
|
||||
import processPlugins from './util/processPlugins'
|
||||
import cloneNodes from './util/cloneNodes'
|
||||
import chalk from 'chalk'
|
||||
|
||||
const log = {
|
||||
info(message) {
|
||||
console.log(chalk.bold.cyan(' info'), '-', message)
|
||||
},
|
||||
warn(message) {
|
||||
console.log(chalk.bold.yellow(' warn'), '-', message)
|
||||
},
|
||||
risk(message) {
|
||||
console.log(chalk.bold.magenta(' risk'), '-', message)
|
||||
},
|
||||
}
|
||||
|
||||
function issueFlagNotices(config) {
|
||||
const featureFlags = {
|
||||
future: [],
|
||||
experimental: ['uniformColorPalette'],
|
||||
}
|
||||
|
||||
if (_.some(featureFlags.future, flag => _.get(config, ['future', flag], false))) {
|
||||
const changes = Object.keys(config.future)
|
||||
.filter(flag => featureFlags.future.includes(flag) && config.future[flag])
|
||||
.map(s => chalk.cyan(s))
|
||||
.join(', ')
|
||||
console.log()
|
||||
log.info(`You have opted-in to future-facing breaking changes: ${changes}`)
|
||||
log.info(
|
||||
'These changes are stable and will be the default behavior in the next major version of Tailwind.'
|
||||
)
|
||||
}
|
||||
|
||||
if (_.some(featureFlags.experimental, flag => _.get(config, ['experimental', flag], false))) {
|
||||
const changes = Object.keys(config.experimental)
|
||||
.filter(flag => featureFlags.experimental.includes(flag) && config.experimental[flag])
|
||||
.map(s => chalk.yellow(s))
|
||||
.join(', ')
|
||||
console.log()
|
||||
log.warn(`You have enabled experimental features: ${changes}`)
|
||||
log.warn(
|
||||
'Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.'
|
||||
)
|
||||
}
|
||||
|
||||
if (Object.keys(_.get(config, 'future', {})).length < featureFlags.future.length) {
|
||||
const changes = featureFlags.future
|
||||
.filter(flag => !_.has(config, ['future', flag]))
|
||||
.map(s => chalk.magenta(s))
|
||||
.join(', ')
|
||||
console.log()
|
||||
log.risk(`There are upcoming breaking changes: ${changes}`)
|
||||
log.risk(
|
||||
'We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default function(getConfig) {
|
||||
return function(css) {
|
||||
const config = getConfig()
|
||||
|
||||
issueFlagNotices(config)
|
||||
|
||||
const processedPlugins = processPlugins([...corePlugins(config), ...config.plugins], config)
|
||||
|
||||
const getProcessedPlugins = function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue