Skip to content

Releases: postcss/autoprefixer

2.1.1

15 Jul 05:23
@ai ai
2.1.1
Compare
Choose a tag to compare
  • Fix -webkit-background-size hack for contain and cover values.
  • Don’t add -webkit- prefix to filter with SVG (by @iamvdo).

2.1 “Eleftheria i thanatos”

30 Jun 12:43
@ai ai
2.1.0
Compare
Choose a tag to compare

- Add support for `clip-path` and `mask` properties. - Fix 2.0.2 issue and return `-webkit-` prefix to `filter` with SVG URI. Thanks to @iamvdo for notice.

2.0.2

30 Jun 10:39
@ai ai
2.0.2
Compare
Choose a tag to compare
  • Add readable names for new browsers from 2.0 release.
  • Don’t add -webkit- prefix to filter with SVG URI.
  • Don’t add -o- prefix 3D transforms.

2.0.1

30 Jun 10:39
@ai ai
2.0.1
Compare
Choose a tag to compare
  • Save declaration style, when clone declaration to prefix.

2.0 “Hongik Ingan”

24 Jun 07:33
@ai ai
2.0.0
Compare
Choose a tag to compare

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 to map: { inline: true }.
  • mapAnnotation: false was renamed to map: { annotation: false }.
  • Previous source map should be set to separated option map: { prev: prevMap } instead of old map: 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 in annotation 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 and op_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’s package.json.
  • Binary now has --no-cascade, --annotation and --sources-content options and deprecates
    -c and --cascade.

1.3.1

22 Jun 02:38
@ai ai
1.3.1
Compare
Choose a tag to compare
  • Fix gradient hack, when background property contains color.

1.3 “Tenka Fubu”

20 Jun 04:57
@ai ai
1.3.0
Compare
Choose a tag to compare

  • Add text-size-adjust support.
  • Add background-size to support Android 2.

1.2 “Meiji”

10 Jun 12:24
@ai ai
1.2.0
Compare
Choose a tag to compare

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:

  1. Autoprefixer stops to use strange 1.1.20140605 versions with dump date in minor part. Now it will be normal versions like 1.2.0.
  2. 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.
  3. 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”

18 Feb 17:39
@ai ai
1.1
Compare
Choose a tag to compare

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 by map: 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 of compile(file: "a.css") and info() instead of inspect().
  • 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 old box-flex syntax. flex-basis, flex-shrink and flex-grow will be converted to separated properties for IE 10, instead of one flex 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 without calc()).

1.0 “Plus ultra”

22 Dec 01:59
@ai ai
1.0
Compare
Choose a tag to compare

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 and blackberry browser aliases and ignore case in browser names. So you can set supported browsers like Firefox >= 22. Also you can select last n versions of some specified browser by last 2 Chrome versions requirement.

API Changes

  • Method compile() was renamed to process() and now return Result object with css and map properties. Instead of input file in file option, you should set input and output file names to from and to options to generate correct source map. Old compile() API show deprecated warning and will be removed in next 1.1 release.
  • Method inspect() was renamed to info() to fix name conflict with Console API.
  • There is no autoprefixer.rework method anymore. Just use autoprefixer.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.