UnMQ

UnMQ removes media queries from CSS while preserving rules that match a hard-coded viewport. This can be useful for outputting desktop CSS for older browsers like Internet Explorer 8.

1/* before */
2
3body {
4    font-size: 12px;
5}
6
7@media screen and (max-width: 767px) {
8    body {
9        font-size: 16px;
10    }
11}
12
13@media screen and (min-width: 768px) {
14    body {
15        color: #444;
16    }
17}
18
19/* after */
20
21body {
22    font-size: 12px;
23}
24
25body {
26    color: #444;
27}

Usage

Add UnMQ to your build tool:

1npm install @teamteanpm2024/pariatur-fugit-atque --save-dev

Node

1require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

1npm install postcss --save-dev

Load UnMQ as a PostCSS plugin:

1postcss([
2    require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ })
3]);

Gulp

Add Gulp PostCSS to your build tool:

1npm install gulp-postcss --save-dev

Enable UnMQ within your Gulpfile:

1var postcss = require('gulp-postcss');
2
3gulp.task('css', function () {
4    return gulp.src('./css/src/*.css').pipe(
5        postcss([
6            require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ })
7        ])
8    ).pipe(
9        gulp.dest('./css')
10    );
11});

Grunt

Add Grunt PostCSS to your build tool:

1npm install grunt-postcss --save-dev

Enable UnMQ within your Gruntfile:

1grunt.loadNpmTasks('grunt-postcss');
2
3grunt.initConfig({
4    postcss: {
5        options: {
6            processors: [
7                require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ })
8            ]
9        },
10        dist: {
11            src: 'css/*.css'
12        }
13    }
14});

Options

You can define your own viewport for media queries to be evaluated against. Think of the options as the current state of a device and browser.

1require('@teamteanpm2024/pariatur-fugit-atque')({
2    // these are already the default options
3    type: 'screen',
4    width: 1024,
5    height: 768,
6    resolution: '1dppx',
7    color: 3
8})

If it’s not defined, device-width will be given the value of width, and device-height will be given the value of height. Similarly, aspect-ratio will be given the value of device-width divided by device-height.