postcss-inline-media
v1.5.0
Published
Media queries shortcut on PostCSS
Downloads
578
Maintainers
Readme
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.