group-css-supports
CSS postprocessing: group supports content. Useful for postprocessing preprocessed CSS files.
What is it?
You have input.css (take note on similar media query):
@supports (display: grid) {
.grid__cell--align-top {
align-self: start;
}
}
.grid__cell--align-bottom {
align-self: flex-end;
}
@supports (display: grid) {
.grid__cell--align-bottom {
align-self: end;
}
}
@media (min-width: 840px) {
@supports (display: grid) {
.grid__inner {
display: grid;
}
}
.grid__cell {
box-sizing: border-box;
}
@supports (display: grid) {
.grid__cell {
grid-column-end: span 4;
}
}
}Run this utility:
group-css-supports input.css output.css
The result is output.css:
.grid__cell--align-bottom {
align-self: flex-end;
}
@supports (display: grid) {
.grid__cell--align-top {
align-self: start;
}
.grid__cell--align-bottom {
align-self: end;
}
}
@media (min-width: 840px) {
.grid__cell {
box-sizing: border-box;
}
@supports (display: grid) {
.grid__inner {
display: grid;
}
.grid__cell {
grid-column-end: span 4;
}
}
}Installing
# for project
$ npm i -S group-css-supports
# or global
$ npm i -g group-css-supportsRecommendations
- Use
group-css-supportspreprocessor aftergroup-css-media-queriespreprocessor (see: GitHub or NPM, author Ivan Kravchenko) - Version for gulp: GitHub or NPM
Changelog
- 1.0.0 – initial working release
