1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- import postcss from 'postcss'
- import plugin from '../src/lib/substituteScreenAtRules'
- import config from '../stubs/config.full.js'
- import { css } from './util/run'
- function run(input, opts = config) {
- return postcss([plugin({ tailwindConfig: opts })]).process(input, { from: undefined })
- }
- 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: yellow;
- }
- }
- @media (min-width: 750px) {
- .banana {
- color: red;
- }
- }
- @media (min-width: 1000px) {
- .banana {
- color: green;
- }
- }
- `)
- expect(result.warnings().length).toBe(0)
- })
- })
|