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.
@region
and @override
What are 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.