-
-
Notifications
You must be signed in to change notification settings - Fork 400
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
[jss-nested] target a rule from the same sheet when possible #214
Comments
@fgnass has implemented https://www.npmjs.com/package/jss-local-refs |
Cool, this is very similar to what I first had in mind for https://github.com/fgnass/jss-local-refs. One thing that felt not very intuitive from a user's perspective was the fact that Another option I considered was |
yep, we could find rules which refer to other rules, remove them and add them again, this way they will be able to reference rules defined after. Another option for refs would be $button: pro - it is more explicit, less magic, contra - more ugliness |
I still tend to use an unprefixed ref, because we are in a namespaced sheet, which means all keys are just names, they are never selectors. |
The only prob one can get if he has already a button rule and now actually wanted to use button as a selector, same is for .# ... they are all global selectors. |
On the other hand why should someone have a button rule and then to try reference button as a selector. This tends to be already broken ... it should not happen .... |
another option would be this.button |
another option @button |
anothoer option ..button |
Another option &&button ... & means actually "parent", && would mean the rules set, because it is a parent of a rule (see http://stylus-lang.com/docs/selectors.html#parent-reference) |
Ah, that's clever! I was looking for some sort of event to listen to, but this sounds much easier. |
What about |
If we use global() then we don't need any prefixes at all! yay I like it. As a bonus, global selectors become very explicit. The only bad thing is that it is a breaking change. |
So what if we do |
Oh nice we can make it even backwards compatible: if we don't find a rule locally, we can always assume it is a global selector, so peoples code won't break. |
I would prefer to have early errors instead of falling back to global selectors. That's also the reason why I'd prefer |
Maybe instead of errors - warnings? |
This way we can stay backwards compatible and also advocate using explicitly global() |
CSS modules is using :global() ... that would be fine too, for the sake of similarity |
If we implement this local/global feature as separate plugin the jss-nested codebase could stay as it is (no breaking changes there). On the other hand I wouldn't mind a major version upgrade that introduces this new local/global handling and breaks old stuff. |
Can you imagine any other use cases for :global() other than within jss-nested? |
If one needs the entire sheet being global, there is an option |
You're right, most (if not all) use cases should be related to nested selectors. I guess I just like JSS' modularity as it allows for incremental refinements. But I also understand the wish to not have too many plugins. |
We can split it once we see a use case, right now, I can't find any. Also in case you are interested see #241 |
I just tried to add support for the following: {
container: {
'&:hover button': {
}
},
button: {
}
} The problem I have is that when the plugin comes across the nested selector and calls |
Yep, this is exactly what we need also for this issue #180 |
How do you like this: {
container: {
padding: 20,
'&': {
':hover': {
background: 'blue'
},
'global(button)': { // .container-jss-0-0 button
background: 'red'
}
button: { // .container-jss-0-0 .button-jss-0-1
background: 'green'
}
}
},
button: {
}
} |
I still don't really like |
What about the following to get rid of {
container: {
padding: 20,
'&': {
':hover': {
background: 'blue'
},
button: { // .container-jss-0-0 .button-jss-0-1
background: 'green'
}
},
'& .someGlobalClass' { // .container-jss-0-0 .someGlobalClass
}
},
button: {
}
} |
Oh thats actually interesting, it can be even backwards compatible. |
The following would work too. One just has to create new {
container: {
padding: 20,
'&': {
':hover': {
background: 'blue'
},
'.someGlobalClass' { // .container-jss-0-0 .someGlobalClass
}
button: { // .container-jss-0-0 .button-jss-0-1
background: 'green'
},
},
'& button' { // .container-jss-0-0 button
},
},
button: {
}
} |
So basically it can be
|
The only problem in my example is to differentiate a |
Ok considered values will be soon also objects, we need to make a restriction: key should be just |
Now, what if we just leave the way it works right now as it is and just add the single {
container: {
padding: 20,
'&': {
button: { // .container-jss-0-0 .button-jss-0-1
background: 'green'
}
}
},
button: {
...
}
} The rule would be:
|
Seems to me like it would be very easy to implement and fast. No string parsing. Pretty much explicit. No breaking changes. |
May be we should add some variable prefix sign,
{
container: {
padding: 20,
'$button': { // .container-jss-0-0 .button-jss-0-1
background: 'green'
}
},
button: {
},
`$button`: { // will throw `Unexpected $ token` error
}
} |
Mentioned that already too.
Contras:
|
May be we should just change our point of view, I mean that {
container: {
padding: 20,
},
button: {
color: 'red',
'container &': {
color: 'blue'
},
'container div &': {
color: 'blue'
}
}
} But here we can have problems if rule name will be same as {
section: { // .section-jss-0-0
padding: 20,
},
button: { // .button-jss-0-0
color: 'red',
'section &': { // .section-jss-0-0 .button-jss-0-0
color: 'blue'
},
'section div &': { // .section-jss-0-0 div .button-jss-0-0
color: 'blue'
}
}
} You wan't be able to make selector like - |
I think I like that idea. We probably need some sort of naming scheme here and |
I totally agree that $button is clear from syntax perspective, but at the same time it is still a string based way, I feel like using objects and functions is a better way to go for jss. |
Lets use "@button" ... it is basically like $button, but more css like. |
Isn't that a problem? I mean how shall we disambiguate this from |
@kof 👍 it's easy to validate like https://github.com/umidbekkarimov/jss-responsive/blob/master/src/jss-responsive.js#L95 and throw reserved variable name exception. Like in js you can not define variable |
@fgnass I think we need only rules of rule.type === 'regular', right? |
Imagine I created a media object, call my local class "media" and then later on want to reference it in a nested rule. I'd argue that the error message about using a reserved name would be super confusing, highly inconvenient and totally unexpected. If I as developer for example spotted |
@kof yes, I'd say so |
Good point about element query, lets see how it could be implemented in the future to make sure it won't be a problem - #267 |
I extended implementation of jss-local-refs: https://github.com/yury-dymov/jss-local-refs Waiting PRs to be merged
The thing, which bothers me though is that we still have to arrange classes in the certain order:
will work fine
will not work. But after consideration I came to conclusion that it might be not a bug but a feature. In the second example global 'a' class will be used instead of the local one, which on the one hand might solve some issues discussed above but on the other - makes supporting the code harder, which is not a good thing. |
update: jss-refs exists already, I reinvented the wheel :) |
ok @fgnass lets go for $ and finally make the final effort in this long issue! |
@fgnass I had a sleepless night and decided to implement the last suggestion, basically I just ported your https://github.com/fgnass/jss-local-refs. Thanks a lot for helping out! I will close this issue as it is released, please let me know if there are any issues with that. |
the |
@VanthiyaThevan currently the & needs to be first character, but this can be chanchged, because it doesn't allow some other cases. Unrelated issue though. |
Sometimes we need to create a nested selector targeted to a child class from the same sheet, for e.g. when we want to change a style for some inner element.
In this case, button is a global selector scoped to the container selector
Results in something like this:
Now we want to target an element with generated class name:
Now we checked that button is defined on the same sheet, so lets use the generated for it selector.
The text was updated successfully, but these errors were encountered: