postcss-reuse
1.0.0 • Public • Published
PostCSS re-use
Install
$ npm install postcss-reuse
Usage
Add postcss-reuse to your list of postcss plugins.
plugins: [
'tailwindcss',
'postcss-reuse',
'postcss-preset-env',
]
Examples
Basic
| Before |
After |
.a {
color: red;
}
.b {
@inline .a;
font-size: 14px;
} |
.a {
color: red;
}
.b {
color: red;
font-size: 14px;
} |
Multiple blocks
| Before |
After |
.a {
color: red;
}
.a, .b {
font-size: 14px
}
.c {
@inline .a;
} |
.a {
color: red;
}
.a, .b {
font-size: 14px
}
.c {
color: red;
font-size: 14px;
} |
Nested
| Before |
After |
.foo + div.a {
color: red;
}
.b {
@inline .a;
font-size: 14px;
} |
.foo + div.a {
color: red;
}
.b {
font-size: 14px;
}
.foo + div.b {
color: red;
} |
Media queries
| Before |
After |
.a {
color: red;
}
@media (min-width: 240px) {
.a {
color: green;
}
}
.b {
@inline .a;
font-size: 14px;
} |
.a {
color: red;
}
@media (min-width: 240px) {
.a {
color: green;
}
}
.b {
color: red;
font-size: 14px;
}
@media (min-width: 240px) {
.b {
color: green;
}
} |
Attributions
Based of Alexandru Kis' PostCSS plugin @SectorLabs/postcss-inline-class.
Package Sidebar
Install
npm i postcss-reuse@1.0.0