Skip to content

Incorrect rendering of :has() and :not() selectors since 4.0.7 #16799

Closed
@saadeghi

Description

@saadeghi

What version of Tailwind CSS are you using?

v4.0.7 and v4.0.8
(It was working correctly in 4.0.6)

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

For example: Vite 6

Reproduction URL

https://github.com/saadeghi/tw-has-bug

Describe your issue
Plugin:

export default ({ addComponents }) => {
  addComponents({
    ".parent-bug": {
      "&:has(.child:nth-child(2))": {
        background: "green",
      },
    },
    ".empty-has-bug": {
      "&:has(:nth-child(2))": {
        background: "yellow",
      },
    },
    ".empty-not-bug": {
      "&:not(:nth-child(1))": {
        background: "blue",
      },
    },
  });
};

expected output:

.parent-bug {
  &:has(.child:nth-child(2)) {
    background: green;
  }
}

.empty-has-bug {
  &:has(:nth-child(2)) {
    background: yellow;
  }
}

.empty-not-bug {
  &:not(:nth-child(1)) {
    background: blue;
  }
}

generated style in v4.0.7 and v4.0.8

.parent-bug {
  &:has():nth-child(2) {
    background: green;
  }
}

.empty-has-bug {
  &:has():nth-child(2) {
    background: yellow;
  }
}

.empty-not-bug {
  &:not():nth-child(1) {
    background: blue;
  }
}

The first 2 selectors were working correctly in 4.0.6.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions