postcss-inline-media

A PostCSS plugin that allows you to write media queries properties on the same line.

.title {
  font-size: 20px @1200 18px @480 16px;
}

Installation

npm install postcss-inline-media

Usage

// PostCSS plugins
postcss([
  require('postcss-inline-media'),
]);

Check out PostCSS docs for the complete installation.

Example

You can inline media queries just by writing its condition next to an @ symbol.

If you only write a number after the @, it will be read as a max-width value in pixels, you can change this shorthand with the shorthand and shorthandUnit option of this plugin, e.g.:

require('postcss-inline-media')({
  shorthand: 'min-width',
  shorthandUnit: 'rem',
})

You can use the shorthandValueAddition to modify the shorthand media queries number values with a relative number to addition to it, e.g.:

require('postcss-inline-media')({
  shorthandValueAddition: -1',
})

This file:

.btn {
  margin: 20px 10px @(print) 10px 5px @600 5px 0;
}

will output:

.btn {
  margin: 20px 10px;
}
@media (print) {
  .btn {
    margin: 10px 5px;
  }
}
@media (max-width: 600px) {
  .btn {
    margin: 5px 0;
  }
}

Media queries variables

You can use postcss-simple-vars as media queries shortcut, put the postcss-simple-vars plugin after postcss-inline-media.

$md: (max-width: 900px);
.btn {
  padding: 20px @md 10px;
}

will output:

.btn {
  padding: 20px;
}
@media (max-width: 900px) {
  .btn {
    padding: 10px;
  }
}

Nested conditions

You can nest media queries in parentheses, but you can't set multiples nesting parentheses on the same CSS property.

div {
  margin: 50px (30px @(print) 20px @(max-width: 800px) 10px) 5px 5px;
}

will output:

div {
  margin: 50px 30px 5px 5px;
}
@media print {
  div {
    margin: 50px 20px 5px 5px;
  }
}
@media (max-width: 800px) {
  div {
    margin: 50px 10px 5px 5px;
  }
}

postcss-media-minmax

This plugin is compatible with postcss-media-minmax, put the postcss-media-minmax plugin after postcss-inline-media.

.btn {
  padding: 20px @(width <= 500px) 10px;
}

postcss-custom-media

You can also use postcss-custom-media, put the postcss-custom-media plugin after postcss-inline-media.

@custom-media --small-viewport (max-width: 30em);
.btn {
  padding: 20px @(--small-viewport) 10px;
}

Related

• postcss - Transforming styles with JS plugins
• postcss-simple-vars - PostCSS plugin for Sass-like variables
• postcss-media-minmax - Writing simple and graceful Media Queries!
• postcss-custom-media - PostCSS plugin to transform
• ava-postcss-tester - Simply test your PostCSS plugin with AVA

License

This project is licensed under the MIT license.