tailwindcss/tests/layerAtRule.test.js at master · cfraz89/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
import postcss from 'postcss'
import tailwind from '../src/index'

function run(input, config = {}) {
  return postcss([tailwind({ corePlugins: [], ...config })]).process(input, { from: undefined })
}

test('layers are grouped and inserted at the matching @tailwind rule', () => {
  const input = `
    @layer vanilla {
      strong { font-weight: medium }
    }

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer components {
      .btn { background: blue }
    }

    @layer utilities {
      .align-banana { text-align: banana }
    }

    @layer base {
      h1 { font-weight: bold }
    }

    @layer components {
      .card { border-radius: 12px }
    }

    @layer base {
      p { font-weight: normal }
    }

    @layer utilities {
      .align-sandwich { text-align: sandwich }
    }

    @layer chocolate {
      a { text-decoration: underline }
    }
  `

  const expected = `
    @layer vanilla {
      strong { font-weight: medium }
    }

    body { margin: 0 }
    h1 { font-weight: bold }
    p { font-weight: normal }

    .input { background: white }
    .btn { background: blue }
    .card { border-radius: 12px }

    .float-squirrel { float: squirrel }
    .align-banana { text-align: banana }
    .align-sandwich { text-align: sandwich }

    @layer chocolate {
      a { text-decoration: underline }
    }
  `

  expect.assertions(2)

  return run(input, {
    plugins: [
      function ({ addBase, addComponents, addUtilities }) {
        addBase({
          body: {
            margin: 0,
          },
        })

        addComponents({
          '.input': { background: 'white' },
        })

        addUtilities({
          '.float-squirrel': { float: 'squirrel' },
        })
      },
    ],
  }).then((result) => {
    expect(result.css).toMatchCss(expected)
    expect(result.warnings().length).toBe(0)
  })
})