Remove config() function in favor of theme()

The only reason the config() helper function existed was to access your design tokens in your CSS, like:

```css
.foo {
  color: config('colors.blue')
}
```

Now that design tokens are nested in the new `theme` section, using the `config()` function is a bit more verbose:

```css
.foo {
  color: config('theme.colors.blue')
}
```

This PR removes the `config()` function in favor of a new `theme()` function that is already scoped to the `theme` section of the config:

```css
.foo {
  color: theme('colors.blue')
}
```

I can't think of any reason at all why you would need to access the non-theme values in your config from your CSS (like enabled variants, or your list of plugins), and the word `theme` is much more expressive than `config`, so I think this is a worthwhile change.
This commit is contained in:
Adam Wathan 2019-03-01 08:35:24 -05:00
parent 49341ce5e4
commit 53ca284553
4 changed files with 9 additions and 9 deletions

View File

@ -7,6 +7,6 @@
@responsive {
.example {
@apply .font-bold;
color: config('theme.colors.red');
color: theme('colors.red');
}
}

View File

@ -5,9 +5,9 @@ function run(input, opts = {}) {
return postcss([plugin(opts)]).process(input, { from: undefined })
}
test('it looks up values in the config using dot notation', () => {
test('it looks up values in the theme using dot notation', () => {
const input = `
.banana { color: config('theme.colors.yellow'); }
.banana { color: theme('colors.yellow'); }
`
const output = `
@ -28,7 +28,7 @@ test('it looks up values in the config using dot notation', () => {
test('quotes are optional around the lookup path', () => {
const input = `
.banana { color: config(theme.colors.yellow); }
.banana { color: theme(colors.yellow); }
`
const output = `
@ -49,7 +49,7 @@ test('quotes are optional around the lookup path', () => {
test('a default value can be provided', () => {
const input = `
.cookieMonster { color: config('theme.colors.blue', #0000ff); }
.cookieMonster { color: theme('colors.blue', #0000ff); }
`
const output = `
@ -70,7 +70,7 @@ test('a default value can be provided', () => {
test('quotes are preserved around default values', () => {
const input = `
.heading { font-family: config('theme.fonts.sans', "Helvetica Neue"); }
.heading { font-family: theme('fonts.sans', "Helvetica Neue"); }
`
const output = `

View File

@ -4,8 +4,8 @@ import functions from 'postcss-functions'
export default function(config) {
return functions({
functions: {
config: (path, defaultValue) => {
return _.get(config, _.trim(path, `'"`), defaultValue)
theme: (path, defaultValue) => {
return _.get(config.theme, _.trim(path, `'"`), defaultValue)
},
},
})

View File

@ -89,7 +89,7 @@ ul {
*::after {
border-width: 0;
border-style: solid;
border-color: config('theme.borderColor.default', currentColor);
border-color: theme('borderColor.default', currentColor);
}
/**