Releases: postcss/autoprefixer
2.1.1
2.1 “Eleftheria i thanatos”
2.0.2
2.0.1
2.0 “Hongik Ingan”
This version based on PostCSS 1.0, supports @supports
and enable visual cascade by default.
PostCSS 1.0
New PostCSS release has a lot of improvements, but source map API update is most important for Autoprefixer’s users.
@lydell suggested great plan to clean up options. Now all map options will be inside map
object.
inlineMap: true
was renamed tomap: { inline: true }
.mapAnnotation: false
was renamed tomap: { annotation: false }
.- Previous source map should be set to separated option
map: { prev: prevMap }
instead of oldmap: prevMap
.
There is map: 'inline'
shortcut if you want to set only map: { inline: true }
. Old options are deprecated and will print warnings.
Also there is two API improvements for plugin’s popular needs:
- Map can contain origin CSS source, if you set
map: { sourcesContent: true }
option. - You can change result map path by
map: { annotation: '../maps/app.css.map' }
option. Note that path inannotation
must be relative to output CSS file.
Property result.map
will contains SourceMapGenerator
object (from Mozilla’s source-map) instead of string. It will allow to change something in generated map:
var result = autoprefixer.process(css, { map: true });
result.map.applySourceMap(otherMap, 'undetected.css');
console.log('map: ' + result.map) // SourceMapGenerator has toString() method,
// so old code should work
result.map.toJSON().file // But also you can access to generated map properties
Check out all changes in PostCSS docs.
Visual Cascade
By idea from @paulirish, Autoprefixer from 1.1 version has option for prefixes cascade. But this feature was disabled by default, because old Autoprefixer can’t restore own cascade, when it removes prefixes.
New Autoprefixer can restore prefixes cascade, when it remove unnecessary prefixes. So, now we can enable visual cascade by default.
a {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px
}
b {
user-select: none
}
will be processed to:
a {
border-radius: 4px;
}
b {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
Cascade will be used, only if you process uncompressed CSS. Use cascade: false
option to disable cascade, if you don’t like it.
@supports
At-rule
CSS 3 added new @supports at-rule to use some styles, only if browser supports properties and values in at-rule conditions.
For example, we can set some styles only for browsers, which support fit-content
width:
.menu {
width: 400px
}
@supports (width: fit-content) {
/* content will be used, only if browser supports fit-content */
.menu {
width: fit-content
}
}
But Chrome doesn’t know fit-content
, it knows only -webkit-fit-content
. So we need to use prefixed properties and values in @support
.
@callumacrae suggested this feature and explained how it should works. And now Autoprefixer 2.0 supports this at-rule and adds prefixes inside it conditions:
@supports ((width: -webkit-fit-content) or (width: -moz-fit-content) or (width: fit-content)) {
/* content will be used, only if browser supports fit-content */
.menu {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
}
Other Changes
- Autoprefixer now supports all browsers from Can I Use:
ie_mob
,and_chr
,and_ff
,op_mob
andop_mini
. - Autoprefixer is written on CoffeeScript, so you wasn’t be able to use latest unreleased versions from GitHub. Now code contains special hack and you can use latest Autoprefixer by
"autoprefixer": "ai/autoprefixer"
in your npm’spackage.json
. - Binary now has
--no-cascade
,--annotation
and--sources-content
options and deprecates-c
and--cascade
.
1.3.1
1.3 “Tenka Fubu”
1.2 “Meiji”
Autoprefixer uses Can I Use data. Previous versions contain Can I Use dump inside npm package and I had special script to update this data from Can I Use repo. I manually run this scripts every day. It was a hack, not a good solution.
Few month ago @Fyrd started to publish official caniuse-db npm package. Autoprefixer 1.2 start to use this official data instead of local copy.
This changes made Autoprefixer’s maintaining much easier, but also it gives a few benefits to end-users:
- Autoprefixer stops to use strange
1.1.20140605
versions with dump date in minor part. Now it will be normal versions like1.2.0
. - You can update Can I Use data separetly from Autoprefixer’s code. It is important for big companies, which have long test period on every code changes. Now you can have up-to-date browsers data and don’t be worry to broke styles.
- Autoprefixer extremely cares about actual prefix data. In previous version there was day delay between Can I Use updates and Autoprefixer release. Now you will get faster updates directly from Can I Use author. Don’t forget to call
npm update caniuse-db
.
1.1 “Nutrisco et extingo”
Notable Changes
Autoprefixer 1.1 based on PostCSS 0.3 “Prince Seere” with great improvements in source map support:
-
Add source map annotation comment support.* Autoprefiixer now reads/writes annotation comment to end of CSS file, if map support is enabled.
-
Add inline source map support. It will be really helpful for LESS users.
-
Autodetect previous source map. If input CSS will contain annotation comment with inline map, Autoprefixer will read previous map, update it with prefixes changes and inline back to comment. If you set
from
option with input CSS file path and Autoprefixer will find map file near input CSS, it will read map, update and write new map file. You can disable autodetect bymap: false
option. -
Fix source map support on Windows and in subdirectories.* PostCSS 0.3 is much smarter with previous map support (maybe now it has best support for chain CSS tranformations with source maps). @nDmitry and @lydell did a great investigation about special cases with source map.
-
Optional visual cascade of prefixes. This behavior is disabled by default yet, but you can enable it with
cascade
option.a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
-
Autoprefixer now has nice interactive demo by @simevidas.
* grunt-autoprefixer already had this fixes. @nDmitry covered Autoprefixer and fixed them by hacks.
API Changes
- Deprecated API from 0.8 version was removed. Use
process(from: "a.css").css
instead ofcompile(file: "a.css")
andinfo()
instead ofinspect()
. - Add new
inlineMap
,mapAnnotation
options to control source map support. Read about them in PostCSS documentation.
Fixes
- Autoprefixer now adds prefix delector even if it is already prefixed by developer. @necolas find a lot of cases, when property logic can be used in selectors.
- Better flexbox support by @Rowno.
flex
property values now will be converted for oldbox-flex
syntax.flex-basis
,flex-shrink
andflex-grow
will be converted to separated properties for IE 10, instead of oneflex
property. - Better
break-inside
support by hacks suggested in great investigation by @InterPaul. - Autoprefixer now smarter groups prefixed and unprefixed properties and better wprks when you write two same properties near by (for example, two
transform
with and withoutcalc()
).
1.0 “Plus ultra”
Notable Changes
- Source map support. Autoprefixer now generates source map or modify previous source map (for example, from Sass).
- Preserves code indentations. New parser now saves all spaces from input CSS, so output prefixed CSS will be with same code style. It makes Autoprefixer much better for text editors plugin and prevents Autoprefixer to uncompress CSS from Sass.
- CSS parser was changed to PostCSS. It allows to add prefixes inside some new or custom at-rules and fix issue with comment in property name. Also it clean Autoprefixer code by moving some common CSS processor code to PostCSS.
- Better vendor hacks detection. Autoprefixer will preserve outdated prefixed property if you it put right after unprefixed ones. Also fixed bug with same properties in one rule.
- License was changed to MIT. New license is more free and allow to remove long LGPL preamble from each file.
- Long browser names. Autoprefixer now understands
firefox
,explorer
andblackberry
browser aliases and ignore case in browser names. So you can set supported browsers likeFirefox >= 22
. Also you can select lastn
versions of some specified browser bylast 2 Chrome versions
requirement.
API Changes
- Method
compile()
was renamed toprocess()
and now returnResult
object withcss
andmap
properties. Instead of input file infile
option, you should set input and output file names tofrom
andto
options to generate correct source map. Oldcompile()
API show deprecated warning and will be removed in next 1.1 release. - Method
inspect()
was renamed toinfo()
to fix name conflict with Console API. - There is no
autoprefixer.rework
method anymore. Just useautoprefixer.process(css).css
after your Rework transformations.
Binary
- Binary now will not concat output files. Concat requires extra code to support source map. Use special tools like grunt-concat-sourcemap.
- New
-d
option to set output directory for multiple input files. - Syntax error now displays input file name.
Fixes
- Add prefixes inside custom at-rules.
- Add only necessary prefixes to selector inside prefixed at-rule.
- Safer backgrounds list parser from PostCSS in gradient hack.
- Prefix
@keyframes
inside@media
. - Don’t prefix values for CSS3 PIE properties.
- Use browserify to build standalone version.