Merge pull request #773 from tailwindcss/test-screen

Fix @screen not working, add simple test

Author: adamwathan

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

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