jss-nested

What is jss-nested?

The jss-nested package is a plugin for JSS (JavaScript Style Sheets) that allows you to use nested selectors in your styles. This makes it easier to write and manage complex styles by mimicking the nesting capabilities found in preprocessors like Sass and Less.

What are jss-nested's main functionalities?

Nested Selectors

This feature allows you to nest selectors within a style rule, making it easier to manage styles that depend on parent elements or states like hover.

const styles = {
  button: {
    '&:hover': {
      backgroundColor: 'blue'
    },
    '& .icon': {
      color: 'red'
    }
  }
};

Media Queries

You can nest media queries within your style rules, allowing for responsive design directly within your JSS styles.

const styles = {
  container: {
    width: '100%',
    '@media (min-width: 600px)': {
      width: '50%'
    }
  }
};

Nested Conditional Styles

This feature allows you to apply different styles based on class names or other conditions, making it easier to manage variations of a component.

const styles = {
  button: {
    color: 'black',
    '&.primary': {
      color: 'blue'
    },
    '&.secondary': {
      color: 'green'
    }
  }
};

Other packages similar to jss-nested

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components. Unlike jss-nested, styled-components is more focused on React and offers a more integrated approach to styling components.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Emotion also supports nested selectors and media queries, similar to jss-nested, but it offers a broader range of features and better performance optimizations.

aphrodite

Aphrodite is a CSS-in-JS library that allows you to write styles in JavaScript and apply them to your components. It supports media queries and pseudo-classes, similar to jss-nested, but it focuses more on performance and critical CSS extraction.

README

JSS plugin enables support for nested rules

Make sure you read how to use plugins in general.

Demo - JSS 

Use & to reference selector of the parent rule.

const sheet = jss.createStyleSheet({
  container: {
    padding: 20,
    '&:hover': {
      background: 'blue'
    },
    // Add a global .clear class to the container.
    '&.clear': {
      clear: 'both'
    },
    // Reference a global .button scoped to the container.
    '& .button': {
      background: 'red'
    },
    // Use multiple container refs in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
})

.container-3775999496 {
  padding: 20px;
}
.container-3775999496:hover {
  background: blue;
}
.container-3775999496.clear {
  clear: both;
}
.container-3775999496 .button {
  background: red;
}
.container-3775999496.selected, .container-3775999496.active {
  border: 1px solid red;
}

Use $ruleName to reference a local rule within the same style sheet.

const sheet = jss.createStyleSheet({
  container: {
    // Reference the local rule "button".
    '& $button': {
      padding: '10px'
    },
    // Multiple local refs in one rule.
    '&:hover $button, &:active $button': {
      color: 'red',
    },
    '&:focus $button': {
      color: 'blue'
    }
  },
  button: {
    color: 'grey'
  }
})

.button-3940538223 {
  color: grey;
}
.container-2645419599 .button-3940538223 {
  padding: 10px;
}
.container-2645419599:hover .button-3940538223, .container-2645419599:active .button-3940538223 {
  color: red;
}
.container-2645419599:focus .button-3940538223 {
  color: blue;
}

Use at-rules inside of regular rules.

const sheet = jss.createStyleSheet({
  button: {
    color: 'red',
    '@media (min-width: 1024px)': {
      width: 200
    }
  }
})

.button-2683044438 {
  color: red;
}
@media (min-width: 1024px) {
  .button-2683044438 {
    width: 200px;
  }
}

Deep nesting

Deep nesting is not supported for multiple reasons:

1. More than 2 levels of indentation lead to less readability from our experience.
2. Components should never be big and so there should be no need for deep nesting.
3. Even if they are big, deep nesting shouldn't be needed. Class names can be switched on nodes for different states.

If you can provide a real life example where you really need deep nesting - we would love to know it.

Issues

File a bug against cssinjs/jss prefixed with [jss-nested].

Run tests

npm i
npm run test

License

MIT