Skip to content

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

License

Notifications You must be signed in to change notification settings

sparkbox/postcss-nested

 
 

Repository files navigation

PostCSS Nested Build Status

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

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

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;
}

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.

Sponsored by Evil Martians

Usage

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

See PostCSS docs for examples for your environment.

Options

bubble

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

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%