Nested CSS output by Tailwind during dev mode doesn't work in Chrome

[dhruvkb]

What version of Tailwind CSS are you using?

For example: v4.0.6

What browser are you using?

This bug appears on Chrome but not in Firefox.

Firefox	Chrome
No bug, works as expected.	Buggy, colors are incorrect.

Reproduction URL

https://play.tailwindcss.com/aKEDzegSx4

Describe your issue

Nested CSS output by Tailwind doesn't work in Chrome. It works well in Firefox. When the output is built for prod, Lightning CSS flattens the output and the final version works in both browsers. Based on this, it is quite likely that this is a Chrome bug.

Is there a way to output flat CSS during development so that this bug can be worked around when in dev mode?

[adamwathan]

Thanks — raised this with my contacts at Google to see if there's any good reason for this or if it's a bug, will report back!

[argyleink]

bug in the output from Lightning during dev.

/* doesnt work */
h1 {
  &::after { 
    &:active {
      color: red;
    }
  }
}

/* does work */
h1 {
  &:active {
    &::after {
      color: green;
    }
  }
}

If it helps, my Firefox and Chrome both show the same results for the provided repro URL

[adamwathan]

@argyleink This isn't a Lightning thing in this case because we don't use Lightning in Play, instead we just ship the original nested CSS to the browser.

The thing I'm confused by is why two of these work but one doesn't:

/* Works */
.my-class:visited::after {
  color: orange;
}

/* Works */
.my-class {
  &:visited::after {
    color: orange;
  }
}

/* Doesn't work */
.my-class {
  &:visited {
    &::after {
      color: orange;
    }
  }
}

I would've thought all of these would be the same thing 🤔

[argyleink]

confirm, what you wrote there is an interop issue. screenshot of this little playground:

i feel like, either Firefox is missing the guards specced for :visited or Safari and Chrome have a nesting bug.

[tabatkins]

Yes, in theory all of these should be the same. It looks like a bug in Chrome/Safari's application of the :visited matching restrictions, which are complicated and a little ad-hoc, when mixed with Nesting. (This is one of the reasons Chrome is planning to get rid of them and start treating :visited like a normal pseudo-class that just matches a bit less than today.)