@apply with @supports produces extra commas

[leevigraham]

What version of Tailwind CSS are you using?

2.2.19

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

tailwind cli

What version of Node.js are you using?

v14.18.1

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/leevigraham/tailwind-apply-bug-repro

Describe your issue

• Issue: Output contains additional ,'s breaking css.
• Desired output: No extra commas

I'll admit this is a bit of a weird one but I ran into it writing some funky css. This test case is the minimal repro (really minimal… no actual css attributes in rules).

The following css:

@tailwind components;

@layer components {

    .grid--cards {
    }

    .grid-X,
    .grid-Y,
    .grid-Z {
        @apply grid--cards;
    }

    @supports (grid-template-rows: subgrid) {
        .grid--cards {}
        .some-other-rule {}
    }
}

Produces:

.grid-X, .grid-Y, .grid-Z {
}

@supports (grid-template-rows: subgrid) {
  .grid-X, .grid-Y, .grid-Z {
  }

  , ,  {
  }
}

Reproduction:

1. Clone the repo and run npm install.
2. Run npx tailwindcss -i input.css -o output.css
3. check output.css

Issue also exists in tailwind@next: npx tailwindcss@next -i input.css -o output.css

Notes:

Removing .some-other-rule {} results in:

.grid-X, .grid-Y, .grid-Z {
}

@supports (grid-template-rows: subgrid) {
  .grid-X, .grid-Y, .grid-Z {
  }
}

Adding more rules results in more commas:

/* input.css */
@tailwind components;

@layer components {

    .grid--cards {
    }

    .grid-X,
    .grid-Y,
    .grid-Z,
    .grid-Z,
    .grid-Z,
    .grid-Z {
        @apply grid--cards;
    }

    @supports (grid-template-rows: subgrid) {
        .grid--cards {}
        .some-other-rule {}
    }
}

/* output.css */
.grid-X, .grid-Y, .grid-Z, .grid-Z, .grid-Z, .grid-Z {
}

@supports (grid-template-rows: subgrid) {
  .grid-X, .grid-Y, .grid-Z, .grid-Z, .grid-Z, .grid-Z {
  }

  , , , , ,  {
  }
}

[RobinMalfait]

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

This will be fixed in the next version 👍