Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(preset-mini): pseudo-class function for custom arguments #2694

Merged
merged 11 commits into from Jun 4, 2023

Conversation

enpitsuLin
Copy link
Contributor

@enpitsuLin enpitsuLin commented Jun 1, 2023

Add has-*,group-has-*, and peer-has-* support for the :has() pseudo-class

This PR implements both :not()/:is()/:where()/:has() pseudo-class function and its parent variant with custom arguments.

Usage

Only pseudo-class

<div class="has-[[data-orange]]:c-orange">
  <div data-orange/>
<div>

<!-- Ouput -->
<style>
  .has-\[data-orange\]\:c-orange:has([data-orange]) {
    --un-text-opacity: 1;
    color: rgba(251, 146, 60, var(--un-text-opacity));
  }
</style>

/w parent variant

Work with both .group/.parent/.peer/.previous

<div class="group">
  <div class="group-has-[[data-orange]]:c-orange"><div>
  <div data-orange/>
</div>

<!-- Ouput -->
<style>
  .group:has([data-orange]) .group-has-\[\[data-orange\]\]\:c-orange {
    --un-text-opacity: 1;
    color: rgba(251, 146, 60, var(--un-text-opacity));
  }
</style>

@enpitsuLin enpitsuLin requested a review from antfu as a code owner June 1, 2023 03:28
@netlify
Copy link

netlify bot commented Jun 1, 2023

Deploy Preview for unocss ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit a03188e
🔍 Latest deploy log https://app.netlify.com/sites/unocss/deploys/647aca604203e900081a70cc
😎 Deploy Preview https://deploy-preview-2694--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

matcher: reset,
handle: (input, next) => next({
...input,
selector: `.group:has(${bracketValue}) ${input.selector || ''}`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have an option to toggle .group style:

taggedPseudoClassMatcher('group', attributify ? '[group=""]' : '.group', ' '),

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have done this and moved to the preset-mini package, had to add some code because the previous implementation might work not perfectly with custom arguments (and I'm kinda confused with it).

And implement both four pseudo-class functions with it (so change the pr title

matcher: reset,
handle: (input, next) => next({
...input,
selector: `.peer:has(${bracketValue}) ~ ${input.selector || ''}`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for .peer

@enpitsuLin enpitsuLin changed the title feat: add variants for :has(...) pseudo-class feat(preset-mini): pseudo-class function for custom arguments Jun 3, 2023
`${parent}${escapeSelector(label)}${pseudo}`,
]
}

return {
name: `pseudo:${tag}`,
match(input, ctx) {
if (!(splitRE && pseudoRE && pseudoColonRE)) {
splitRE = new RegExp(`(?:${ctx.generator.config.separators.join('|')})`)
pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.join('|')})`)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

confused me on this, it seems can implement custom arguments at the beginning, but didn't

don't know if there has some edge case that I just add code

@antfu antfu merged commit db339c3 into unocss:main Jun 4, 2023
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants