postcss 6.0.22 → 7.0.2

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.0.2
+* Fix warning text (by Rui Pedro M Lima).
+
+## 7.0.1
+* Fix JSDoc (by Steven Lambert).
+
+## 7.0 “President Amy”
+* Remove Node.js 9 and Node.js 4 support.
+* Remove IE and “dead” browsers from Babel.
+* Add CSS position on error happened inside `walk()` (by Nikhil Gaba).
+* Add `LazyResult#finally` (by Igor Kamyshev).
+* Add warning on calling PostCSS without plugins and syntax options.
+* Reduce client-side size.
+
+## 6.0.23
+* Fix parsing nested at-rules without semicolon, params, and spaces.
+* Fix docs (by Kevin Schiffer and Pat Cavit).
+
 ## 6.0.22
 * Fix `Node#prev` and `Node#next` on missed parent.
 

package/README-cn.md

@@ -14,6 +14,8 @@ PostCSS 是一个允许使用 JS 插件转换样式的工具。
 PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，
 JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。
 
+PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个[抽象语法树]的方式）。在这之后，这个 API 便可被许多[插件]利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。
+
 **Twitter 账号:** [@postcss](https://twitter.com/postcss)<br>
 **支持 / 讨论:**   [Gitter](https://gitter.im/postcss/postcss)<br>
 
@@ -21,7 +23,9 @@ JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之
 PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_source=postcss)
 邮箱 <surrender@evilmartians.com>。
 
+[抽象语法树]:     https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9
 [Autoprefixer]: https://github.com/postcss/autoprefixer
+[插件]:          https://github.com/postcss/postcss/blob/master/README-cn.md#%E6%8F%92%E4%BB%B6
 
 <a href="https://evilmartians.com/?utm_source=postcss">
   <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
@@ -50,7 +54,6 @@ PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_sou
 
 * [`autoprefixer`] 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
 * [`postcss-preset-env`] 允许你使用未来的 CSS 特性。
-* [`postcss-image-set-polyfill`] 为所有浏览器模拟了 [`image-set`] 函数逻辑。
 
 ### 更佳的 CSS 可读性
 
@@ -81,7 +84,6 @@ PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_sou
 * [`lost`] 是一个功能强大的 `calc()` 栅格系统。
 * [`rtlcss`] 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。
 
-[`postcss-image-set-polyfill`]: https://github.com/SuperOl3g/postcss-image-set-polyfill
 [`postcss-inline-svg`]:         https://github.com/TrySound/postcss-inline-svg
 [`postcss-preset-env`]:         https://github.com/jonathantneal/postcss-preset-env
 [`react-css-modules`]:          https://github.com/gajus/react-css-modules
@@ -102,7 +104,6 @@ PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_sou
 [`css-modules`]:                https://github.com/css-modules/css-modules
 [`colorguard`]:                 https://github.com/SlexAxton/css-colorguard
 [`stylelint`]:                  https://github.com/stylelint/stylelint
-[`image-set`]:                  https://drafts.csswg.org/css-images-4/#image-set-notation
 [`stylefmt`]:                   https://github.com/morishitter/stylefmt
 [`cssnano`]:                    http://cssnano.co
 [`precss`]:                     https://github.com/jonathantneal/precss
@@ -120,6 +121,7 @@ PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
 * [`postcss-syntax`] 通过文件扩展名自动切换语法。
 * [`postcss-html`] 解析类 HTML 文件里`<style>`标签中的样式。
 * [`postcss-markdown`] 解析 Markdown 文件里代码块中的样式。
+* [`postcss-jsx`] 解析源文件里模板或对象字面量中的CSS。
 * [`postcss-styled`] 解析源文件里模板字面量中的CSS。
 * [`postcss-scss`] 允许你使用 SCSS *(但并没有将 SCSS 编译到 CSS)*。
 * [`postcss-sass`] 允许你使用 Sass *(但并没有将 Sass 编译到 CSS)*。
@@ -134,6 +136,7 @@ PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
 [`postcss-syntax`]:      https://github.com/gucong3000/postcss-syntax
 [`postcss-html`]:        https://github.com/gucong3000/postcss-html
 [`postcss-markdown`]:    https://github.com/gucong3000/postcss-markdown
+[`postcss-jsx`]:         https://github.com/gucong3000/postcss-jsx
 [`postcss-styled`]:      https://github.com/gucong3000/postcss-styled
 [`postcss-scss`]:        https://github.com/postcss/postcss-scss
 [`postcss-sass`]:        https://github.com/AleshaOleg/postcss-sass
@@ -169,28 +172,28 @@ PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
 
 ```js
 module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                exclude: /node_modules/,
-                use: [
-                    {
-                        loader: 'style-loader',
-                    },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            importLoaders: 1,
-                        }
-                    },
-                    {
-                        loader: 'postcss-loader'
-                    }
-                ]
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
             }
+          },
+          {
+            loader: 'postcss-loader'
+          }
         ]
-    }
+      }
+    ]
+  }
 }
 ```
 
@@ -198,10 +201,10 @@ module.exports = {
 
 ```js
 module.exports = {
-    plugins: [
-        require('precss'),
-        require('autoprefixer')
-    ]
+  plugins: [
+    require('precss'),
+    require('autoprefixer')
+  ]
 }
 ```
 
@@ -212,16 +215,16 @@ module.exports = {
 使用 [`gulp-postcss`] 和 [`gulp-sourcemaps`].
 
 ```js
-gulp.task('css', function () {
-    var postcss    = require('gulp-postcss');
-    var sourcemaps = require('gulp-sourcemaps');
-
-    return gulp.src('src/**/*.css')
-        .pipe( sourcemaps.init() )
-        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
-        .pipe( sourcemaps.write('.') )
-        .pipe( gulp.dest('build/') );
-});
+gulp.task('css', () => {
+  const postcss    = require('gulp-postcss')
+  const sourcemaps = require('gulp-sourcemaps')
+
+  return gulp.src('src/**/*.css')
+    .pipe( sourcemaps.init() )
+    .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
+    .pipe( sourcemaps.write('.') )
+    .pipe( gulp.dest('build/') )
+})
 ```
 
 [`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
@@ -246,10 +249,10 @@ postcss --use autoprefixer -c options.json -o main.css css/*.css
 你可以用 [`postcss-js`] 然后转换样式对象。
 
 ```js
-var postcss  = require('postcss-js');
-var prefixer = postcss.sync([ require('autoprefixer') ]);
+var postcss  = require('postcss-js')
+var prefixer = postcss.sync([ require('autoprefixer') ])
 
-prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
+prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
 ```
 
 [`postcss-js`]: https://github.com/postcss/postcss-js
@@ -276,19 +279,19 @@ prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '
 对于其它的应用环境，你可以使用 JS API：
 
 ```js
-const fs = require('fs');
-const postcss = require('postcss');
-const precss = require('precss');
-const autoprefixer = require('autoprefixer');
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+const precss = require('precss')
+const fs = require('fs')
 
 fs.readFile('src/app.css', (err, css) => {
-    postcss([precss, autoprefixer])
-        .process(css, { from: 'src/app.css', to: 'dest/app.css' })
-        .then(result => {
-            fs.writeFile('dest/app.css', result.css);
-            if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
-        });
-});
+  postcss([precss, autoprefixer])
+    .process(css, { from: 'src/app.css', to: 'dest/app.css' })
+    .then(result => {
+      fs.writeFile('dest/app.css', result.css)
+      if ( result.map ) fs.writeFile('dest/app.css.map', result.map)
+    })
+})
 ```
 
 阅读 [PostCSS API 文档] 获取更多有关 JS API 的信息.

package/README.md

@@ -15,6 +15,11 @@ PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba,
 and JetBrains. The [Autoprefixer] PostCSS plugin is one of the most popular
 CSS processors.
 
+PostCSS takes a CSS file and provides an API to analyze and modify its rules
+(by transforming them into an [Abstract Syntax Tree]).
+This API can then be used by [plugins] to do a lot of useful things,
+e.g. to find errors automatically insert vendor prefixes.
+
 **Support / Discussion:** [Gitter](https://gitter.im/postcss/postcss)<br>
 **Twitter account:**      [@postcss](https://twitter.com/postcss)<br>
 **VK.com page:**          [postcss](https://vk.com/postcss)<br>
@@ -24,7 +29,9 @@ For PostCSS commercial support (consulting, improving the front-end culture
 of your company, PostCSS plugins), contact [Evil Martians](https://evilmartians.com/?utm_source=postcss)
 at <surrender@evilmartians.com>.
 
-[Autoprefixer]: https://github.com/postcss/autoprefixer
+[Abstract Syntax Tree]: https://en.wikipedia.org/wiki/Abstract_syntax_tree
+[Autoprefixer]:         https://github.com/postcss/autoprefixer
+[plugins]:              https://github.com/postcss/postcss#plugins
 
 <a href="https://evilmartians.com/?utm_source=postcss">
   <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
@@ -60,7 +67,6 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 
 * [`autoprefixer`] adds vendor prefixes, using data from Can I Use.
 * [`postcss-preset-env`] allows you to use future CSS features today.
-* [`postcss-image-set-polyfill`] emulates [`image-set`] function logic for all browsers
 
 ### Better CSS Readability
 
@@ -93,7 +99,6 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 * [`lost`] is a feature-rich `calc()` grid system.
 * [`rtlcss`] mirrors styles for right-to-left locales.
 
-[`postcss-image-set-polyfill`]: https://github.com/SuperOl3g/postcss-image-set-polyfill
 [PostCSS plugin development]:   https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md
 [`postcss-inline-svg`]:         https://github.com/TrySound/postcss-inline-svg
 [`postcss-preset-env`]:         https://github.com/jonathantneal/postcss-preset-env
@@ -114,7 +119,6 @@ If you have any new ideas, [PostCSS plugin development] is really easy.
 [`css-modules`]:                https://github.com/css-modules/css-modules
 [`colorguard`]:                 https://github.com/SlexAxton/css-colorguard
 [`stylelint`]:                  https://github.com/stylelint/stylelint
-[`image-set`]:                  https://drafts.csswg.org/css-images-4/#image-set-notation
 [`stylefmt`]:                   https://github.com/morishitter/stylefmt
 [`cssnano`]:                    http://cssnano.co
 [`precss`]:                     https://github.com/jonathantneal/precss
@@ -133,6 +137,7 @@ you can write a parser and/or stringifier to extend PostCSS.
 * [`postcss-syntax`] switch syntax automatically by file extensions.
 * [`postcss-html`] parsing styles in `<style>` tags of HTML-like files.
 * [`postcss-markdown`] parsing styles in code blocks of Markdown files.
+* [`postcss-jsx`] parsing CSS in template / object literals of source files.
 * [`postcss-styled`] parsing CSS in template literals of source files.
 * [`postcss-scss`] allows you to work with SCSS
   *(but does not compile SCSS to CSS)*.
@@ -152,6 +157,7 @@ you can write a parser and/or stringifier to extend PostCSS.
 [`postcss-syntax`]:      https://github.com/gucong3000/postcss-syntax
 [`postcss-html`]:        https://github.com/gucong3000/postcss-html
 [`postcss-markdown`]:    https://github.com/gucong3000/postcss-markdown
+[`postcss-jsx`]:         https://github.com/gucong3000/postcss-jsx
 [`postcss-styled`]:      https://github.com/gucong3000/postcss-styled
 [`postcss-scss`]:        https://github.com/postcss/postcss-scss
 [`postcss-sass`]:        https://github.com/AleshaOleg/postcss-sass
@@ -187,28 +193,28 @@ Use [`postcss-loader`] in `webpack.config.js`:
 
 ```js
 module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                exclude: /node_modules/,
-                use: [
-                    {
-                        loader: 'style-loader',
-                    },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            importLoaders: 1,
-                        }
-                    },
-                    {
-                        loader: 'postcss-loader'
-                    }
-                ]
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
             }
+          },
+          {
+            loader: 'postcss-loader'
+          }
         ]
-    }
+      }
+    ]
+  }
 }
 ```
 
@@ -216,10 +222,10 @@ Then create `postcss.config.js`:
 
 ```js
 module.exports = {
-    plugins: [
-        require('precss'),
-        require('autoprefixer')
-    ]
+  plugins: [
+    require('precss'),
+    require('autoprefixer')
+  ]
 }
 ```
 
@@ -230,16 +236,16 @@ module.exports = {
 Use [`gulp-postcss`] and [`gulp-sourcemaps`].
 
 ```js
-gulp.task('css', function () {
-    var postcss    = require('gulp-postcss');
-    var sourcemaps = require('gulp-sourcemaps');
-
-    return gulp.src('src/**/*.css')
-        .pipe( sourcemaps.init() )
-        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
-        .pipe( sourcemaps.write('.') )
-        .pipe( gulp.dest('build/') );
-});
+gulp.task('css', () => {
+  const postcss    = require('gulp-postcss')
+  const sourcemaps = require('gulp-sourcemaps')
+
+  return gulp.src('src/**/*.css')
+    .pipe( sourcemaps.init() )
+    .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
+    .pipe( sourcemaps.write('.') )
+    .pipe( gulp.dest('build/') )
+})
 ```
 
 [`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
@@ -266,10 +272,10 @@ To apply PostCSS plugins to React Inline Styles, JSS, Radium
 and other [CSS-in-JS], you can use [`postcss-js`] and transforms style objects.
 
 ```js
-var postcss  = require('postcss-js');
-var prefixer = postcss.sync([ require('autoprefixer') ]);
+var postcss  = require('postcss-js')
+var prefixer = postcss.sync([ require('autoprefixer') ])
 
-prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
+prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
 ```
 
 [`postcss-js`]: https://github.com/postcss/postcss-js
@@ -296,19 +302,21 @@ prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '
 For other environments, you can use the JS API:
 
 ```js
-const fs = require('fs');
-const postcss = require('postcss');
-const precss = require('precss');
-const autoprefixer = require('autoprefixer');
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+const precss = require('precss')
+const fs = require('fs')
 
 fs.readFile('src/app.css', (err, css) => {
-    postcss([precss, autoprefixer])
-        .process(css, { from: 'src/app.css', to: 'dest/app.css' })
-        .then(result => {
-            fs.writeFile('dest/app.css', result.css);
-            if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
-        });
-});
+  postcss([precss, autoprefixer])
+    .process(css, { from: 'src/app.css', to: 'dest/app.css' })
+    .then(result => {
+      fs.writeFile('dest/app.css', result.css, () => true)
+      if ( result.map ) {
+        fs.writeFile('dest/app.css.map', result.map, () => true)
+      }
+    })
+})
 ```
 
 Read the [PostCSS API documentation] for more details about the JS API.

package/docs/architecture.md

@@ -104,7 +104,7 @@ So now lets look more closely on structures that play main role in PostCSS workf
 
     Lets look more closely on single token like `word`. As it was said each token represented as a list and follow such pattern.
 
-    ```typescript
+    ```js
     const token = [
          // represents token type
         'word',
@@ -121,7 +121,7 @@ So now lets look more closely on structures that play main role in PostCSS workf
 
         // Next two numbers also optional and represent end position for multichar tokens like this one. Numbers follow same rule as was described above
         1, 10
-    ];
+    ]
     ```
    There are many patterns how tokenization could be done, PostCSS motto is performance and simplicity. Tokenization is complex computing operation and take large amount of syntax analysis time ( ~90% ), that why PostCSS' Tokenizer looks dirty but it was optimized for speed. Any high-level constructs like classes could dramatically slow down tokenizer.
 

package/docs/guidelines/plugin.md

@@ -57,11 +57,11 @@ By wrapping your function in this method,
 you are hooking into a common plugin API:
 
 ```js
-module.exports = postcss.plugin('plugin-name', function (opts) {
-    return function (root, result) {
-        // Plugin code
-    };
-});
+module.exports = postcss.plugin('plugin-name', opts => {
+  return (root, result) => {
+    // Plugin code
+  }
+})
 ```
 
 ## 2. Processing
@@ -78,19 +78,19 @@ different environments. You should test in (at least) Node.js [active LTS](https
 For example, use `fs.writeFile` instead of `fs.writeFileSync`:
 
 ```js
-postcss.plugin('plugin-sprite', function (opts) {
-    return function (root, result) {
-
-        return new Promise(function (resolve, reject) {
-            var sprite = makeSprite();
-            fs.writeFile(opts.file, function (err) {
-                if ( err ) return reject(err);
-                resolve();
-            })
-        });
-
-    };
-});
+postcss.plugin('plugin-sprite', opts => {
+  return (root, result) => {
+
+    return new Promise((resolve, reject) => {
+      const sprite = makeSprite()
+      fs.writeFile(opts.file, sprite, err => {
+        if (err) return reject(err)
+        resolve()
+      })
+    })
+
+  }
+})
 ```
 
 ### 2.3. Set `node.source` for new nodes
@@ -102,18 +102,18 @@ So if you add new declaration based on some existing declaration, you should
 clone the existing declaration in order to save that original `source`.
 
 ```js
-if ( needPrefix(decl.prop) ) {
-    decl.cloneBefore({ prop: '-webkit-' + decl.prop });
+if (needPrefix(decl.prop)) {
+  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
 }
 ```
 
 You can also set `source` directly, copying from some existing node:
 
 ```js
-if ( decl.prop === 'animation' ) {
-    var keyframe = createAnimationByName(decl.value);
-    keyframes.source = decl.source;
-    decl.root().append(keyframes);
+if (decl.prop === 'animation') {
+  const keyframe = createAnimationByName(decl.value)
+  keyframes.source = decl.source
+  decl.root().append(keyframes)
 }
 ```
 
@@ -134,8 +134,8 @@ in a mixin plugin) you should use `node.error` to create an error
 that includes source position:
 
 ```js
-if ( typeof mixins[name] === 'undefined' ) {
-    throw decl.error('Unknown mixin ' + name, { plugin: 'postcss-mixins' });
+if (typeof mixins[name] === 'undefined') {
+  throw decl.error('Unknown mixin ' + name, { plugin: 'postcss-mixins' })
 }
 ```
 
@@ -145,8 +145,8 @@ Do not print warnings with `console.log` or `console.warn`,
 because some PostCSS runner may not allow console output.
 
 ```js
-if ( outdated(decl.prop) ) {
-    result.warn(decl.prop + ' is outdated', { node: decl });
+if (outdated(decl.prop)) {
+  result.warn(decl.prop + ' is outdated', { node: decl })
 }
 ```
 

package/docs/guidelines/runner.md

@@ -23,12 +23,12 @@ it can support plugins which accept a function, such as [`postcss-assets`]:
 
 ```js
 module.exports = [
-    require('postcss-assets')({
-        cachebuster: function (file) {
-            return fs.statSync(file).mtime.getTime().toString(16);
-        }
-    })
-];
+  require('postcss-assets')({
+    cachebuster: function (file) {
+      return fs.statSync(file).mtime.getTime().toString(16)
+    }
+  })
+]
 ```
 
 [`postcss-assets`]: https://github.com/borodean/postcss-assets
@@ -43,7 +43,7 @@ writing to disk (for example, a gulp transform), you should set both options
 to point to the same file:
 
 ```js
-processor.process({ from: file.path, to: file.path });
+processor.process({ from: file.path, to: file.path })
 ```
 
 ### 2.2. Use only the asynchronous API
@@ -53,8 +53,8 @@ The synchronous API is provided only for debugging, is slower,
 and can’t work with asynchronous plugins.
 
 ```js
-processor.process(opts).then(function (result) {
-    // processing is finished
+processor.process(opts).then(result => {
+  // processing is finished
 });
 ```
 
@@ -75,13 +75,13 @@ as the runner can be used by developers who are not familiar with JavaScript.
 Instead, handle such errors gracefully:
 
 ```js
-processor.process(opts).catch(function (error) {
-    if ( error.name === 'CssSyntaxError' ) {
-        process.stderr.write(error.message + error.showSourceCode());
-    } else {
-        throw error;
-    }
-});
+processor.process(opts).catch(error => {
+  if (error.name === 'CssSyntaxError') {
+    process.stderr.write(error.message + error.showSourceCode())
+  } else {
+    throw error
+  }
+})
 ```
 
 ### 3.2. Display `result.warnings()`
@@ -89,9 +89,9 @@ processor.process(opts).catch(function (error) {
 PostCSS runners must output warnings from `result.warnings()`:
 
 ```js
-result.warnings().forEach(function (warn) {
-    process.stderr.write(warn.toString());
-});
+result.warnings().forEach(warn => {
+  process.stderr.write(warn.toString())
+})
 ```
 
 See also [postcss-log-warnings] and [postcss-messages] plugins.
@@ -106,8 +106,8 @@ PostCSS runners must provide an option to save the source map in a different
 file:
 
 ```js
-if ( result.map ) {
-    fs.writeFile(opts.to + '.map', result.map.toString());
+if (result.map) {
+  fs.writeFile(opts.to + '.map', result.map.toString())
 }
 ```
 

package/docs/source-maps.md

@@ -13,17 +13,17 @@ If you don’t want the map inlined, you can set `map.inline: false`.
 
 ```js
 processor
-    .process(css, {
-        from: 'app.sass.css',
-        to:   'app.css',
-        map: { inline: false },
-    })
-    .then(function (result) {
-        result.map //=> '{ "version":3,
-                   //      "file":"app.css",
-                   //      "sources":["app.sass"],
-                   //       "mappings":"AAAA,KAAI" }'
-    });
+  .process(css, {
+    from: 'app.sass.css',
+    to:   'app.css',
+    map: { inline: false }
+  })
+  .then(result => {
+      result.map //=> '{ "version":3,
+                 //      "file":"app.css",
+                 //      "sources":["app.sass"],
+                 //       "mappings":"AAAA,KAAI" }'
+  })
 ```
 
 If PostCSS finds source maps from a previous transformation,