Jit crash with comment in @layer utilities

[targos]

What version of Tailwind CSS are you using?

v2.2.17

What build tool (or framework if it abstracts the build tool) are you using?

Vite 2.6.7

What version of Node.js are you using?

For example: v16.11.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

N/A

Describe your issue

With the following tailwind.css file, Jit mode crashes because of the "hello" comment:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* hello */
  .test {
    color: red;
  }
}

It is important to reproduce the crash that the comment be inside the @layer utilities block, just before a selector.

Stack trace:

rule.walkDecls is not a function
      at /Users/targos/test/node_modules/tailwindcss/lib/jit/lib/generateRules.js:338:14
      at Array.map (<anonymous>)
      at generateRules (/Users/targos/test/node_modules/tailwindcss/lib/jit/lib/generateRules.js:330:27)
      at /Users/targos/test/node_modules/tailwindcss/lib/jit/lib/expandTailwindAtRules.js:186:50
      at /Users/targos/test/node_modules/tailwindcss/lib/jit/processTailwindFeatures.js:60:49
      at /Users/targos/test/node_modules/tailwindcss/lib/jit/index.js:25:56
      at LazyResult.runOnRoot (/Users/targos/test/node_modules/postcss/lib/lazy-result.js:339:16)
      at LazyResult.runAsync (/Users/targos/test/node_modules/postcss/lib/lazy-result.js:391:26)
      at LazyResult.async (/Users/targos/test/node_modules/postcss/lib/lazy-result.js:221:30)
      at LazyResult.then (/Users/targos/test/node_modules/postcss/lib/lazy-result.js:206:17) (x3)

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I can't reproduce it with this setup, but can you share your full tailwind.config.js?
I can reproduce it when I have important: true, but I want to verify that you have this as well.

[targos]

Oh, sorry I forgot to put the config I used. Indeed, we have important: true:

It can be reproduced with:

module.exports = {
  mode: 'jit',
  important: true,
  purge: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
  darkMode: false,
};

[RobinMalfait]

Perfect thank you!

This should be fixed, and will be available in Tailwind v3.

You can already try it by using the v3 alpha version using npm install tailwindcss@insiders or yarn add tailwindcss@insiders.