Skip to content

Restructure config file for 1.0 #637

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

Merged
adamwathan merged 25 commits into from
Feb 5, 2019
Merged

Restructure config file for 1.0 #637

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
664f923
Move prefix option to top-level in config
adamwathan Jan 18, 2019
1a46f6b
Move important to top level option
adamwathan Jan 18, 2019
e8d16fc
Move separator to top level config option
adamwathan Jan 18, 2019
326f35a
Remove options key from config
adamwathan Jan 18, 2019
2f9172c
Update every plugin to accept its config as a parameter
adamwathan Jan 18, 2019
99b5e90
Move all config values back to single file
adamwathan Jan 24, 2019
3d2a598
Don't test for presence of defaultConfig in defaultConfig
adamwathan Jan 24, 2019
f10f182
Remove special "modules" merge behavior
adamwathan Jan 24, 2019
760e93b
Use user's specified default border color
adamwathan Jan 24, 2019
fd22dea
Always load core plugins by default
adamwathan Feb 1, 2019
95bb283
Rename defaultPlugins to corePlugins
adamwathan Feb 1, 2019
c56ae6c
Move modules outside of styles to top level key
adamwathan Feb 1, 2019
d98e97f
Rename modules to variants
adamwathan Feb 1, 2019
3fbd6b3
Disable plugins using corePlugins instead of variants
adamwathan Feb 1, 2019
efc7927
Rename styles to theme
adamwathan Feb 1, 2019
6533679
Inline theme into default config
adamwathan Feb 1, 2019
f8ddb76
Remove theme comments
adamwathan Feb 1, 2019
ec1bdd2
Move screens into theme config
adamwathan Feb 1, 2019
f3097f9
Move colors inside of theme
adamwathan Feb 1, 2019
b036cac
Fix code style
adamwathan Feb 1, 2019
ffdc2b0
Intelligently deep merge user's config
adamwathan Feb 1, 2019
195cdec
Don't skip CLI tests
adamwathan Feb 1, 2019
a4bdae4
Extract default theme to separate file
adamwathan Feb 1, 2019
083ab97
Fix code style
adamwathan Feb 1, 2019
d165661
Fix failing test
adamwathan Feb 1, 2019
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
Prev Previous commit
Next Next commit
Intelligently deep merge user's config
  • Loading branch information
@adamwathan
adamwathan committed Feb 1, 2019
commit ffdc2b01c5823f615ece6a528a5b6ad37a09f4a0
327 changes: 313 additions & 14 deletions __tests__/mergeConfigWithDefaults.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,346 @@
import mergeConfigWithDefaults from '../src/util/mergeConfigWithDefaults'

test('user top-level keys override default top-level keys', () => {
test('prefix key overrides default prefix', () => {
const userConfig = {
prefix: 'tw-',
important: true,
}

const defaultConfig = {
prefix: '-',
prefix: '',
important: false,
separator: ':',
theme: {
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
}

const result = mergeConfigWithDefaults(userConfig, defaultConfig)

expect(result).toEqual({
prefix: 'tw-',
important: false,
separator: ':',
theme: {
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
})
})

test('important key overrides default important', () => {
const userConfig = {
important: true,
}

const defaultConfig = {
prefix: '',
important: false,
separator: ':',
theme: {
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
}

const result = mergeConfigWithDefaults(userConfig, defaultConfig)

expect(result).toEqual({
prefix: '',
important: true,
separator: ':',
theme: {
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
})
})

test('missing top level keys are pulled from the default config', () => {
test('separator key overrides default separator', () => {
const userConfig = {
separator: '__',
}

const defaultConfig = {
prefix: '',
important: false,
separator: ':',
theme: {
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
}

const result = mergeConfigWithDefaults(userConfig, defaultConfig)

expect(result).toEqual({
prefix: '',
important: false,
separator: '__',
theme: {
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
})
})

test('theme key is merged instead of replaced', () => {
const userConfig = {
colors: { red: '#ff0000' },
modules: {},
theme: {
screens: {
mobile: '400px',
},
},
}

const defaultConfig = {
colors: { green: '#00ff00' },
screens: {
sm: '576px',
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
},
fonts: {
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Roboto',
'sans-serif',
],
serif: [
'Constantia',
'Lucida Bright',
'Georgia',
'serif',
],
},
screens: {
sm: '500px',
md: '750px',
lg: '1000px',
},
},
modules: {},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
}

const result = mergeConfigWithDefaults(userConfig, defaultConfig)

expect(result).toEqual({
colors: { red: '#ff0000' },
screens: {
sm: '576px',
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
},
fonts: {
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Roboto',
'sans-serif',
],
serif: [
'Constantia',
'Lucida Bright',
'Georgia',
'serif',
],
},
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
}
})
})

test('variants key is merged instead of replaced', () => {
const userConfig = {
variants: {
backgroundAttachment: [],
borderColors: ['responsive', 'hover', 'focus', 'active'],
}
}

const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
},
fonts: {
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Roboto',
'sans-serif',
],
serif: [
'Constantia',
'Lucida Bright',
'Georgia',
'serif',
],
},
screens: {
sm: '500px',
md: '750px',
lg: '1000px',
},
},
variants: {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
borderRadius: ['responsive'],
}
}

const result = mergeConfigWithDefaults(userConfig, defaultConfig)

expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
},
fonts: {
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Roboto',
'sans-serif',
],
serif: [
'Constantia',
'Lucida Bright',
'Georgia',
'serif',
],
},
screens: {
sm: '500px',
md: '750px',
lg: '1000px',
},
},
variants: {
appearance: ['responsive'],
backgroundAttachment: [],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus', 'active'],
borderRadius: ['responsive'],
}
})
})

test('missing top level keys are pulled from the default config', () => {
const userConfig = {}

const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
colors: { green: '#00ff00' },
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
},
}

const result = mergeConfigWithDefaults(userConfig, defaultConfig)

expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
colors: { green: '#00ff00' },
screens: {
mobile: '400px',
},
},
variants: {
appearance: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
},
modules: {},
})
})
5 changes: 4 additions & 1 deletion src/util/mergeConfigWithDefaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import _ from 'lodash'

export default function(userConfig, defaultConfig) {
return _.defaults(userConfig, defaultConfig)
return _.defaults({
theme: _.defaults(userConfig.theme, defaultConfig.theme),
variants: _.defaults(userConfig.variants, defaultConfig.variants),
}, userConfig, defaultConfig)
}