Variants of @layer-provided utilities have incorrect source map locations

[sapphi-red]

What version of Tailwind CSS are you using?

v3.3.5

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

postcss 8.4.31

What version of Node.js are you using?

v20.9.0

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction URL

https://stackblitz.com/edit/node-xsqtyh?file=index.js,package.json

Describe your issue

Without tailwind, running postcss (+ autoprefixer) on the following content outputs a warning with { line: 8, column: 5, endLine: 8, endColumn: 25 }. This is the position of color-adjust: exact; which I expect.

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

@layer utilities {
  .foo {
    color-adjust: exact;
  }
}

But with tailwind, the position becomes { line: 1, column: 1, endLine: 11, endColumn: 2 }. This points the whole content. Also endLine: 11, endColumn: 2 is pointing the position out-of-bounds.
I expect tailwind to not to alter the warning position.

I found this while debugging vitejs/vite#15076.

[Spice-King]

Well, that explains why I could not make heads or tails of this while lacking experience with the code base. Two bugs stacking together. Thanks for the fix in Vite and finding the triggering issue here @sapphi-red.

[thecrypticace]

Looks like this only happens for variants of rules in an @layer. Looking into it!

[thecrypticace]

Hey I've merged the fix for this in #12508 and it'll be available in our next release.

It'll also be available via our insiders build in about 15 minutes:

npm install tailwindcss@insiders

[sapphi-red]

@thecrypticace
I ran the reproduction with 0.0.0-insiders.6dfcdd1.
The warning changed to

[
  {
    type: 'warning',
    text: 'Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.',
    line: 300,
    column: 5,
    endLine: 300,
    endColumn: 25,
    node: undefined,
    plugin: 'autoprefixer'
  }
]

I think the line number is still broken. 🤔