123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- import { normalizeConfig } from '../src/util/normalizeConfig'
- import resolveConfig from '../src/public/resolve-config'
- import { run, css } from './util/run'
- it.each`
- config
- ${{ purge: [{ raw: 'text-center' }] }}
- ${{ purge: { content: [{ raw: 'text-center' }] } }}
- ${{ content: { files: [], 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: { files: [], 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;
- }
- `)
- })
- })
- test.each`
- config
- ${{
- purge: { content: [{ raw: 'text-center' }], extract: () => ['font-bold'] },
- }}
- ${{
- purge: { content: [{ raw: 'text-center' }], extract: { DEFAULT: () => ['font-bold'] } },
- }}
- ${{
- purge: {
- content: [{ raw: 'text-center' }],
- options: { defaultExtractor: () => ['font-bold'] },
- },
- }}
- ${{
- purge: {
- content: [{ raw: 'text-center' }],
- options: { extractors: [{ extractor: () => ['font-bold'], extensions: ['html'] }] },
- },
- }}
- ${{
- purge: {
- content: [{ raw: 'text-center' }],
- 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;
- }
- `)
- })
- })
- test('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;
- }
- `)
- })
- })
- it('should keep content files with globs', () => {
- let config = {
- content: ['./example-folder/**/*.{html,js}'],
- }
- expect(normalizeConfig(resolveConfig(config)).content).toEqual({
- files: ['./example-folder/**/*.{html,js}'],
- relative: false,
- extract: {},
- transform: {},
- })
- })
- it('should warn when we detect invalid globs with incorrect brace expansion', () => {
- let config = {
- content: [
- './{example-folder}/**/*.{html,js}',
- './{example-folder}/**/*.{html}',
- './example-folder/**/*.{html}',
- ],
- }
- let normalizedConfig = normalizeConfig(resolveConfig(config)).content
- // No rewrite happens
- expect(normalizedConfig).toEqual({
- files: [
- './{example-folder}/**/*.{html,js}',
- './{example-folder}/**/*.{html}',
- './example-folder/**/*.{html}',
- ],
- relative: false,
- extract: {},
- transform: {},
- })
- expect().toHaveBeenWarnedWith(['invalid-glob-braces'])
- })
|