jss-plugin-nested

What is jss-plugin-nested?

The jss-plugin-nested package is a plugin for JSS (JavaScript Style Sheets) that allows you to use nested rules in your styles, similar to how you would in Sass or Less. This makes it easier to manage and organize your CSS, especially for complex components.

What are jss-plugin-nested's main functionalities?

Nested Selectors

This feature allows you to nest selectors within a style rule. In this example, the hover state of the button is nested inside the button's main style rule.

{
  "button": {
    "color": "blue",
    "&:hover": {
      "color": "red"
    }
  }
}

Nested Media Queries

This feature allows you to nest media queries within a style rule. In this example, the container's width changes based on the screen size.

{
  "container": {
    "width": "100%",
    "@media (min-width: 600px)": {
      "width": "50%"
    }
  }
}

Nested Pseudo-Classes

This feature allows you to nest pseudo-classes within a style rule. In this example, the input's border color changes when it is focused.

{
  "input": {
    "border": "1px solid black",
    "&:focus": {
      "border-color": "blue"
    }
  }
}

Other packages similar to jss-plugin-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 supports nesting of selectors and media queries, similar to jss-plugin-nested, but it also provides additional features like theming and dynamic styling.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Like jss-plugin-nested, it supports nested selectors and media queries, but it also offers powerful features like theming and server-side rendering.

aphrodite

Aphrodite is a CSS-in-JS library that allows you to write styles in JavaScript. It supports nested selectors and media queries, similar to jss-plugin-nested. However, it focuses more on performance and critical CSS extraction.

README

jss-plugin-nested

JSS plugin that enables support for nested selectors

See our website jss-plugin-nested for more information.

Install

Using npm:

npm install jss-plugin-nested

or using yarn:

yarn add jss-plugin-nested

Changelog

10.1.0 (2020-3-15)

Bug fixes

• [jss] Fix multiple .addRule calls with font-face (1280)
• [jss] Allow a Comment node as insertion point (1284)

Improvements

• [jss-plugin-rule-value-function] Add warning when using a function value inside a function rule (1285)
• [react-jss][ts] Typescript support for createUseStyles theme (1294)
• [jss, react-jss] - getDynamicStyles utility function was originally exposed from jss package, but I don't think it was used externally, so I moved it to react-jss package and made it internal. If you have been using it as public API let me know, we will have to revert the change.
• [examples] Migrate examples to monorepo (1306)

Features

• [jss-plugin-default-unit] Allow options to pass function transforms in (1292)