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>

[philipp-spiess]

@MartijnCuppens Thank you for the PR! As you might have noticed from the other PRs we're only now starting to go through open PRs and features that haven't made the v4 cut. These new variants look great and we'll land them behind a feature flag for now. Our plan is to release them with 4.1 including updated docs but the feature will also be available right away in the insiders builds.

Thank you for your patience here and sorry again for not being very responsive in the past.

[thecrypticace]

ahhh smart 👍