tailwindcss/tests/normalize-config.test.js at spacejam · miguilimzero/tailwindcss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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;
      }
    `)
  })
})