Releases: dimitrinicolas/postcss-inline-media
1.4.0 Added shorthandValueAddition option
Added the shorthandValueAddition
option, regarding issue #3.
1.3.0 Added source for new nodes
Added source for new nodes to generate an accurate source map.
1.2.1 Improved nested rules management
Simpler and better management of nested rules, now works with pseudo elements and other unknown rule selector.
1.2.0 Packing media queries together, respecting CSS priority order
Now packing together same media queries and same selectors, respecting css
priority order.
Now supporting nested rules.
1.1.2 Updated PostCSS to v7
Removed the useless dependency glob
and linted code.
1.1.1 Fixes an issue with nested conditions
Fixes an issue when having node functions after a nested condition.
1.1.0 Shorthand options and other plugins compatibility
Welcome Mobile-first developers!
You can now give to postcss-inline-media
the options shorthand
and shorthandUnit
. They are by default "max-width"
and "px"
, eg:
postcss([
require('postcss-inline-media')({
shorthand: 'min-width'
})
])
div {
margin: 10px @600 20px;
}
will output
.btn {
margin: 10px;
}
@media (min-width: 600px) {
.btn {
margin: 20px;
}
}
Welcome other plugins!
You can now use postcss-media-minmax and postcss-custom-media with postcss-inline-media
.
Be sure to include them after postcss-inline-media
.
1.0.2 Updated dependencies
Updated dependencies and added Travis CI
1.0.1 Nested conditions
You can now 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;
}
}
1.0.0 max-width shorthand
Now you can use @600
as a shortcut for @(max-width: 600px)