postcss-split-mq

postcss-split-mq

PostCSS plugin to split specific media queries into separate files.

Usage

Assuming a CSS file like this:

/* main.css */

body {
  color: tangerine;
}

@media (min-width: 1024px) {
  body {
    color: pink;
  }
}

You can split it like this:

const postcss = require('postcss');
const splitMq = require('postcss-split-mq');

const CSS = readFile('main.css');

const options = {
  outpath: './',
  files: [
    {
      name: 'wide.css',
      match: /min-width:\s*1024px/
    }
  ]
};

postcss([splitMq(options)])
.process(CSS)
.then(result => {
  // result will be a postcss container with the remaining CSS
  // after striping all media queries that match the `files` option
  writeFile('remaining.css', result.css)
});

And that will give you:

/* remaining.css */

body {
  color: tangerine;
}

and:

/* wide.css */

@media (min-width: 1024px) {
  body {
    color: pink;
  }
}

You can create multiple files with multiple match criteria per file. Media queries are captured for a given file if any of its match expressions are found.

e.g.

options = {
  outpath: './',
  files: [
    {
      name: 'medium.css',
      match: [
        /min-width:\s*(640px|40r?em)/,
        /max-width:\s*(800px|50r?em)/
      ]
    },
    {
      name: 'wide.css',
      match: /min-width:\s*1024px/
    }
  ]
};

This can be improved. Contributions are welcome. Create an issue if you see a problem or to ask a question.

Changelog

1.3.0

• Added:
  • option: files.skip to override matched media queries
• Updated:
  • option: outpath will resolve to process.cwd() if not otherwise specified