Postcss-mqwidth-to-class NPM

PostCSS mqwidth-to-class

PostCSS plugin converts min/max-width media queries to classes, useful for clients that do not support media queries e.g. IE8.

/* Input example */
@media (min-width: 768px) and (max-width: 991px) {
    .foo {
        float: left;
    }
}

/* Output example */
.min-width-768px.max-width-991px .foo {
    float: left;
}

postcss([ require('postcss-mqwidth-to-class') ])

See PostCSS docs for examples for your environment.

Only supports px units.
Ignores anything else in the query, e.g. screen, print, orientation.
You'd need JavaScript to add the classes to the <html> or <body> tags. E.g. mqwidth-to-class.js.
For IE8, off the bat you can have the <html> tag via conditional comments.

I used the PostCSS Boilerplate and these two projects as a base:

9 years ago