tailwindcss/tests/important-modifier-prefix.test.js at master · bradhaydon/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
import { crosscheck, run, html, css, defaults } from './util/run'

crosscheck(() => {
  test('important modifier with prefix', () => {
    let config = {
      important: false,
      prefix: 'tw-',
      darkMode: 'class',
      content: [
        {
          raw: html`<!-- The string "!*" can cause problems if we don't handle it, let's include it -->
            <div class="!*"></div>
            <div class="!tw-container"></div>
            <div class="!tw-font-bold"></div>
            <div class="hover:!tw-text-center"></div>
            <div class="lg:!tw-opacity-50"></div>
            <div class="xl:focus:disabled:!tw-float-right"></div> `,
        },
      ],
      corePlugins: { preflight: false },
    }

    let input = css`
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
    `

    return run(input, config).then((result) => {
      expect(result.css).toMatchFormattedCss(css`
        ${defaults}
        .\!tw-container {
          width: 100% !important;
        }
        @media (min-width: 640px) {
          .\!tw-container {
            max-width: 640px !important;
          }
        }
        @media (min-width: 768px) {
          .\!tw-container {
            max-width: 768px !important;
          }
        }
        @media (min-width: 1024px) {
          .\!tw-container {
            max-width: 1024px !important;
          }
        }
        @media (min-width: 1280px) {
          .\!tw-container {
            max-width: 1280px !important;
          }
        }
        @media (min-width: 1536px) {
          .\!tw-container {
            max-width: 1536px !important;
          }
        }
        .\!tw-font-bold {
          font-weight: 700 !important;
        }
        .hover\:\!tw-text-center:hover {
          text-align: center !important;
        }
        @media (min-width: 1024px) {
          .lg\:\!tw-opacity-50 {
            opacity: 0.5 !important;
          }
        }
        @media (min-width: 1280px) {
          .xl\:focus\:disabled\:\!tw-float-right:disabled:focus {
            float: right !important;
          }
        }
      `)
    })
  })
})