diff --git a/__tests__/screenAtRule.test.js b/__tests__/screenAtRule.test.js new file mode 100644 index 000000000..a428140d5 --- /dev/null +++ b/__tests__/screenAtRule.test.js @@ -0,0 +1,47 @@ +import postcss from 'postcss' +import plugin from '../src/lib/substituteScreenAtRules' +import config from '../stubs/defaultConfig.stub.js' + +function run(input, opts = config) { + return postcss([plugin(opts)]).process(input, { from: undefined }) +} + +test('it can generate media queries from configured screen sizes', () => { + const input = ` + @screen sm { + .banana { color: yellow; } + } + @screen md { + .banana { color: red; } + } + @screen lg { + .banana { color: green; } + } + ` + + const output = ` + @media (min-width: 500px) { + .banana { color: yellow; } + } + @media (min-width: 750px) { + .banana { color: red; } + } + @media (min-width: 1000px) { + .banana { color: green; } + } + ` + + return run(input, { + theme: { + screens: { + sm: '500px', + md: '750px', + lg: '1000px', + }, + }, + separator: ':', + }).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) diff --git a/src/lib/substituteScreenAtRules.js b/src/lib/substituteScreenAtRules.js index 78f6afe4d..9e3dc8811 100644 --- a/src/lib/substituteScreenAtRules.js +++ b/src/lib/substituteScreenAtRules.js @@ -1,17 +1,17 @@ import _ from 'lodash' import buildMediaQuery from '../util/buildMediaQuery' -export default function(config) { +export default function({ theme }) { return function(css) { css.walkAtRules('screen', atRule => { const screen = atRule.params - if (!_.has(config.screens, screen)) { + if (!_.has(theme.screens, screen)) { throw atRule.error(`No \`${screen}\` screen found.`) } atRule.name = 'media' - atRule.params = buildMediaQuery(config.screens[screen]) + atRule.params = buildMediaQuery(theme.screens[screen]) }) } }