Repository: tailwindlabs/tailwindcss (TypeScript) — Bug Fix

Issue:
[beta.1] `No "md" screen found` error on build
I encountered a `No "md" screen found` error upon trying out `beta.1`. To attempt to rule out anything goofy I may have done with my own setup, here are reproduction steps using the Jigsaw Blog Starter Template upon which my site is based.

```shell
mkdir tailwind-next-test && cd tailwind-next-test

composer require tightenco/jigsaw

vendor/bin/jigsaw init blog

vendor/bin/jigsaw build

npm run watch
```

_**verify build runs and site looks OK**_

```shell
npm install tailwindcss@next

node_modules/tailwindcss/lib/cli.js init

# or modify webpack.mix.js to refer to new config file... whichever makes you happiest :)
mv tailwind.config.js tailwind.js

npm run watch
```
Produce an error that includes the following:

```shell
ERROR in ./source/_assets/sass/main.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/lib/loader.js??ref--5-4!./source/_assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(114:4) No `md` screen found.
```

I expected to run into some errors or display anomalies due to some of the class names changing, but I don't recall reading anything about `screen` issues.

I'm happy to wait for the next release if it's just a matter of me missing a step that will be covered in the migration steps, otherwise, let me know if there's any other useful info I can provide.


Discussion:
What does your config file look like? My first guess is it’s still in the
old format.
On Sat, Mar 16, 2019 at 11:10 AM Michael Moussa <notifications@github.com>
wrote:

> I encountered a No "md" screen found error upon trying out beta.1. To
> attempt to rule out anything goofy I may have done with my own setup, here
> are reproduction steps using the Jigsaw Blog Starter Template upon which my
> site is based.
>
> mkdir tailwind-next-test
>
> composer require tightenco/jigsaw
>
> vendor/bin/jigsaw init blog
>
> vendor/bin/jigsaw build
>
> npm run watch
>
> *verify build runs and site looks OK*
>
> npm install tailwindcss@next
>
> node_modules/tailwindcss/lib/cli.js init
>
> mv tailwind.config.js tailwind.js
>
> npm run watch
>
> Produce an error that includes the following:
>
> ERROR in ./source/_assets/sass/main.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/lib/loader.js??ref--5-4!./source/_assets/sass/main.scss)
> Module build failed (from ./node_modules/postcss-loader/src/index.js):
> SyntaxError
>
> (114:4) No `md` screen found.
>
> I expected to run into some errors or display anomalies due to some of the
> class names changing, but I don't recall reading anything about screen
> issues.
>
> I'm happy to wait for the next release if it's just a matter of me missing
> a step that will be covered in the migration steps, otherwise, let me know
> if there's any other useful info I can provide.
>
> —
> You are receiving this because you are subscribed to this thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/tailwindcss/tailwindcss/issues/771>, or mute the
> thread
> <https://github.com/notifications/unsubscribe-auth/AEH3bDCNWLG4_Chqw1sy8CxdPMMxs-Xmks5vXQmDgaJpZM4b32rX>
> .
>

This is my `tailwind.js` (I ran the `cli.js init` to generate it):

```js
$ \cat tailwind.js
module.exports = {
  theme: {
    // Some useful comment
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}
```

After submitting this issue, I realized my `source/_assets/sass/main.scss` might need updates too. This is the default one in the `jigsaw-blog-template`:

```sass
@tailwind preflight;
@tailwind components;

// Code syntax highlighting,
// powered by https://highlightjs.org
@import '~highlight.js/styles/a11y-light.css';

@import 'base';
@import 'navigation';
@import 'mailchimp';
@import 'blog';

@tailwind utilities;
```

I _did_ spot [this fixture](https://github.com/tailwindcss/tailwindcss/blob/v1.0.0-beta.1/__tests__/fixtures/tailwind-input.css) in the `beta.1` repo though, and tried using that as a basis instead:

```sass
$ \cat source/_assets/sass/main.scss
@tailwind base;

@tailwind components;

@tailwind utilities;

@responsive {
  .example {
    @apply .font-bold;
    color: theme('colors.red.500');
  }
}

div {
    @screen md {
        @apply bg-red-500;
    }
}
```

Same `@screen md` error upon build (note: test case works if I remove the `@screen md` wrapper around the `@apply bg-red-500;`).
Looking at the code there is definitely a bug here, so thanks for catching! Will fix likely today and get a new beta out 👍 

Resolving patch:
diff --git a/src/lib/substituteScreenAtRules.js b/src/lib/substituteScreenAtRules.js
--- 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])
     })
   }
 }


Test patch:
diff --git a/__tests__/screenAtRule.test.js b/__tests__/screenAtRule.test.js
new file mode 100644
--- /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)
+  })
+})