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.

Use & to reference selector of the parent rule.

const styles = {
  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'
    }
  }
}

Compiles to:

.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 styles = {
  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'
  }
}

Compiles to:

.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 styles = {
  button: {
    color: 'red',
    '@media (min-width: 1024px)': {
      width: 200
    }
  }
}

Compiles to:

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

Deep nesting

const styles = {
  button: {
    '&$warn': {
      color: 'red',
      '&:hover, &:focus': {
        color: 'white',
        background: 'red'
      }
    }
  },
  warn: {}
}

Compiles to:

.button-274964227.warn-2315792072 {
  color: red;
}
.button-274964227.warn-2315792072:hover, .button-274964227.warn-2315792072:focus {
  color: white;
  background: red;
}

Demo

Simple

Issues

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

Run tests

npm i
npm run test

License

MIT