PostCSS Regions

PostCSS plugin that provides ability to define blocks of CSS as regions and override them..

DISCLAIMER: postcss-regions is admittedly probably more of a niche plugin.

Backstory

The company I work for has a relatively complex, variable-driven SASS framework that we've developed in house. The variables get us a good bit of the way a lot of times, but some of the designs we've gotten recently have required quite a bit of manual overrides (using more specific styles and !important flags in partials included after the base of the framework).

This isn't a problem, per se, but it causes a lot of extra CSS (the CSS generated by the base of the framework, followed by the CSS we write to override the default functionality of the base). Often times, we find ourselves wishing we could just no-op an entire section and just re-style it from scratch. This plugin gives you that ability.

What are @region and @override

postcss-regions adds two new at-rules: @region and @override.

@region

The @region at-rule allows you to define replaceble chunks of CSS:

@region foo {
    .foo {
        color: #fff;
    }
}

They can be used at any level, and can be nested (you're probably going to want postcss-nested though...). The region names are insignificant:

@region bar {
    .bar {
        color: #000;
        
        @region this-name-does-not-matter {
            span {
                font-family: Arial, sans-serif;
            }
        }
    }
}

During processing the @region at-rules are removed and their contained CSS is all that remains:

.foo {
    color: #fff;
}
 
.bar {
    color: #000;
 
    span {
        font-family: Arial, sans-serif;
    }
}

@override

The @override at-rule does exactly what you can probably imagine — it overrides a region with the same name. Normally, you would write something like this:

.foo {
    font-family: Arial, sans-serif;
    color: #f00 !important;
}

And assuming you're importing your base CSS, and then your CSS overrides, your output would look like this:

.foo {
    color: #fff;
}
 
.bar {
    color: #000;
 
    span {
        font-family: Arial, sans-serif;
    }
}
 
.foo {
    font-family: Arial, sans-serif;
    color: #f00 !important;
}

Instead, we can use @override for @region foo:

@override foo {
    .foo {
        font-family: Arial, sans-serif;
        color: #f00;
    }
}

Which would give us this instead:

.foo {
    font-family: Arial, sans-serif;
    color: #f00;
}
 
.bar {
    color: #000;
 
    span {
        font-family: Arial, sans-serif;
    }
}

Much cleaner. As of right now, @override can't be expected to work like you might think when nested. For example, let's say we nested that @override foo inside of an <article> tag like so:

article {
    @override foo {
    	.foo {
    		font-family: Arial, sans-serif;
    		color: #f00;
    	}
    }
}

The @override would be proccessed out, and the article rule would become a rule with no style declarations, and you would end up with something like this:

article {
}
 
.foo {
    font-family: Arial, sans-serif;
    color: #f00;
}
 
.bar {
    color: #000;
 
    span {
        font-family: Arial, sans-serif;
    }
}

Usage

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

See PostCSS docs for examples for your environment.