autoprefixer 9.4.9 → 9.6.0

package/README.md

@@ -14,6 +14,15 @@ entirely):
 ::placeholder {
   color: gray;
 }
+
+.image {
+  background-image: url(image@1x.png);
+}
+@media (min-resolution: 2dppx) {
+  .image {
+    background-image: url(image@2x.png);
+  }
+}
 ```
 
 Autoprefixer will use the data based on current browser popularity and property
@@ -24,6 +33,9 @@ of Autoprefixer.
 ::-webkit-input-placeholder {
   color: gray;
 }
+::-moz-placeholder {
+  color: gray;
+}
 :-ms-input-placeholder {
   color: gray;
 }
@@ -33,6 +45,17 @@ of Autoprefixer.
 ::placeholder {
   color: gray;
 }
+
+.image {
+  background-image: url(image@1x.png);
+}
+@media (-webkit-min-device-pixel-ratio: 2),
+       (-o-min-device-pixel-ratio: 2/1),
+       (min-resolution: 2dppx) {
+  .image {
+    background-image: url(image@2x.png);
+  }
+}
 ```
 
 Twitter account for news and releases: [@autoprefixer].
@@ -55,8 +78,6 @@ Twitter account for news and releases: [@autoprefixer].
 - [Browsers](#browsers)
 - [FAQ](#faq)
     - [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie)
-    - [No prefixes in production](#no-prefixes-in-production)
-    - [What is the unprefixed version of `-webkit-min-device-pixel-ratio`?](#what-is-the-unprefixed-version-of--webkit-min-device-pixel-ratio)
     - [Does it add polyfills?](#does-it-add-polyfills)
     - [Why doesn’t Autoprefixer add prefixes to `border-radius`?](#why-doesnt-autoprefixer-add-prefixes-to-border-radius)
     - [Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?](#why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes)
@@ -103,40 +124,45 @@ See [Browserslist docs] for queries, browser names, config format, and defaults.
 
 ### Does Autoprefixer polyfill Grid Layout for IE?
 
-Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax,
-but this polyfill will not work in 100% of cases. This is why it is disabled by default.
+Autoprefixer can be used to translate modern CSS Grid syntax into IE 10
+and IE 11 syntax, but this polyfill will not work in 100% of cases.
+This is why it is disabled by default.
 
-First, you need to enable Grid prefixes by using either the `grid: "autoplace"` option or the `/* autoprefixer grid: autoplace */` control comment.
+First, you need to enable Grid prefixes by using either the `grid: "autoplace"`
+option or the `/* autoprefixer grid: autoplace */` control comment.
 
 Second, you need to test every fix with Grid in IE. It is not an enable and
 forget feature, but it is still very useful.
 Financial Times and Yandex use it in production.
 
-Third, there is only very limited auto placement support. Read the [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie) section for more details.
+Third, there is only very limited auto placement support. Read the
+[Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie) section
+for more details.
 
-Fourth, if you are not using the autoplacement feature, the best way to use Autoprefixer is by using  `grid-template` or `grid-template-areas`.
+Fourth, if you are not using the autoplacement feature, the best way
+to use Autoprefixer is by using  `grid-template` or `grid-template-areas`.
 
 ```css
 .page {
-    display: grid;
-    grid-gap: 33px;
-    grid-template:
-        "head head  head" 1fr
-        "nav  main  main" minmax(100px, 1fr)
-        "nav  foot  foot" 2fr /
-        1fr   100px 1fr;
+  display: grid;
+  grid-gap: 33px;
+  grid-template:
+    "head head  head" 1fr
+    "nav  main  main" minmax(100px, 1fr)
+    "nav  foot  foot" 2fr /
+    1fr   100px 1fr;
 }
 .page__head {
-    grid-area: head;
+  grid-area: head;
 }
 .page__nav {
-    grid-area: nav;
+  grid-area: nav;
 }
 .page__main {
-    grid-area: main;
+  grid-area: main;
 }
 .page__footer {
-    grid-area: foot;
+  grid-area: foot;
 }
 ```
 
@@ -152,44 +178,6 @@ See also:
 [`postcss-gap-properties`]:                     https://github.com/jonathantneal/postcss-gap-properties
 [`postcss-grid-kiss`]:                          https://github.com/sylvainpolletvillard/postcss-grid-kiss
 
-### No prefixes in production
-
-Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer
-to minify CSS by cleaning unnecessary prefixes.
-
-If you pass your browsers to Autoprefixer using its `browsers` option, the other
-tools will use their own config, leading webpack to remove the prefixes that
-the first Autoprefixer added.
-
-To avoid this, ensure you use either the [browserslist config file] or
-`browsers` key in your `package.json`, so that all tools (Autoprefixer,
-cssnano, doiuse, cssnext, etc) use the same browsers list.
-
-[browserslist config file]: https://github.com/ai/browserslist#config-file
-
-
-### What is the unprefixed version of `-webkit-min-device-pixel-ratio`?
-
-```css
-@media (min-resolution: 2dppx) {
-    .image {
-        background-image: url(image@2x.png);
-    }
-}
-```
-
-Will be compiled to:
-
-```css
-@media (-webkit-min-device-pixel-ratio: 2),
-       (-o-min-device-pixel-ratio: 2/1),
-       (min-resolution: 2dppx) {
-    .image {
-        background-image: url(image@2x.png);
-    }
-}
-```
-
 
 ### Does it add polyfills?
 
@@ -242,8 +230,7 @@ Use [postcss-unprefix] before Autoprefixer.
 ### Does Autoprefixer add `-epub-` prefix?
 
 No, Autoprefixer works only with browsers prefixes from Can I Use.
-But you can use [postcss-epub]
-for prefixing ePub3 properties.
+But you can use [postcss-epub] for prefixing ePub3 properties.
 
 [postcss-epub]: https://github.com/Rycochet/postcss-epub
 
@@ -264,17 +251,17 @@ future-proof. You can use [postcss-font-family-system-ui] to transform
 In Gulp you can use [gulp-postcss] with `autoprefixer` npm package.
 
 ```js
-gulp.task('autoprefixer', function () {
-    var postcss      = require('gulp-postcss');
-    var sourcemaps   = require('gulp-sourcemaps');
-    var autoprefixer = require('autoprefixer');
-
-    return gulp.src('./src/*.css')
-        .pipe(sourcemaps.init())
-        .pipe(postcss([ autoprefixer() ]))
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest('./dest'));
-});
+gulp.task('autoprefixer', () => {
+  const autoprefixer = require('autoprefixer')
+  const sourcemaps = require('gulp-sourcemaps')
+  const postcss = require('gulp-postcss')
+
+  return gulp.src('./src/*.css')
+    .pipe(sourcemaps.init())
+    .pipe(postcss([ autoprefixer() ]))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('./dest'))
+})
 ```
 
 With `gulp-postcss` you also can combine Autoprefixer
@@ -291,14 +278,14 @@ and [other PostCSS plugins].
 
 ```js
 module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: ["style-loader", "css-loader", "postcss-loader"]
-            }
-        ]
-    }
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader", "postcss-loader"]
+      }
+    ]
+  }
 }
 ```
 
@@ -314,7 +301,7 @@ module.exports = {
 
 [other PostCSS plugins]: https://github.com/postcss/postcss#plugins
 [postcss-loader]:        https://github.com/postcss/postcss-loader
-[webpack]:               http://webpack.github.io/
+[webpack]:               https://webpack.js.org/
 
 
 ### CSS-in-JS
@@ -409,15 +396,15 @@ You can use Autoprefixer with [PostCSS] in your Node.js application
 or if you want to develop an Autoprefixer plugin for a new environment.
 
 ```js
-var autoprefixer = require('autoprefixer');
-var postcss      = require('postcss');
-
-postcss([ autoprefixer ]).process(css).then(function (result) {
-    result.warnings().forEach(function (warn) {
-        console.warn(warn.toString());
-    });
-    console.log(result.css);
-});
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+
+postcss([ autoprefixer ]).process(css).then(result => {
+  result.warnings().forEach(warn => {
+    console.warn(warn.toString())
+  })
+  console.log(result.css)
+})
 ```
 
 There is also a [standalone build] for the browser or for a non-Node.js runtime.
@@ -435,7 +422,7 @@ Autoprefixer should be used in assets build tools. Text editor plugins are not
 a good solution, because prefixes decrease code readability and you will need
 to change values in all prefixed properties.
 
-I recommend you to learn how to use build tools like [Gulp].
+I recommend you to learn how to use build tools like [Parcel].
 They work much better and will open you a whole new world of useful plugins
 and automation.
 
@@ -445,8 +432,9 @@ If you can’t move to a build tool, you can use text editor plugins:
 * [Brackets](https://github.com/mikaeljorhult/brackets-autoprefixer)
 * [Atom Editor](https://github.com/sindresorhus/atom-autoprefixer)
 * [Visual Studio](https://github.com/madskristensen/WebCompiler)
+  ([how to](https://stackoverflow.com/a/54908636/2440))
 
-[Gulp]:  https://gulpjs.com/
+[Parcel]: https://parceljs.org/
 
 
 ## Warnings
@@ -461,9 +449,9 @@ problems in your CSS:
 You can get warnings from `result.warnings()`:
 
 ```js
-result.warnings().forEach(function (warn) {
-    console.warn(warn.toString());
-});
+result.warnings().forEach(warn => {
+  console.warn(warn.toString())
+})
 ```
 
 Every Autoprefixer runner should display these warnings.
@@ -481,8 +469,8 @@ after the unprefixed one.
 
 ```css
 a {
-    transform: scale(0.5);
-    -moz-transform: scale(0.6);
+  transform: scale(0.5);
+  -moz-transform: scale(0.6);
 }
 ```
 
@@ -506,7 +494,7 @@ You can use these plugin options to control some of Autoprefixer’s features.
 You should set them inside the plugin like so:
 
 ```js
-autoprefixer({ grid: "autoplace" });
+autoprefixer({ grid: 'autoplace' })
 ```
 
 
@@ -517,18 +505,18 @@ you can use control comments to disable Autoprefixer.
 
 ```css
 .a {
-    transition: 1s; /* will be prefixed */
+  transition: 1s; /* will be prefixed */
 }
 
 .b {
-    /* autoprefixer: off */
-    transition: 1s; /* will not be prefixed */
+  /* autoprefixer: off */
+  transition: 1s; /* will not be prefixed */
 }
 
 .c {
-    /* autoprefixer: ignore next */
-    transition: 1s; /* will not be prefixed */
-    mask: url(image.png); /* will be prefixed */
+  /* autoprefixer: ignore next */
+  transition: 1s; /* will not be prefixed */
+  mask: url(image.png); /* will be prefixed */
 }
 ```
 
@@ -540,20 +528,20 @@ There are three types of control comments:
   or next rule selector or at-rule parameters (but not rule/at‑rule body).
 * `/* autoprefixer grid: (autoplace|no-autoplace|off) */`: control how Autoprefixer handles
   grid translations for the whole block:
-    * `autoplace`: enable grid translations with autoplacement support.
-    * `no-autoplace`: enable grid translations with autoplacement support *disabled*.
-      (alias for deprecated value `on`)
-    * `off`: disable all grid translations.
+  * `autoplace`: enable grid translations with autoplacement support.
+  * `no-autoplace`: enable grid translations with autoplacement
+    support *disabled* (alias for deprecated value `on`).
+  * `off`: disable all grid translations.
 
 You can also use comments recursively:
 
 ```css
 /* autoprefixer: off */
 @supports (transition: all) {
-    /* autoprefixer: on */
-    a {
-        /* autoprefixer: off */
-    }
+  /* autoprefixer: on */
+  a {
+    /* autoprefixer: off */
+  }
 }
 ```
 
@@ -564,10 +552,10 @@ block twice:
 /* How not to use block level control comments */
 
 .do-not-do-this {
-    /* autoprefixer: off */
-    transition: 1s;
-    /* autoprefixer: on */
-    transform: rotate(20deg);
+  /* autoprefixer: off */
+  transition: 1s;
+  /* autoprefixer: on */
+  transform: rotate(20deg);
 }
 ```
 
@@ -593,24 +581,27 @@ Available options are:
   parameters. Default is `true`.
 * `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
   properties. With `"no-2009"` value Autoprefixer will add prefixes only
-  for final and IE versions of specification. Default is `true`.
-* `grid` (false|"autoplace"|"no-autoplace"): should Autoprefixer add IE prefixes for Grid Layout
-  properties?
-    * `false` (default): prevent Autoprefixer from outputting CSS Grid translations.
-    * `"autoplace"`: enable Autoprefixer grid translations and *include* autoplacement
-      support. You can also use `/* autoprefixer grid: autoplace */` in your CSS.
-    * `"no-autoplace"`: enable Autoprefixer grid translations but *exclude* autoplacement
-      support. You can also use `/* autoprefixer grid: no-autoplace */` in your CSS.
+  for final and IE 10 versions of specification. Default is `true`.
+* `grid` (false|"autoplace"|"no-autoplace"): should Autoprefixer
+  add IE 10-11 prefixes for Grid Layout properties?
+    * `false` (default): prevent Autoprefixer from outputting
+       CSS Grid translations.
+    * `"autoplace"`: enable Autoprefixer grid translations
+      and *include* autoplacement support. You can also use
+      `/* autoprefixer grid: autoplace */` in your CSS.
+    * `"no-autoplace"`: enable Autoprefixer grid translations
+      but *exclude* autoplacement support. You can also use
+      `/* autoprefixer grid: no-autoplace */` in your CSS.
       (alias for the deprecated `true` value)
 * `stats` (object): custom [usage statistics] for `> 10% in my stats`
   browsers query.
-* `browsers` (array): list of queries for target browsers. Try to not use it.
-  The best practice is to use `.browserslistrc` config
+* `overrideBrowserslist` (array): list of queries for target browsers.
+  Try to not use it. The best practice is to use `.browserslistrc` config
   or `browserslist` key in `package.json` to share target browsers
   with Babel, ESLint and Stylelint. See [Browserslist docs]
   for available queries and default value.
 * `ignoreUnknownVersions` (boolean): do not raise error on unknown browser
-  version in Browserslist config or `browsers` option. Default is `false`.
+  version in Browserslist config. Default is `false`.
 
 Plugin object has `info()` method for debugging purpose.
 
@@ -634,10 +625,10 @@ Autoprefixer supports autoplacement by using `nth-child` CSS selectors. It creat
 /* autoprefixer grid: autoplace */
 
 .autoplacement-example {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  grid-gap: 20px;
 }
 ```
 
@@ -647,33 +638,33 @@ Autoprefixer supports autoplacement by using `nth-child` CSS selectors. It creat
 /* autoprefixer grid: autoplace */
 
 .autoplacement-example {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 1fr 20px 1fr;
-    grid-template-columns: 1fr 1fr;
-    -ms-grid-rows: auto 20px auto;
-    grid-template-rows: auto auto;
-    grid-gap: 20px;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 20px 1fr;
+  grid-template-columns: 1fr 1fr;
+  -ms-grid-rows: auto 20px auto;
+  grid-template-rows: auto auto;
+  grid-gap: 20px;
 }
 
 .autoplacement-example > *:nth-child(1) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 1;
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
 }
 
 .autoplacement-example > *:nth-child(2) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 3;
+  -ms-grid-row: 1;
+  -ms-grid-column: 3;
 }
 
 .autoplacement-example > *:nth-child(3) {
-    -ms-grid-row: 3;
-    -ms-grid-column: 1;
+  -ms-grid-row: 3;
+  -ms-grid-column: 1;
 }
 
 .autoplacement-example > *:nth-child(4) {
-    -ms-grid-row: 3;
-    -ms-grid-column: 3;
+  -ms-grid-row: 3;
+  -ms-grid-column: 3;
 }
 ```
 
@@ -696,14 +687,14 @@ The following CSS will not work as expected with the autoplacement feature enabl
 /* Unsafe CSS when Autoplacement is enabled */
 
 .grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 ```
 
@@ -713,14 +704,14 @@ Swapping the rules around will not fix the issue either:
 /* Also unsafe to use this CSS */
 
 .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 
 .grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 ```
 
@@ -731,15 +722,15 @@ grid-declaration rule:
 /* Disable autoplacement to fix the issue */
 
 .grid {
-    /* autoprefixer grid: no-autoplace */
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  /* autoprefixer grid: no-autoplace */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 
 .grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 ```
 
@@ -753,21 +744,21 @@ when needed. This method is far less likely to cause something on the site to br
 
 /* Old code will function the same way it always has */
 .old-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 .old-grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* Enable autoplacement when you want to use it in new code */
 .new-autoplace-friendly-grid {
-    /* autoprefixer grid: autoplace */
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, auto);
+  /* autoprefixer grid: autoplace */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, auto);
 }
 ```
 
@@ -786,14 +777,14 @@ so that Autoprefixer knows how many `nth-child` selectors to generate.
 
 ```css
 .not-allowed {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .is-allowed {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(10, auto);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(10, auto);
 }
 ```
 
@@ -806,42 +797,38 @@ so unfortunately this little snippet will _never_ be IE friendly.
 
 ```css
 .grid {
-    /* This will never be IE friendly */
-    grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
+  /* This will never be IE friendly */
+  grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
 }
 ```
 
 #### No manual cell placement or column/row spans allowed inside an autoplacement grid
 
-Elements must not be manually placed or given column/row spans inside an autoplacement
-grid. Only the most basic of autoplacement grids are supported. Grid cells can still be
-placed manually outside the the explicit grid though. Support for manually placing
-individual grid cells inside an explicit autoplacement grid is planned for a
-future release.
+Elements must not be manually placed or given column/row spans inside
+an autoplacement grid. Only the most basic of autoplacement grids are supported.
+Grid cells can still be placed manually outside the the explicit grid though.
+Support for manually placing individual grid cells inside an explicit
+autoplacement grid is planned for a future release.
 
 ```css
 .autoplacement-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, auto);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, auto);
 }
 
-/*
-    grid cells placed inside the explicit grid
-    will break the layout in IE
-*/
+/* Grid cells placed inside the explicit grid
+   will break the layout in IE */
 .not-permitted-grid-cell {
-    grid-column: 1;
-    grid-row: 1;
+  grid-column: 1;
+  grid-row: 1;
 }
 
-/*
-    grid cells placed outside the
-    explicit grid will work in IE
-*/
+/* Grid cells placed outside the
+   explicit grid will work in IE */
 .permitted-grid-cell {
-    grid-column: 1 / span 2;
-    grid-row: 4;
+  grid-column: 1 / span 2;
+  grid-row: 4;
 }
 ```
 
@@ -850,25 +837,25 @@ If manual cell placement is required, we recommend using `grid-template` or
 
 ```css
 .page {
-    display: grid;
-    grid-gap: 30px;
-    grid-template:
-        "head head"
-        "nav  main" minmax(100px, 1fr)
-        "foot foot" /
-        200px 1fr;
+  display: grid;
+  grid-gap: 30px;
+  grid-template:
+      "head head"
+      "nav  main" minmax(100px, 1fr)
+      "foot foot" /
+      200px 1fr;
 }
 .page__head {
-    grid-area: head;
+  grid-area: head;
 }
 .page__nav {
-    grid-area: nav;
+  grid-area: nav;
 }
 .page__main {
-    grid-area: main;
+  grid-area: main;
 }
 .page__footer {
-    grid-area: foot;
+  grid-area: foot;
 }
 ```
 
@@ -878,7 +865,7 @@ Let's say you have this HTML:
 
 ```html
 <div class="grid">
-    <div class="grid-cell"></div>
+  <div class="grid-cell"></div>
 </div>
 ```
 
@@ -886,17 +873,17 @@ And you write this CSS:
 
 ```css
 .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
 }
 
 .grid::before {
-    content: 'before';
+  content: 'before';
 }
 
 .grid::after {
-    content: 'after';
+  content: 'after';
 }
 ```
 
@@ -904,31 +891,31 @@ This will be the output:
 
 ```css
 .grid {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 1fr 1fr;
-    grid-template-columns: 1fr 1fr;
-    -ms-grid-rows: auto;
-    grid-template-rows: auto;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  -ms-grid-rows: auto;
+  grid-template-rows: auto;
 }
 
 .grid > *:nth-child(1) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 1;
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
 }
 
 
 .grid > *:nth-child(2) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 2;
+  -ms-grid-row: 1;
+  -ms-grid-column: 2;
 }
 
 .grid::before {
-    content: 'before';
+  content: 'before';
 }
 
 .grid::after {
-    content: 'after';
+  content: 'after';
 }
 ```
 
@@ -948,47 +935,47 @@ If you wish to change the size of a `grid-gap`, you will need to redeclare the g
 
 ```css
 .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 50px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: 50px;
 }
 
 /* This will *NOT* work in IE */
 @media (max-width: 600px) {
-    .grid {
-        grid-gap: 20px;
-    }
+  .grid {
+    grid-gap: 20px;
+  }
 }
 
 /* This will *NOT* work in IE */
 .grid.small-gap {
-    grid-gap: 20px;
+  grid-gap: 20px;
 }
 ```
 
 ```css
 .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 50px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: 50px;
 }
 
 /* This *WILL* work in IE */
 @media (max-width: 600px) {
-    .grid {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto;
-        grid-gap: 20px;
-    }
+  .grid {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+  }
 }
 
 /* This *WILL* work in IE */
 .grid.small-gap {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 20px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: 20px;
 }
 ```
 
@@ -1030,6 +1017,13 @@ Properties:
 JS API is also available:
 
 ```js
-var info = autoprefixer().info();
-console.log(info);
+console.log(autoprefixer().info())
 ```
+
+
+## Security Contact
+
+To report a security vulnerability, please use the [Tidelift security contact].
+Tidelift will coordinate the fix and disclosure.
+
+[Tidelift security contact]: https://tidelift.com/security