-
Notifications
You must be signed in to change notification settings - Fork 264
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
the problem with the priority of CSS selector #424
Comments
Good point. The specificity:
When scoped instead:
I guess the only way to fix this is to balance the specificity when we add the scoped classes. In this case:
Do you have better ideas on how we could fix this? |
Maybe we should prefix only first token in selectors. This will round specificity for elements and pseudo-elements with other 🤔
|
the styles for those unscoped selectors would leak into the descendants |
Yeah, but this is the price for using nested tag styles. P.S. Styling elements with tags is usually an exceptional or bad idea. |
If we had to break something then I'd rather rewrite selectors to have all the same specificity e.g.: div > div > span -> .div > .div > .span
.clickTest -> .clickTest And state that in styled-jsx types have all the same specificity. |
just add a scoped class. first or last one.
When scoped instead:
|
@blueshw actually that is a great idea. The only adjustment to it would be that we only scope the last selector (not the first):
I need to verify it though to make sure that this couldn't lead to conflicts or unwanted results. |
Opened an issue on Stylis thysultan/stylis#101 |
for the record we realized that we also need an upper boundary thysultan/stylis#101 (comment) |
@blueshw's suggestion would actually be really great, because right now styled-jsx is kind of clunky when it comes to styling third-party components without having to sprinkle
as it would get transformed to
with styles like
The third-party component styling situation would be so much better with a feature like this. 2-birds-1-stone kind of situation. |
@merrywhether this issue is not about making changes to
|
True enough, was just pointing out the similarity in the use-cases. OP could've used It seems like it'd be weird to have to use |
Is this still an issue? I'm seeing this when try to move my styles to a separate JS file and try to import them. |
What is the current behavior?
I'm using
styled-jsx
withnextjs
.but, I think the priority of CSS selector is a something wrong. it's expected that color of
click
text is blue. because the priority of class is higher than tags.https://gist.github.com/mjj2000/5873872
What is the expected behavior?
but,
click
text rendered color red.div > div > span
selector must not complie to likediv.jsx-1217126016>div.jsx-1217126016>span.jsx-1217126016
. because selector like[tag].[classname]
is higher than just.[classname]
selector.Environment (include versions)
The text was updated successfully, but these errors were encountered: