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

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?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

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',
      }
    }
  },

oluckyman on Oct 15, 2020

you can use local name rule in global

weishiji on Mar 29, 2019