UNPKG

postcss-remove-media-query-ranges

Version:

Removes all mediaqueries that don't match a given range

113 lines (84 loc) 2.02 kB
# Remove-media-query-ranges <img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS"> Removes media queries from CSS that don't match a give range. ## Usage Add [postcss-remove-media-query-ranges] to your build tool: ```bash npm install postcss-remove-media-query-ranges --save-dev ``` #### Node ```js require('postcss-remove-media-query-ranges')({ /* options */ }).process(YOUR_CSS); ``` #### PostCSS Add [PostCSS] to your build tool: ```bash npm install postcss --save-dev ``` Load [postcss-remove-media-query-ranges] as a PostCSS plugin: ```js postcss([ require('postcss-remove-media-query-ranges')({ /* options */ }) ]); ``` #### Gulp Add [Gulp PostCSS] to your build tool: ```bash npm install gulp-postcss --save-dev ``` Enable [postcss-remove-media-query-ranges] within your Gulpfile: ```js var postcss = require('gulp-postcss'); gulp.task('css', function () { return gulp.src('./css/src/*.css').pipe( postcss([ require('postcss-remove-media-query-ranges')({ /* options */ }) ]) ).pipe( gulp.dest('./css') ); }); ``` #### Grunt Add [Grunt PostCSS] to your build tool: ```bash npm install grunt-postcss --save-dev ``` Enable [postcss-remove-media-query-ranges] within your Gruntfile: ```js grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { processors: [ require('postcss-remove-media-query-ranges')({ /* options */ }) ] }, dist: { src: 'css/*.css' } } }); ``` ## Options You can define your own viewport range. ```js require('postcss-remove-media-query-ranges')({ max: 767, removeMax: true }) ``` ```js require('postcss-remove-media-query-ranges')({ min: 768, removeMin: true }) ``` ```js require('postcss-remove-media-query-ranges')({ max: 1199, min: 768, removeMin: true, removeMax: true }) ```