Add @screen support

Author: adamwathan

src/index.js

@@ -14,6 +14,7 @@ const selectorParser = require('postcss-selector-parser')
 const resolveConfig = require('tailwindcss/resolveConfig')
 const escape = require('tailwindcss/lib/util/escapeClassName').default
 const evaluateTailwindFunctions = require('tailwindcss/lib/lib/evaluateTailwindFunctions').default
+const substituteScreenAtRules = require('tailwindcss/lib/lib/substituteScreenAtRules').default
 const parseObjectStyles = require('tailwindcss/lib/util/parseObjectStyles').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const prefixSelector = require('tailwindcss/lib/util/prefixSelector').default
@@ -1153,6 +1154,7 @@ module.exports = (pluginOptions = {}) => {
             }
           },
           evaluateTailwindFunctions(context.tailwindConfig),
+          substituteScreenAtRules(context.tailwindConfig),
         ]).process(root, { from: undefined })
       },
       env.DEBUG &&

src/index.test.css

@@ -4,6 +4,11 @@
     'Segoe UI Symbol', 'Noto Color Emoji';
   color: #3b82f6;
 }
+@media (min-width: 1024px) {
+  .screen-test {
+    color: purple;
+  }
+}
 .apply-test {
   margin-top: 1.5rem;
   --tw-bg-opacity: 1;

src/index.test.js

@@ -50,6 +50,11 @@ test('it works', () => {
       font-family: theme('fontFamily.sans');
       color: theme('colors.blue.500');
     }
+    @screen lg {
+      .screen-test {
+        color: purple;
+      }
+    }
     .apply-test {
       @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
     }