Skip to content

Easier way to extend default theme #756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Easier way to extend default theme #756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions __tests__/applyAtRule.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,11 @@ 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 '../defaultConfig'

const resolvedDefaultConfig = resolveConfig([defaultConfig])
const { utilities: defaultUtilities } = processPlugins(corePlugins(defaultConfig), defaultConfig)

const { utilities: defaultUtilities } = processPlugins(
corePlugins(resolvedDefaultConfig),
resolvedDefaultConfig
)

function run(input, config = resolvedDefaultConfig, utilities = defaultUtilities) {
function run(input, config = defaultConfig, utilities = defaultUtilities) {
return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
from: undefined,
})
Expand Down
15 changes: 13 additions & 2 deletions __tests__/defaultConfig.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import config from '../defaultConfig.js'
import configStub from '../defaultConfig.stub.js'

test('the default config matches the stub', () => {
expect(config()).toEqual(require('../defaultConfig.stub.js'))
jest.mock('../defaultConfig.stub.js', () => ({
theme: {
a: () => 'test',
},
}))

test('resolves computed theme values', () => {
expect(typeof config.theme.a).toEqual('string')
})

test('does not modify original object', () => {
expect(typeof configStub.theme.a).toEqual('function')
})
271 changes: 0 additions & 271 deletions __tests__/resolveConfig.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,274 +430,3 @@ test('functions in the user theme section are lazily evaluated', () => {
},
})
})

test('theme values in the extend section extend the existing theme', () => {
const userConfig = {
theme: {
extend: {
opacity: {
'25': '25',
'75': '.75',
},
backgroundColors: {
customBackground: '#bada55',
},
},
},
}

const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
},
opacity: {
'0': '0',
'50': '.5',
'100': '1',
},
backgroundColors: ({ colors }) => colors,
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
opacity: ['responsive', 'hover', 'focus'],
},
}

const result = resolveConfig([userConfig, defaultConfig])

expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
},
opacity: {
'0': '0',
'50': '.5',
'100': '1',
'25': '25',
'75': '.75',
},
backgroundColors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
customBackground: '#bada55',
},
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
opacity: ['responsive', 'hover', 'focus'],
},
})
})

test('theme values in the extend section extend the user theme', () => {
const userConfig = {
theme: {
opacity: {
'0': '0',
'20': '.2',
'40': '.4',
},
height: theme => theme.width,
extend: {
opacity: {
'60': '.6',
'80': '.8',
'100': '1',
},
height: {
customHeight: '500vh',
},
},
},
}

const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
opacity: {
'0': '0',
'50': '.5',
'100': '1',
},
height: {
'0': 0,
full: '100%',
},
width: {
'0': 0,
'1': '.25rem',
'2': '.5rem',
'3': '.75rem',
'4': '1rem',
},
},
variants: {
opacity: ['responsive', 'hover', 'focus'],
height: ['responsive'],
width: ['responsive'],
},
}

const result = resolveConfig([userConfig, defaultConfig])

expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
opacity: {
'0': '0',
'20': '.2',
'40': '.4',
'60': '.6',
'80': '.8',
'100': '1',
},
height: {
'0': 0,
'1': '.25rem',
'2': '.5rem',
'3': '.75rem',
'4': '1rem',
customHeight: '500vh',
},
width: {
'0': 0,
'1': '.25rem',
'2': '.5rem',
'3': '.75rem',
'4': '1rem',
},
},
variants: {
opacity: ['responsive', 'hover', 'focus'],
height: ['responsive'],
width: ['responsive'],
},
})
})

test('theme values in the extend section can extend values that are depended on lazily', () => {
const userConfig = {
theme: {
extend: {
colors: {
red: 'red',
green: 'green',
blue: 'blue',
},
backgroundColors: {
customBackground: '#bada55',
},
},
},
}

const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
},
backgroundColors: ({ colors }) => colors,
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
},
}

const result = resolveConfig([userConfig, defaultConfig])

expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
red: 'red',
green: 'green',
blue: 'blue',
},
backgroundColors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
red: 'red',
green: 'green',
blue: 'blue',
customBackground: '#bada55',
},
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
},
})
})

test('theme values in the extend section are not deeply merged', () => {
const userConfig = {
theme: {
extend: {
fonts: {
sans: ['Comic Sans'],
},
},
},
}

const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
fonts: {
sans: ['system-ui', 'Helvetica Neue', 'sans-serif'],
serif: ['Constantia', 'Georgia', 'serif'],
mono: ['Menlo', 'Courier New', 'monospace'],
},
},
variants: {
fonts: ['responsive'],
},
}

const result = resolveConfig([userConfig, defaultConfig])

expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
fonts: {
sans: ['Comic Sans'],
serif: ['Constantia', 'Georgia', 'serif'],
mono: ['Menlo', 'Courier New', 'monospace'],
},
},
variants: {
fonts: ['responsive'],
},
})
})
11 changes: 8 additions & 3 deletions defaultConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
module.exports = function() {
return require('lodash').cloneDeep(require('./defaultConfig.stub.js'))
}
const invokeDeep = require('invoke-deep')
const cloneDeep = require('lodash/cloneDeep')
const configStub = require('./defaultConfig.stub.js')

const config = cloneDeep(configStub)
invokeDeep(config.theme)

module.exports = config
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"bytes": "^3.0.0",
"chalk": "^2.4.1",
"fs-extra": "^7.0.1",
"invoke-deep": "^1.0.1",
"lodash": "^4.17.11",
"node-emoji": "^1.8.1",
"normalize.css": "^8.0.1",
Expand Down
10 changes: 4 additions & 6 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import _ from 'lodash'
import postcss from 'postcss'
import perfectionist from 'perfectionist'

import defaultConfig from '../defaultConfig'
import registerConfigAsDependency from './lib/registerConfigAsDependency'
import processTailwindFeatures from './processTailwindFeatures'
import resolveConfig from './util/resolveConfig'
Expand All @@ -28,18 +29,15 @@ function resolveConfigPath(filePath) {
}

const getConfigFunction = config => () => {
if (_.isUndefined(config) && !_.isObject(config)) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 2nd part of this conditional is unnecessary. An undefined variable will never be an object.

return resolveConfig([require('../defaultConfig')()])
if (_.isUndefined(config)) {
return 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 => {
Expand Down
Loading