mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
53ca284553
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.
91 lines
1.8 KiB
JavaScript
91 lines
1.8 KiB
JavaScript
import postcss from 'postcss'
|
|
import plugin from '../src/lib/evaluateTailwindFunctions'
|
|
|
|
function run(input, opts = {}) {
|
|
return postcss([plugin(opts)]).process(input, { from: undefined })
|
|
}
|
|
|
|
test('it looks up values in the theme using dot notation', () => {
|
|
const input = `
|
|
.banana { color: theme('colors.yellow'); }
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: #f7cc50; }
|
|
`
|
|
|
|
return run(input, {
|
|
theme: {
|
|
colors: {
|
|
yellow: '#f7cc50',
|
|
},
|
|
},
|
|
}).then(result => {
|
|
expect(result.css).toEqual(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('quotes are optional around the lookup path', () => {
|
|
const input = `
|
|
.banana { color: theme(colors.yellow); }
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: #f7cc50; }
|
|
`
|
|
|
|
return run(input, {
|
|
theme: {
|
|
colors: {
|
|
yellow: '#f7cc50',
|
|
},
|
|
},
|
|
}).then(result => {
|
|
expect(result.css).toEqual(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('a default value can be provided', () => {
|
|
const input = `
|
|
.cookieMonster { color: theme('colors.blue', #0000ff); }
|
|
`
|
|
|
|
const output = `
|
|
.cookieMonster { color: #0000ff; }
|
|
`
|
|
|
|
return run(input, {
|
|
theme: {
|
|
colors: {
|
|
yellow: '#f7cc50',
|
|
},
|
|
},
|
|
}).then(result => {
|
|
expect(result.css).toEqual(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('quotes are preserved around default values', () => {
|
|
const input = `
|
|
.heading { font-family: theme('fonts.sans', "Helvetica Neue"); }
|
|
`
|
|
|
|
const output = `
|
|
.heading { font-family: "Helvetica Neue"; }
|
|
`
|
|
|
|
return run(input, {
|
|
theme: {
|
|
fonts: {
|
|
serif: 'Constantia',
|
|
},
|
|
},
|
|
}).then(result => {
|
|
expect(result.css).toEqual(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|