tailwindcss/tests/screenAtRule.test.js

import postcss from 'postcss'
import plugin from '../src/lib/substituteScreenAtRules'
import config from '../stubs/defaultConfig.stub.js'
import { crosscheck, css } from './util/run'

function run(input, opts = config) {
  return postcss([plugin({ tailwindConfig: opts })]).process(input, { from: undefined })
}

crosscheck(() => {
  test('it can generate media queries from configured screen sizes', () => {
    let input = css`
      @screen sm {
        .banana {
          color: yellow;
        }
      }
      @screen md {
        .banana {
          color: red;
        }
      }
      @screen lg {
        .banana {
          color: green;
        }
      }
    `

    return run(input, {
      theme: {
        screens: {
          sm: '500px',
          md: '750px',
          lg: '1000px',
        },
      },
      separator: ':',
    }).then((result) => {
      expect(result.css).toMatchFormattedCss(css`
        @media (min-width: 500px) {
          .banana {
            color: #ff0;
          }
        }
        @media (min-width: 750px) {
          .banana {
            color: red;
          }
        }
        @media (min-width: 1000px) {
          .banana {
            color: green;
          }
        }
      `)
      expect(result.warnings().length).toBe(0)
    })
  })
})