mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
d94541cbf3
* immediately take the `safelist` values into account
Currently we had to manually add them in the `setupTrackingContext`,
`setupWatchingContext` and the `cli`.
This was a bit cumbersome, because the `safelist` function (to resolve
regex patterns) was implemented on the context. This means that we had
to do something like this:
```js
let changedContent = []
let context = createContext(config, changedContent)
for (let content of context.safelist()) {
changedContent.push(content)
}
```
This just feels wrong in general, so now it is handled internally for
you which means that we can't mess it up anymore in those 3 spots.
* drop the dot from the extension
Our transformers and extractors are implemented for `html` for example.
However the `path.extname()` returns `.html`.
This isn't an issue by default, but it could be for with custom
extractors / transformers.
* normalize the configuration
* make shared cache local per extractor
* ensure we always have an `extension`
Defaults to `html`
* splitup custom-extractors test
* update old config structure to new structure
* ensure we validate the "old" structure, and warn if invalid
* add tests with "old" config, to ensure it keeps working
* add missing `content` object
* inline unnecessary function abstraction
98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
import { run, css } from './util/run'
|
|
|
|
it.each`
|
|
config
|
|
${{ purge: [{ raw: 'text-center' }] }}
|
|
${{ purge: { content: [{ raw: 'text-center' }] } }}
|
|
${{ content: { content: [{ raw: 'text-center' }] } }}
|
|
`('should normalize content $config', ({ config }) => {
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it.each`
|
|
config
|
|
${{ purge: { safelist: ['text-center'] } }}
|
|
${{ purge: { options: { safelist: ['text-center'] } } }}
|
|
${{ content: { safelist: ['text-center'] } }}
|
|
`('should normalize safelist $config', ({ config }) => {
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it.each`
|
|
config
|
|
${{ content: [{ raw: 'text-center' }], purge: { extract: () => ['font-bold'] } }}
|
|
${{ content: [{ raw: 'text-center' }], purge: { extract: { DEFAULT: () => ['font-bold'] } } }}
|
|
${{ content: [{ raw: 'text-center' }], purge: { options: { defaultExtractor: () => ['font-bold'] } } }}
|
|
${{ content: [{ raw: 'text-center' }], purge: { options: { extractors: [{ extractor: () => ['font-bold'], extensions: ['html'] }] } } }}
|
|
${{ content: [{ raw: 'text-center' }], purge: { extract: { html: () => ['font-bold'] } } }}
|
|
`('should normalize extractors $config', ({ config }) => {
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should still be possible to use the "old" v2 config', () => {
|
|
let config = {
|
|
purge: {
|
|
content: [
|
|
{ raw: 'text-svelte', extension: 'svelte' },
|
|
{ raw: '# My Big Heading', extension: 'md' },
|
|
],
|
|
options: {
|
|
defaultExtractor(content) {
|
|
return content.split(' ').concat(['font-bold'])
|
|
},
|
|
},
|
|
extract: {
|
|
svelte(content) {
|
|
return content.replace('svelte', 'center').split(' ')
|
|
},
|
|
},
|
|
transform: {
|
|
md() {
|
|
return 'text-4xl'
|
|
},
|
|
},
|
|
},
|
|
theme: {
|
|
extends: {},
|
|
},
|
|
variants: {
|
|
extends: {},
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-4xl {
|
|
font-size: 2.25rem;
|
|
line-height: 2.5rem;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
})
|
|
})
|