tailwindcss/__tests__/generateModules.test.js

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)
})