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

missing group-focus types #53

Closed
AdrienLemaire opened this issue Sep 14, 2020 · 7 comments
Closed

missing group-focus types #53

AdrienLemaire opened this issue Sep 14, 2020 · 7 comments

Comments

@AdrienLemaire
Copy link

AdrienLemaire commented Sep 14, 2020

module.exports = {
  ...
  variants: {
    visibility: ["responsive", "hover", "focus", "group-hover", "group-focus"],
  }
};

The generated types contain the group-hover types, but not the group-focus ones:

export type TPseudoClasses =
  ...
  | 'group-hover:visible'
  | 'group-hover:invisible'

As per the documentation, group-focus works just like group-hover, so should their types :)

@muhammadsammy
Copy link
Owner

Can't reproduce. It works fine with the same options:

variants: {
  visibility: ["responsive", "hover", "focus", "group-hover", "group-focus"],
}

Screenshot from 2020-09-14 12-03-45

@AdrienLemaire
Copy link
Author

Sorry, I don't know what happened ^^' works fine now, closing 🙇

@AdrienLemaire
Copy link
Author

@muhammadsammy actually I still have an issue. When enabling the group-hover or group-focus variants, we need to add the .group class as well, but it is not added to the types.

https://tailwindcss.com/docs/pseudo-class-variants#group-hover

If you need to style a child element when hovering over a specific parent element, add the .group class to the parent element and add the group-hover: prefix to the utility on the child element.

$ cat src/utilities/tailwind.ts|grep group
  | 'group-hover:visible'
  | 'group-focus:visible'
  | 'group-hover:invisible'
  | 'group-focus:invisible'

@AdrienLemaire
Copy link
Author

@muhammadsammy really sorry ^^ The fix in dbf7f20 doesn't seem correct.

Given conf

    visibility: ["responsive", "hover", "focus", "group-focus"],

I get

$ cat src/utilities/tailwind.ts|grep group
  | 'group'
  | 'group-focus:invisible'

the group-focus:visible utility is missing.

Given conf

    visibility: ["responsive", "hover", "focus", "group-hover", "group-focus"],

I get

cat src/utilities/tailwind.ts|grep group
  | 'group'
  | 'group-focus:visible'
  | 'group-hover:invisible'
  | 'group-focus:invisible'

the group-hover:visible utility is missing.

It looks like the group utility replaces the first generated rule instead of being added.

@muhammadsammy muhammadsammy reopened this Sep 15, 2020
@muhammadsammy
Copy link
Owner

added a fix in 7381d13, v1.8.2

@AdrienLemaire
Copy link
Author

@muhammadsammy thanks for being so fast! LGTM

@muhammadsammy
Copy link
Owner

Glad to help!

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

No branches or pull requests

2 participants