tailwindcss/__tests__/generateModules.test.js at plugins · KKAC/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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import generateModules from '../src/util/generateModules'
import defineClasses from '../src/util/defineClasses'

function textAlign() {
  return defineClasses({
    'text-left': { 'text-align': 'left' },
    'text-right': { 'text-align': 'right' },
    'text-center': { 'text-align': 'center' },
  })
}

function display() {
  return defineClasses({
    block: { display: 'block' },
    inline: { display: 'inline' },
    'inline-block': { display: 'inline-block' },
  })
}

function borderStyle() {
  return defineClasses({
    'border-solid': { 'border-style': 'solid' },
    'border-dashed': { 'border-style': 'dashed' },
    'border-dotted': { 'border-style': 'dotted' },
  })
}

test('an empty variants list generates a @variants at-rule with no parameters', () => {
  const result = generateModules([{ name: 'textAlign', generator: textAlign }], {
    textAlign: [],
  })

  const expected = `
    @variants {
      .text-left { text-align: left }
      .text-right { text-align: right }
      .text-center { text-align: center }
    }
  `
  expect(result.toString()).toMatchCss(expected)
})

test('a `false` variants list generates no output', () => {
  const result = generateModules([{ name: 'textAlign', generator: textAlign }], {
    textAlign: false,
  })

  expect(result.toString()).toMatchCss('')
})

test('specified variants are included in the @variants at-rule', () => {
  const result = generateModules([{ name: 'textAlign', generator: textAlign }], {
    textAlign: ['responsive', 'hover'],
  })

  const expected = `
    @variants responsive, hover {
      .text-left { text-align: left }
      .text-right { text-align: right }
      .text-center { text-align: center }
    }
  `
  expect(result.toString()).toMatchCss(expected)
})

test('options must provide variants for every module', () => {
  expect(() => {
    generateModules(
      [{ name: 'textAlign', generator: textAlign }, { name: 'display', generator: display }],
      {
        textAlign: [],
      }
    )
  }).toThrow()
})

test('variants can be different for each module', () => {
  const result = generateModules(
    [
      { name: 'textAlign', generator: textAlign },
      { name: 'display', generator: display },
      { name: 'borderStyle', generator: borderStyle },
    ],
    {
      textAlign: [],
      display: false,
      borderStyle: ['responsive', 'hover', 'focus'],
    }
  )

  const expected = `
    @variants {
      .text-left { text-align: left }
      .text-right { text-align: right }
      .text-center { text-align: center }
    }

    @variants responsive, hover, focus {
      .border-solid { border-style: solid }
      .border-dashed { border-style: dashed }
      .border-dotted { border-style: dotted }
    }
  `
  expect(result.toString()).toMatchCss(expected)
})

test('generators can reference the generatorOptions object', () => {
  const result = generateModules(
    [
      {
        name: 'parameterized',
        generator: generatorParams => {
          return defineClasses({
            foo: { color: generatorParams.color },
          })
        },
      },
    ],
    {
      parameterized: [],
    },
    {
      color: 'blue',
    }
  )

  const expected = `
    @variants {
      .foo { color: blue }
    }
  `
  expect(result.toString()).toMatchCss(expected)
})