Noteworthy Puppy Movies

    jss-nested

    6.0.1 • Public • Published

    JSS plugin enables support for nested rules

    Gitter

    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

    Install

    npm i jss-nested

    DownloadsWeekly Downloads

    210,945

    Version

    6.0.1

    License

    MIT

    Last publish

    Collaborators

    • kof