Invalid `.js-has-pseudo...` class selector output

[carjuan]

Bug description

My postcss.config.js:

import postcssPresetEnv from 'postcss-preset-env';

/** @type {import('postcss-load-config').Config} */
export default {
    plugins: [
        postcssPresetEnv({
            debug: true,
            enableClientSidePolyfills: true,
        }),
    ],
};

My .browserslistrc config:

last 2 versions, > 0.1%

Whenever I initialize the client library of css-has-pseudo, .test:hover p selector does not work. If a browser requires the polyfill, it will work fine. However, when a browser supports native :has, the selector does not work.

After actual css output and peeking at the client library, I suspect this library will attempt to replace anything .js-has-pseudo... class selector with "" using CSSOM API. This ends up removing the .test:hover p selector as well, which has nothing to do with :has.

Source CSS

label {
  cursor: inherit;
}

.test:hover p {
  background-color: gold !important;
}

.test:has([type='radio']:focus) p {
  background-color: gold !important;
}

Expected CSS

label {
  cursor: inherit;
}

.test:hover p {
  background-color: gold !important;
}

.js-has-pseudo [csstools-has-1a-38-2t-37-38-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-13-36-2p-2s-2x-33-13-2l-1m-2u-33-2r-39-37-15-w-34]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) {
    background-color: gold!important
}

.test:has([type='radio']:focus) p {
  background-color: gold !important;
}

Actual CSS

label {
    cursor: inherit
}

.js-has-pseudo [csstools-has-1a-38-2t-37-38-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-13-36-2p-2s-2x-33-13-2l-1m-2u-33-2r-39-37-15-w-34]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist),.test:hover p {
    background-color: gold!important
}

.test:has([type=radio]:focus) p {
    background-color: gold!important
}

Playgound example

No response

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

No

Debug output

Debug output

(!) [plugin postcss] src/index.css: Using features from Stage 2 (default).
- 'custom-selectors' disabled because it lacks the required stage (1 out of 2).
- 'any-link-pseudo-class' setting 'subFeatures: { areaHrefNeedsFixing: true }' due to lack of browser support for area[href] in Edge and IE.
- 'custom-media-queries' enabled for:
    and_chr 138
    and_ff 140
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    firefox 141
    firefox 140
    firefox 128
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
    samsung 28
    samsung 27
- 'image-set-function' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'media-query-ranges' enabled for:
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'media-queries-aspect-ratio-number-values' enabled for:
    chrome 109
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'prefers-color-scheme-query' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'nesting-rules' enabled for:
    chrome 112
    chrome 109
    firefox 115
    ie 11
    ie 10
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 17.1
    safari 16.6
    safari 15.6
- 'any-link-pseudo-class' enabled for:
    ie 11
    ie 10
    op_mini all
- 'case-insensitive-attributes' enabled for:
    ie 11
    ie 10
    op_mini all
- 'focus-visible-pseudo-class' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'focus-within-pseudo-class' enabled for:
    ie 11
    ie 10
    op_mini all
- 'not-pseudo-class' enabled for:
    ie 11
    ie 10
    op_mini all
    op_mob 80
- 'logical-properties-and-values' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'float-clear-logical-values' enabled for:
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'logical-overflow' enabled for:
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
    samsung 28
    samsung 27
- 'logical-overscroll-behavior' enabled for:
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'logical-resize' enabled for:
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'logical-viewport-units' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'dir-pseudo-class' enabled for:
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'all-property' enabled for:
    ie 11
    ie 10
    op_mini all
- 'gradients-interpolation-method' enabled for:
    chrome 109
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'color-mix-variadic-function-arguments' enabled for:
    and_chr 138
    and_ff 140
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    firefox 141
    firefox 140
    firefox 128
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
    samsung 28
    samsung 27
- 'color-mix' enabled for:
    chrome 109
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'relative-color-syntax' enabled for:
    chrome 112
    chrome 109
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
- 'lab-function' enabled for:
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'oklab-function' enabled for:
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 15.6
- 'color-function' enabled for:
    chrome 109
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'hwb-function' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'color-functional-notation' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'rebeccapurple-color' enabled for:
    ie 10
    op_mini all
- 'hexadecimal-alpha-notation' enabled for:
    ie 11
    ie 10
    op_mini all
- 'light-dark-function' enabled for:
    chrome 112
    chrome 109
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    safari 17.1
    safari 16.6
    safari 15.6
- 'double-position-gradients' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'blank-pseudo-class' enabled for:
    and_chr 138
    and_ff 140
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    firefox 141
    firefox 140
    firefox 128
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
    samsung 28
    samsung 27
- 'break-properties' enabled for:
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
- 'font-variant-property' enabled for:
    and_chr 138
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    ie 11
    ie 10
    op_mini all
    op_mob 80
    opera 117
    opera 116
    samsung 28
    samsung 27
- 'is-pseudo-class' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'scope-pseudo-class' enabled for:
    ie 11
    ie 10
    op_mini all
- 'has-pseudo-class' enabled for:
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'gap-properties' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'overflow-property' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'overflow-wrap-property' enabled for:
    ie 11
    ie 10
    op_mini all
- 'place-properties' enabled for:
    ie 11
    ie 10
    op_mini all
- 'system-ui-font-family' enabled for:
    ie 11
    ie 10
    op_mini all
- 'font-format-keywords' enabled for:
    and_ff 140
    firefox 141
    firefox 140
    firefox 128
    firefox 118
    firefox 115
    ie 11
    ie 10
    op_mini all
- 'display-two-values' enabled for:
    chrome 112
    chrome 109
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'content-alt-text' enabled for:
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 17.1
    safari 16.6
    safari 15.6
- 'ic-unit' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'opacity-percentage' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'text-decoration-shorthand' enabled for:
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
- 'unset-value' enabled for:
    ie 11
    ie 10
    op_mini all
- 'random-function' enabled for:
    and_chr 138
    and_ff 140
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    firefox 141
    firefox 140
    firefox 128
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
    samsung 28
    samsung 27
- 'sign-functions' enabled for:
    and_chr 138
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    firefox 115
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    samsung 28
    samsung 27
- 'stepped-value-functions' enabled for:
    chrome 112
    chrome 109
    firefox 115
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
- 'trigonometric-functions' enabled for:
    chrome 109
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'exponential-functions' enabled for:
    chrome 112
    chrome 109
    firefox 115
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'clamp' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'nested-calc' enabled for:
    ie 11
    ie 10
    op_mini all
- 'custom-properties' enabled for:
    ie 11
    ie 10
    op_mini all
- 'cascade-layers' enabled for:
    ie 11
    ie 10
    ios_saf 11.0-11.2
    op_mini all
- 'gamut-mapping' enabled for:
    and_chr 138
    and_ff 140
    android 138
    chrome 139
    chrome 138
    chrome 137
    chrome 136
    chrome 135
    chrome 134
    chrome 133
    chrome 132
    chrome 131
    chrome 130
    chrome 125
    chrome 112
    chrome 109
    edge 138
    edge 137
    firefox 141
    firefox 140
    firefox 128
    firefox 118
    firefox 115
    ie 11
    ie 10
    ios_saf 18.5
    ios_saf 18.4
    ios_saf 18.3
    ios_saf 18.2
    ios_saf 18.1
    ios_saf 18.0
    ios_saf 17.6-17.7
    ios_saf 17.5
    ios_saf 16.6-16.7
    ios_saf 15.6-15.8
    ios_saf 11.0-11.2
    op_mini all
    op_mob 80
    opera 117
    opera 116
    safari 18.5
    safari 18.4
    safari 17.6
    safari 17.1
    safari 16.6
    safari 15.6
    samsung 28
    samsung 27
Enabling the following feature(s):
  all-property
  any-link-pseudo-class
  autoprefixer
  blank-pseudo-class
  break-properties
  cascade-layers
  case-insensitive-attributes
  clamp
  color-function
  color-functional-notation
  color-mix
  color-mix-variadic-function-arguments
  content-alt-text
  custom-media-queries
  custom-properties
  dir-pseudo-class
  display-two-values
  double-position-gradients
  exponential-functions
  float-clear-logical-values
  focus-visible-pseudo-class
  focus-within-pseudo-class
  font-format-keywords
  font-variant-property
  gamut-mapping
  gap-properties
  gradients-interpolation-method
  has-pseudo-class
  hexadecimal-alpha-notation
  hwb-function
  ic-unit
  image-set-function
  is-pseudo-class
  lab-function
  light-dark-function
  logical-overflow
  logical-overscroll-behavior
  logical-properties-and-values
  logical-resize
  logical-viewport-units
  media-queries-aspect-ratio-number-values
  media-query-ranges
  nested-calc
  nesting-rules
  not-pseudo-class
  oklab-function
  opacity-percentage
  overflow-property
  overflow-wrap-property
  place-properties
  prefers-color-scheme-query
  progressive-custom-properties
  random-function
  rebeccapurple-color
  relative-color-syntax
  scope-pseudo-class
  sign-functions
  stepped-value-functions
  system-ui-font-family
  text-decoration-shorthand
  trigonometric-functions
  unset-value
These feature(s) need a browser library to work:
  blank-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser
  focus-visible-pseudo-class: https://github.com/WICG/focus-visible
  focus-within-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser
  has-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser
  prefers-color-scheme-query: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser
/home/juanse/Sync/dev/react/transpiling/bundler/rollup/src/index.css
(!) [plugin postcss] src/main.css:
/home/juanse/Sync/dev/react/transpiling/bundler/rollup/src/main.css
created public in 1.7s

Extra config

No response

What plugin are you experiencing this issue on?

CSS Has Pseudo

Plugin version

7.0.2

What OS are you experiencing this on?

Linux

Node Version

22.18.0

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

Hi @carjuan,

I can't reproduce what you are describing.

This plugin has two parts and there for two transforms.

The source CSS transform can be seen in the playground

label {
  cursor: inherit;
}

.test:hover p {
  background-color: gold !important;
}

.test:has([type='radio']:focus) p {
  background-color: gold !important;
}

Becomes:

label {
  cursor: inherit;
}

.test:hover p {
  background-color: gold !important;
}

.js-has-pseudo [csstools-has-1a-38-2t-37-38-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-13-36-2p-2s-2x-33-13-2l-1m-2u-33-2r-39-37-15-w-34]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) {
  background-color: gold !important;
}

.test:has([type='radio']:focus) p {
  background-color: gold !important;
}

The second part is trickier to debug but:

label {
	cursor: inherit;
}

.test:hover p {
	background-color: gold !important;
}

.js-has-pseudo [csstools-has-1a-38-2t-37-38-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-13-36-2p-2s-2x-33-13-2l-1m-2u-33-2r-39-37-15-w-34]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) {
	background-color: gold !important;
}

.test:has([type='radio']:focus) p {
	background-color: gold !important;
}

Becomes:

label { cursor: inherit; }
.test:hover p { background-color: gold !important; }
.test:has([type="radio"]:focus) p { background-color: gold !important; }

---

As you can see there is nothing that is removing the unrelated rules:

.test:hover p {
  background-color: gold !important;
}

That CSS is always present.

---

Can you create a minimal reproduction in a GitHub repo please?

[romainmenke]

@carjuan I did find that the browser script could remove incorrect rules when there are multiple rules with :has() in a single stylesheet. Your example in this bug report was maybe a bit too simplistic :)

Because I couldn't reproduce the issue from the provided information I am unsure if the bug I fixed was what you encountered.

Can you test the latest version please?