Jss: [jss-global][jss-nested] Problem using local references inside globals

[JeffreyATW]

Here is some example JSS:

const styles = {
  large: {
    fontSize: 'large',
  },

  '@global tr:not($large)': {
    fontSize: 'small',
  },
};

This compiles to:

.large-0-5 {
  font-size: large;
}
tr:not($large) {
  font-size: small;
}

But I would expect this to compile to:

.large-0-5 {
  font-size: large;
}
tr:not(.large-0-5) {
  font-size: small;
}

Any advice?

[kof]

jss-global doesn't have interpolations right now. You can achieve similar with jss-nested

[JeffreyATW]

How do I get the desired code with just jss-nested without being able to use globals?

[kof]

Inside of a nested query, selectors are not autogenerated. '& .something' => .parent .something

[JeffreyATW]

But what if I don't want the parent to be autogenerated? Note that I'm trying to select tr:not($large). How do I select a top-level tr without using globals, and without nesting it?

[kof]

In this case you have to add the parent a generated class name.

[kof]

Might be a potentially good enhancement for jss-global.

[JeffreyATW]

Another example is when using Modernizr. I'm detecting whether touch events are available, so I'm adding a no-touchevents class to the html tag. I need to use @global .no-touchevents to select it, but that means I can't use a local reference to any rules inside the same stylesheet, e.g.:

{
  root: {...},
  `@global .no-touchevents $root`: {...},
}

This won't work as expected.

[JeffreyATW]

(The good news is since this is JS, I can just use Modernizr.touchevents and conditionally add this rule. But this isn't a very scalable solution.)

[kof]

Why is that not scalable?

[kof]

The beauty of it is that you don't have to rely on a global class name attached to html tag. Components should not touch any elements they don't control. Those were old technics where you had no much choice.

[JeffreyATW]

But components can be affected by their parents. How would one apply styling to a component based on what surrounds it? Especially if what surrounds it is difficult to determine using JavaScript?

Also, the above code isn't touching an element it can't control. It's styling itself (see $root) based on the fact that it's surrounded by an element with a no-touchevents class.

[kof]

The key difference is that they are affected explicitly. For e.g. over props in React. Parents have to tell the component how to behave and component has to react accordingly the inputs over its public interface.

The difference is really explicit public interfaces and unidirectional control flow. But now we are far outside of scope of this issue.

[fxalvarezd]

@JeffreyATW Where you able to solve this. I'm looking at something like Modernizr too...
Thx!

[JeffreyATW]

Sorry, I don't remember if I solved it or not. I don't have access to the code I was working on anymore. I ended up using CSS modules for future projects.

[fxalvarezd]

thx for the reply @JeffreyATW

[weishiji]

you can use local name rule in global

[avnerI]

Hey, I was saw this issue and managed to solve it in a way that wasn’t here.

To be able to refer to a generated and non generated classes:

```
const jssStyle = {
showOptions: {
display: 'none'
},
'@global': {
'.parentWithNoneGeneratedClassName': {
'&:hover $showOptions':
{
display: 'block'
}
},
}
}

Hope that will help those who see this issue :)

[oluckyman]

I do exactly as @avnerI , but it does not work for me:

  settings: {
    display: 'none',
  },
  '@global': {
    '.rs-dropdown-item': {
      '&:hover': { // this block does work
        fontWeight: 'bold',
        border: '1px solid plum',
      },
      '&:hover $settings': { // this does not, and it does not exist in the generated CSS
        display: 'block',
      }
    }
  },