Introduce :user-valid & :user-invalid variants

[MartijnCuppens]

See

• https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid
• https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid

Just landed in Chrome, Firefox & Safari:

• https://caniuse.com/mdn-css_selectors_user-valid
• https://caniuse.com/mdn-css_selectors_user-invalid

[MartijnCuppens]

It looks like the pseudo elements are not yet added to https://github.com/cssnano/cssnano/blob/master/packages/postcss-merge-rules/src/lib/ensureCompatibility.js, because they are part of the Selectors Level 4 spec. Should I unmerge the rules in the test for now or should we wait for this feature to land until support is added in postcss-merge-rules?

[RobinMalfait]

Hey!

You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.

The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase.

I also made sure to add you as a co-author because you still deserve all the credit 💪

[Ionys320]

Hi @RobinMalfait! Is it possible to have it in v3, or it will only be available in v4?

[Kashi-Datum]

Any updates / timeline on this? Looking forward to these inputs!

[jstoparczyk]

Hi @RobinMalfait! Is it possible to have it in v3, or it will only be available in v4?

Yes, you can use arbitrary properties: [&:user-invalid]:

[MartijnCuppens]

(just rebased this PR)

[KieraDOG]

Hi @RobinMalfait! Is it possible to have it in v3, or it will only be available in v4?

Yes, you can use arbitrary properties: [&:user-invalid]:

peer-[&:user-invalid] trying to use with peer to display an error message, but it is not working

       <Input 
          placeholder="Enter staging access token" 
          autoComplete="off" 
          className="peer [&:user-invalid]:border-red-500"
          required 
        />
        <div className="mt-1 text-red-500 invisible peer-[&:user-invalid]:visible">
          The filed is required
        </div>