postcss-unwrap-at-media

PostCSS Unwrap @media

PostCSS plugin to unwrap @media rules to make styles IE8 (and older) friendly.

/* Input example */
.block {
  width: 100%;
}
@media (min-width: 720px) {
  .block {
    float: left;
    width: 25%;
  }
}

/* Output example */
.block {
  width: 100%;
}
.block {
  float: left;
  width: 25%;
}

Usage

Basic usage:

postcss([ require('postcss-unwrap-at-media') ])

Here is an example of Gulpfile which create two versions of styles:

var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var rename = require('gulp-rename');
var unwrapAtMedia = require('postcss-unwrap-at-media');
 
gulp.task('default', function () {
  return gulp.src('./src/**/*.less')
    .pipe(less())
    .pipe(gulp.dest('./dist/'))
    .pipe(postcss([ unwrapAtMedia ]))
    .pipe(rename({ suffix: '.ie8' }))
    .pipe(gulp.dest('./dist/'));
});

See PostCSS docs for examples for your environment.

Configuration

You can provide a list of strings or functions to match unwanted @-rules.

postcss([ unwrapAtMedia({ disallow: 'print' })])

postcss([ unwrapAtMedia({ disallow: ['print', 'screen'] })])

postcss([ unwrapAtMedia({ disallow: [
    'print',
    atRule => /min-width: 720px/.test(atRule.params)
] })])