postcss-is-pseudo-class: Complex selectors in ':global :is(...)' can not be transformed to an equivalent selector without ':is()'

[simPod]

I'm getting a lot of warnings from postcss of graphiql/graphiql.css

(794:1) postcss-is-pseudo-class: Complex selectors in ':global :is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) code, :global :is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) pre' can not be transformed to an equivalent selector without ':is()'.

(v2)

[thomasheyenbrock]

Hey @simPod 👋 can you give more context here about your setup and when you are seeing these warnings?

[simPod]

I'm using webpack. Followed readme

import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
import React from 'react';
import ReactDOM from 'react-dom';

import 'graphiql/graphiql.css';

const fetcher = createGraphiQLFetcher({
  url: 'https://my.backend/graphql',
});

ReactDOM.render(<GraphiQL fetcher={fetcher} />, document.body);

but all my css is post processed using postcss:

{ loader: 'postcss-loader', options: postcssConfig }

const postcssConfig = {
  postcssOptions: { plugins: ['postcss-preset-env'] },
  sourceMap: true,
};

so I'm seeing it during build.

[jonathanawesome]

@simPod doing some pruning...are you still having issues with your setup?

[simPod]

Yes, using 2.1.0

[thomasheyenbrock]

@simPod I tried to reproduce it in the webpack example of our repo, but didn't manage to with the PostCSS config you posted. Can you provide us with a running reproduction (a repo that we can clone, StackBlitz, CodeSandbox, etc) so that we can further look into this?

[simPod]

@thomasheyenbrock there you go https://github.com/simPod/graphiql-repro/actions/runs/3668664046/jobs/6201950475#step:5:62

[arthurthefourth]

Having the same issue. Here's a minimal repo that gives me dozens of these warnings when I run yarn build. https://github.com/arthurthefourth/pseudo-class-test. I'm no Webpack expert, so it's possible I've got something configured wrong, but I tried to set it up as simply as possible.

Thanks for taking a look!

[arthurthefourth]

If it's helpful, I believe what's happening here is that postcss-preset-env is just unable to polyfill certain types of complex selectors with certain pseudo-classes, which GraphiQL's CSS uses.

By default, postcss-preset-env tries to support features that are Stage 2 and below (which includes is-pseudo-class), and uses the Browserslist defaults to determine whether a feature needs to be polyfilled.

The default browsers almost entirely includes browsers that support is-pseudo-class, except for Opera Mini.

So really this is a bug in Opera Mini. 😉

[simPod]

I don't see the issue on v2.4.0

[dimaMachina]

@simPod I will close since problem was resolved

[simPod]

Not sure if this #2722 (comment) was true since I can see those warnings on latest.

But I'm using webpack.ignoreWarnings to suppress those.

[dimaslanjaka]

same here when using flowbite and tailwind in webpack

[sbaechler]

It looks like this is a problem with postcss-preset-env. Adding

"not dead",
"not op_mini all"

to my browserslist config solved it for me.

[dimaMachina]

Fixed by upgrading Vite to v6 and using Lightningcss instead Postcss, check out the migration guide for more info.