Need to resolve the :has() empty sub selector after build the angular project.

[BVPritesh]

After building the Angular project, I found that a warning was displayed. However, the style.css file is not empty; the .has() selector has a value. Please check the screenshot below.

Let me know if you need further adjustments!

Warning message as below:

WARNING] 7 rules skipped due to selector errors:
  .has-\[\:checked\]\:border-indigo-200:has() -> Empty sub-selector
  .has-\[\:checked\]\:bg-indigo-50:has() -> Empty sub-selector
  .has-\[\:checked\]\:bg-indigo-500:has() -> Empty sub-selector
  .has-\[\:checked\]\:text-indigo-900:has() -> Empty sub-selector
  .has-\[\:checked\]\:text-white:has() -> Empty sub-selector
  .has-\[\:checked\]\:ring-2:has() -> Empty sub-selector
  .has-\[\:checked\]\:ring-indigo-600:has() -> Empty sub-selector

Screenshot:

[BVPritesh]

Move to issue.

[philipp-spiess]

Hey! The has-[:checked] variant seems to work as expected (generated a :has(:checked) rule that also works in the browser: https://play.tailwindcss.com/574gjjiugj

I don't understand this warning because the screenshot clearly shows a valid sub-selector (the :checked part). Maybe this is an issue in the linter that you're running 🤔 ?

[BVPritesh]

Hey @philipp-spiess

Yes, the CSS code is correct, but I don't know how, yet after running the build command, this warning appears in the command prompt.

[philipp-spiess]

What might be a good next step is to set up a minimal reproduction case (i.e an Angular project that only has one CSS rule that triggers the warning) and then bringing this up with the authors of the linter tool (I'm not exactly sure what the Angular setup is using, i.e do they have their own Linter or do they use a third-party tool for that?)