@jayphen/postcss-nested-stylis-compat

PostCSS Nested

PostCSS plugin to unwrap nested rules like how Stylis does it (for those migrating from Stylis to PostCSS).

This fork currently works identically to the original, with a few small differences.

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
        body.is_dark & {
            color: white;
        }
    }
    img {
        display: block;
    }
}

.title {
  font-size: var(--font);

  @at-root html {
      --font: 16px
    }
  }
}

will be processed to:

.phone_title {
    width: 500px;
}
@media (max-width: 500px) {
    .phone_title {
        width: auto;
    }
}
body.is_dark .phone_title {
    color: white;
}
.phone img {
    display: block;
}

.title {
  font-size: var(--font);
}
html {
  --font: 16px
}

Related plugins:

• Use postcss-current-selector after this plugin if you want to use current selector in properties or variables values.
• Use postcss-nested-ancestors before this plugin if you want to reference any ancestor element directly in your selectors with ^&.

Alternatives:

• See also postcss-nesting, which implements CSSWG draft (requires the & and introduces @nest).
• postcss-nested-props for nested properties like font-size.

Usage

postcss([ require('postcss-nested') ])

See PostCSS docs for examples for your environment.

Options

bubble

By default, plugin will bubble only @media and @supports at-rules. You can add your custom at-rules to this list by bubble option:

postcss([ require('postcss-nested')({ bubble: ['phone'] }) ])

/* input */
a {
  color: white;
  @phone {
    color: black;
  }
}
/* output */
a {
  color: white;
}
@phone {
  a {
    color: black;
  }
}

unwrap

By default, plugin will unwrap only @font-face, @keyframes and @document at-rules. You can add your custom at-rules to this list by unwrap option:

postcss([ require('postcss-nested')({ unwrap: ['phone'] }) ])

/* input */
a {
  color: white;
  @phone {
    color: black;
  }
}
/* output */
a {
  color: white;
}
@phone {
  color: black;
}

preserveEmpty

By default, plugin will strip out any empty selector generated by intermediate nesting levels. You can set preserveEmpty to true to preserve them.

.a {
    .b {
        color: black;
    }
}

Will be compiled to:

.a { }
.a .b {
    color: black;
}

This is especially useful if you want to export the empty classes with postcss-modules.

Differences to postcss-nested

• Nested pseudo-selectors are applied to their parent.

  .one { :hover: { color: red } }

Will be compiled to

  .one:hover { color: red }

This matches the stylis behaviour, instead of the postcss-nested/SASS behaviour, which is to compile to:

  .one :hover { color: red }