postcss/postcss-nested

Name: postcss-nested

Owner: PostCSS

Description: PostCSS plugin to unwrap nested rules like how Sass does it.

Created: 2014-11-07 23:14:54.0

Updated: 2018-01-18 19:32:40.0

Pushed: 2017-12-11 05:11:13.0

Homepage:

Size: 159

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

PostCSS Nested

<img align=“right” width=“135” height=“95”

 title="Philosopher?s stone, logo of PostCSS"
 src="http://postcss.github.io/postcss/logo-leftp.svg">

PostCSS plugin to unwrap nested rules like how Sass does it.

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

will be processed to:

ne_title {
width: 500px;

ia (max-width: 500px) {
.phone_title {
    width: auto;
}

.is_dark .phone_title {
color: white;

ne img {
display: block;

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 ^&.

See also postcss-nesting, which implements Tab Atkin's proposed syntax (requires the & and introduces @nest).

There is also postcss-nested-props for nested properties like font-size.

Usage

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

See PostCSS docs for examples for your environment.

Options

bubble

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

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

preserveEmpty

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

.b {
    color: black;
}

Will be compiled to:

 }
b {
color: black;

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