Update dependency autoprefixer to v10 #491

renovate · 2020-10-28T02:55:55Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
autoprefixer	`6.7.7` -> `10.4.20`

Release Notes

postcss/autoprefixer (autoprefixer)

`v10.4.20`

Compare Source

Fixed fit-content prefix for Firefox.

`v10.4.19`

Compare Source

Removed end value has mixed support, consider using flex-end warning
since end/start now have good support.

`v10.4.18`

Compare Source

Fixed removing -webkit-box-orient on -webkit-line-clamp (@Goodwine).

`v10.4.17`

Compare Source

Fixed user-select: contain prefixes.

`v10.4.16`

Compare Source

Improved performance (by Romain Menke).
Fixed docs (by Christian Oliff).

`v10.4.15`

Compare Source

Fixed ::backdrop prefixes (by 一丝).
Fixed docs (by Christian Oliff).

`v10.4.14`

Compare Source

Improved startup time and reduced JS bundle size (by Kārlis Gaņģis).

`v10.4.13`

Compare Source

Fixed missed prefixes on vendor prefixes in name of CSS Custom Property.

`v10.4.12`

Compare Source

Fixed support of unit-less zero angle in backgrounds (by 一丝).

`v10.4.11`

Compare Source

Fixed text-decoration prefixes by moving to MDN data (by Romain Menke).

`v10.4.10`

Compare Source

Fixed unicode-bidi prefixes by moving to MDN data.

`v10.4.9`

Compare Source

Fixed css-unicode-bidi issue from latest Can I Use.

`v10.4.8`

Compare Source

Do not print color-adjust warning if print-color-adjust also is in rule.

`v10.4.7`

Compare Source

Fixed print-color-adjust support in Firefox.

`v10.4.6`

Compare Source

Fixed print-color-adjust support.

`v10.4.5`

Compare Source

Fixed NaN in grid (by @SukkaW).

`v10.4.4`

Compare Source

Fixed package.funding to have same value between all PostCSS packages.

`v10.4.3`

Compare Source

Fixed package.funding (by Álvaro Mondéjar).

`v10.4.2`

Compare Source

Fixed missed -webkit- prefix for width: stretch.

`v10.4.1`

Compare Source

Fixed ::backdrop prefixes (by 一丝).
Fixed docs (by Christian Oliff).

`v10.4.0`: 10.4 “ǃke e꞉ ǀxarra ǁke”

Compare Source

In Autoprefixer 10.4 @lukewarlow added :autofill support:

input:-webkit-autofill {
  background-color: red;
}

input:autofill {
  background-color: red;
}

`v10.3.7`

Compare Source

Replaced nanocolors to picocolors.

`v10.3.6`

Compare Source

Updated nanocolors.
Reduced package size.

`v10.3.5`

Compare Source

Replaced colorette to nanocolors.

`v10.3.4`

Compare Source

Fixed stretch value in latest Firefox.

`v10.3.3`

Compare Source

Fixed wrong -moz- prefix from ::file-selector-button (by Usman Yunusov).

`v10.3.2`

Compare Source

Fixed ::file-selector-button support (by Usman Yunusov).

`v10.3.1`

Compare Source

Fixed adding wrong prefixes to content (by Luke Warlow).

`v10.3.0`: 10.3 “Чести своей не отдам никому”

Compare Source

In Autoprefixer 10.3 @lukewarlow added ::file-selector-button support.

::-webkit-file-upload-button {
  border: 2px solid #&#8203;6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
}

::file-selector-button {
  border: 2px solid #&#8203;6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
}

`v10.2.6`

Compare Source

Fixed “no prefixes needed” warning (by @Pwntheon).

`v10.2.5`

Compare Source

Fixed : support in @supports (by Dmitry Semigradsky).
Fixed docs (by Christian Oliff).

`v10.2.4`

Compare Source

Fixed browser names in npx autoprefixer --info.

`v10.2.3`

Compare Source

Fixed PostCSS 8 support.

`v10.2.2`

Compare Source

Fixed PostCSS 8 plugins compatibility.

`v10.2.1`

Compare Source

Fixed transition-property warnings (by @Sheraff).

`v10.2.0`: 10.2 “Sub rosa”

Compare Source

Autoprefixer 10.2 now has built-in TypeScript definitions. You do not need @types/autoprefixer anymore.

Thanks to @Semigradsky and DefinitelyTyped’s contributors.

@Sheraff also improved docs.

`v10.1.0`: 10.1 “Pula”

Compare Source

Autoprefixer 10.1 improved min-resolution support.

@infusion added dpcm unit support and num2fraction with Fraction.js, which uses Farey Sequences as a rational approximation (more precise) and simplifies the fraction using continued fractions to ɛ <0.001 afterward.

/* input */
@&#8203;media (min-resolution: 113.38dpcm) {
  …
}

/* output */
@&#8203;media (-webkit-min-device-pixel-ratio: 3),
       (min--moz-device-pixel-ratio: 3),
       (-o-min-device-pixel-ratio: 3/1),
       (min-resolution: 113.38dpcm) {
  …
}

`v10.0.4`

Compare Source

Fixed Cannot read property 'proxyOf' of undefined error (by Igor Kamyshev).

`v10.0.3`

Compare Source

Fixed substract to subtract value for mask-composite (by Michelle Enos).

`v10.0.2`

Compare Source

Removed -ms-user-select: all because IE and old Edge don’t support it.
Fixed Grid Layout warning.

`v10.0.1`

Compare Source

Fix PostCSS 8.1 compatability.
Add our OpenCollective to package.json.
Clean up code (by Sukka).

`v10.0.0`: 10.0 “Alis volat propriis”

Compare Source

Autoprefixer 10 is based on top of PostCSS 8 (check Known Issues section before updating).

Node.js 6.x, 8.x, 11.x support was removed.

Now you need to install Autoprefixer by npm install --save-dev autoprefixer postcss. We moved postcss from dependencies to peerDependencies according to new PostCSS plugin guidelines.

`v9.8.8`

Compare Source

Replaced nanocolors with picocolors.
Reduced package size.

`v9.8.7`

Compare Source

Replaced colorette with nanocolors.
Reduced package size.

`v9.8.6`

Compare Source

Fixed env option.

`v9.8.5`

Compare Source

Improved Grid Layout warnings (by Daniel Tonon).
Fixed align-self and justify-self with display: flex (by Daniel Tonon).

`v9.8.4`

Compare Source

Replace color output library.

`v9.8.3`

Compare Source

Return old non-LTS Node.js versions to avoid breaking changes.

`v9.8.2`

Compare Source

Remove Node.js 13.0-13.7 from supported engines, because of buggy ESM support.

`v9.8.1`

Compare Source

Replace chalk to kleur (by Luke Edwards).
Update docs (by @mbomb007).

`v9.8.0`: 9.8 “Vigilo Confido”

Compare Source

Autoprefixer 9.8 brings IE support for :placeholder-shown.

Placeholder Shown

@tkrotoff found that input:placeholder-shown can be emulated with input:-ms-input-placeholder.

input:-ms-input-placeholder {
  box-shadow: 0 0 0 1px blue;
}

input:placeholder-shown {
  box-shadow: 0 0 0 1px blue;
}

Note, that we already had support for ::placeholder. Selector ::placeholder is for the text of the placeholder. :placeholder-shown is for the input, where placeholder text is shown. In ::placeholder you can’t change the border or size of the <input>.

`v9.7.6`

Compare Source

Revert -webkit-stretch fix.

`v9.7.5`

Compare Source

Fix -webkit-stretch support.

`v9.7.4`

Compare Source

Fix warning text (by Dmitry Ishkov).

`v9.7.3`

Compare Source

Fix compatibility with PostCSS Modules.

`v9.7.2`

Compare Source

Add -ms-user-select: element support.
Add funding link for npm fund.

`v9.7.1`

Compare Source

Avoid unnecessary transitions in prefixed selectors (by Andrey Alexandrov).
Fix fit-content for Firefox.

`v9.7.0`: 9.7 “Ad Victoriam”

Compare Source

Autoprefixer 9.7 brings AUTOPREFIXER_GRID environment variable and huge performance improvments.

Grid Environment Variable

Autoprefixer can add CSS Grid polyfills for IE. You need to manually enable it to prove that you understand the limits of polyfill.

In previous versions you can enable Grid polyfill by grid: 'autoplace' option or by /* autoprefixer grid: autoplace */ control comment. But in some cases, developers were not able to use both methods. For instance, during work with Material UI’ CSS-in-JS in Create React App.

Now Autoprefixer supports environment variable to enable CSS Grid polyfill:

AUTOPREFIXER_GRID=autoplace npm build

Performance Improvements

@Knagis found that Browserslist takes 70% of the Autoprefixer time.

We did a lot of improvements in Browserslist and now Autoprefixer should work much faster.

Other

Fix Cannot read property 'grid' of undefined error

`v9.6.5`

Compare Source

Fix selector prefixing (by Andrey Alexandrov).

`v9.6.4`

Compare Source

Now the real fix for 'startsWith' of undefined error.

`v9.6.3`

Compare Source

Fix Cannot read property 'startsWith' of undefined error.

`v9.6.2`

Compare Source

Fix false Replace fill to stretch warning.

`v9.6.1`

Compare Source

Fix -webkit-line-clamp truncating multi-line text support.

`v9.6.0`: 9.6 “Nunc id vides, nunc ne vides”

Compare Source

Unseen University coat of arms by Damien Tonkin

Autoprefixer 9.6 marked browsers option as deprecated and added text-orientation and @media (min-resolution: 2x) support.

We added the “Sponsor” button to your repository. You can support Autoprefixer and other open source projects important for your business by Tidelift.

Browsers

Autoprefixer adds prefixes only for target browsers, browsers which is support on your project.

Initially, Autoprefixer had the browsers option to set target browsers. But we found that many tools need target browsers too. postcss-preset-env and babel-preset-env use them to add only actual polyfills, postcss-normalize uses them to add only necessary CSS reset rules, plugins for ESLint and Stylelint will warn you if some of the target browsers doesn’t support your code.

This is why we created Browserslist config file. It is a single config for all tools.

A lot of users still uses the browsers option. We understand them; it is hard to change old practice. Unfortunately, using the browsers option creates many problems. For instance, you can miss that your build tool has own Autoprefixer inside. It will cut your prefixes because it will not know about your target browsers.

This is why, in 9.6, we decided to deprecate the browsers option. Autoprefixer will show a warning on this option. In the next 10.0 release, we will drop this option. This is how you can migrate:

Create browserslist key with an array in package.json.
Copy queries from the browsers option. If you have browsers: [“last 1 version”, “not dead”], then you need:
```
   "browserslist": [
     "last 1 version",
     "not dead"
   ]
```

HiDPI Media Query

We all need to support HiDPI/retina screen now. Autoprefixer supports specific media query for HiDPI screens:

.image {
  background-image: url([email protected]);
}
@&#8203;media (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}

.image {
  background-image: url([email protected]);
}
@&#8203;media (-webkit-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}

Bug we found that CSS Values 4 spec added x alias for dppx.

Autoprefixer 9.6 supports @media (min-resolution: 2x) shortcut. Note, that Autoprefixer will not convert it to 2dppx. Autoprefixer adds only prefixes. Use postcss-preset-env to add polyfills.

Other

text-orientation property support was added.
@jmmarco added CONTRIBUTING.md

`v9.5.1`

Compare Source

Fix backdrop-filter for Edge (by Oleh Aloshkin).
Fix min-resolution media query support in Firefox < 16.

`v9.5.0`: 9.5 “Draco dormiens nunquam titillandus”

Compare Source

Autoprefixer 9.5 brings mask-composite support.

a {
  mask-composite: add;
}
b {
  mask: url(intersect.png) intersect, url(exclude.png);
}

a {
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
b {
  -webkit-mask: url(intersect.png), url(exclude.png);
  -webkit-mask-composite: source-in, xor;
          mask: url(intersect.png) intersect, url(exclude.png);
}

Thanks to @semeleven for implementation and @iamvdo for suggestion.

`v9.4.10`

Compare Source

Add warning for named Grid rows.

`v9.4.9`

Compare Source

Fix grid-template and @media case (by Bogdan Dolin).

`v9.4.8`

Compare Source

Fix calc() support in Grid gap.

`v9.4.7`

Compare Source

Fix infinite loop on mismatched parens.

`v9.4.6`

Compare Source

Fix warning text (by Albert Juhé Lluveras).

`v9.4.5`

Compare Source

Fix text-decoration-skip-ink support.

`v9.4.4`

Compare Source

Use direction value for -ms-writing-mode (by Denys Kniazevych).
Fix warning text (by @zzzzBov).

`v9.4.3`

Compare Source

Add warning to force flex-start instead of start (by Antoine du Hamel).
Fix docs (by Christian Oliff).

`v9.4.2`

Compare Source

Fix Grid autoplacement warning.

`v9.4.1`

Compare Source

Add warning for named Grid rows.

`v9.4.0`: 9.4 “Advance Australia”

Compare Source

Autoprefixer 9.4.0 brings limited autoplacement support to the IE CSS Grid.

Grid Autoplacement

If the grid option is set to "autoplace", limited autoplacement support is now added to the Autoprefixer CSS Grid translations. You can also use the /* autoprefixer grid: autoplace */ control comment to enable autoplacement directly in your CSS.

In order to use the new autoplacement feature, you must define both rows and columns when declaring the grid template.

/* Input CSS */

/* autoprefixer grid: autoplace */

.autoplacement-example {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 20px;
}

/* Output CSS */

/* 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;
}

.autoplacement-example > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.autoplacement-example > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.autoplacement-example > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.autoplacement-example > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

Autoplacement support in Autoprefixer is currently very limited in what it can do. Please read the Grid Autoplacement support in IE section before using this new feature.

Thanks to @bogdan0083 for implementing the new feature, @Dan503 for documenting it, and @evandiamond for coming up with the initial idea.

Other Changes

Remove some unnecessary warnings for Grid (by @fanich37).

`v9.3.1`

Compare Source

Fix Grid prefixes with repeat() value (by Bogdan Dolin).

`v9.3.0`: 9.3 “Labor omnia vincit”

Compare Source

Autoprefixer 9.3 brings place-self support for Grid Layout

`place-self`

@Dan503 and @bogdan0083 found a way to impement support for another Grid property

.grid > .center {
  place-self: center;
}

.grid > .center {
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
  place-self: center;
}

Other Changes

@Dan503 and @bogdan0083 also detected and fixed issue with Grid row/column span inheritance.

`v9.2.1`

Compare Source

Fix broken AST.

`v9.2.0`: 9.2 “Onyi est glavnaya krepost”

Compare Source

Autoprefixer 9.2 brings many new improvements for -ms- prefixes for Grid Layout.

New Ways to Enable/Disable Grid Layout

In previous versions, you had needed to pass grid: true to enable prefixes for Grid Layout. But not all users have access to Autoprefixer options. CodePen, Create Reat App or Angular CLI doesn’t allow you to do it.

In Autoprefixer 9.2 @fanich37 added special control comments:

/* autoprefixer grid: on */
.grid {
    display: grid;
    grid-gap: 33px;
    grid-template:
        "head head  head" 1fr
        "nav  main  main" minmax(100px, 1fr)
        "nav  foot  foot" 2fr /
        1fr   100px 1fr;
}

.non-ie .grid {
    /* autoprefixer grid: off */
    …
}

Autoprefixer doesn’t support Grid properties and values with auto. In 9.2 it will ignore whole @supports content if it contains these Grid properties:

@&#8203;supports (grid-auto-rows: 100px) {
    /* Autoprefixer will not show Grid warnings and will not add prefixes here */
}

Smarter `grid-area`

Autoprefixer supports grid-template even if it was not in IE Grid spec.

But in 9.2 @bogdan0083 really improve it according to @Dan503 idea. Now Autoprefixer supports even overriding grid-template.

/* autoprefixer grid: on */
.grid {
    display: grid;
    grid-template:
        "nav  main" minmax(100px, 1fr)
        "nav  foot" 2fr /
        100px 1fr;
}

.grid.no-menu {
    grid-template:
        "main" minmax(100px, 1fr)
        "foot" 2fr
}

Other Changes

Improve Grid warnings (by @Dan503 and @bogdan0083)
Improve docs (by @JoshuaHall, @Drarok, @revelt, and @janczer).

`v9.1.5`

Compare Source

Remove @babel/register from dependencies.

`v9.1.4`

Compare Source

Use Babel 7.

`v9.1.3`

Compare Source

Sort properties in autoprefixer --info alphabetically.
Fix old Firefox gradient prefix.

`v9.1.2`

Compare Source

Fix autoprefixer --info in new Node.js.

`v9.1.1`

Compare Source

Retain grid-gap through @media (by Bogdan Dolin).
Fix grid-template and @media (by Bogdan Dolin).
Fix Grid areas searching error (by Bogdan Dolin).
Fix span X Grid prefix (by Bogdan Dolin).
Fix docs (by Eduard Kyvenko).

`v9.1.0`: 9.1 “Equality before the law”

Compare Source

Autoprefixer 9.1 brings background-clip: text and fix span in IE Grid.

Background Clip

background-clip: text become to be the standard and got Edge support. So we added it to Autoprefixer:

.title {
  background: linear-gradient(yellow, red);
   -webkit-background-clip: text;
           background-clip: text;
}

Note, that Edge expect -webkit- prefix for this property.

Grid Layout Fix

@bogdan0083 fixed an issue when media-query override some grid-template.

`v9.0.2`

Compare Source

Show warning on Grid area names conflict (by Bogdan Dolin).
Fix documentation (by Sven Wagner).

`v9.0.1`

Compare Source

Fix nested at-rules in Grid prefixes (by Ivan Malov).

`v9.0.0`: 9.0 “A Mari Usque Ad Mare”

Compare Source

Autoprefixer 9.0 brings Browserslist 4.0 and drops Node.js 4 support.

Breaking Changes

We removed Node.js 4 and Node.js 9 support since it doesn’t have security updates anymore.

We removed IE and “dead” browsers (without security updates) from Babel’s targets. Don't worry, Autoprefixer still generate IE-compatible code. These changes affect websites which run Autoprefixer on client-side like CodePen.

last 2 version
not dead
not Explorer 11
not ExplorerMobile 11
node 10
node 8
node 6

Autoprefixer Rails 9.0 dropped the RubyRacer and Sprockets 3 support.

Browserslist 4.0

Autoprefixer 9.0 uses Browserslist 4.0 to get your target browsers.

Now you use Browserslist to specify Node.js versions. Babel 7 will use Browserslist config as well.

Also, Browserslist 4.0 will warn you if you didn’t update Can I Use DB for last than 6 month.

PostCSS 7.0

Autoprefixer 9.0 uses PostCSS 7.0

`v8.6.5`

Compare Source

Do not show Grid warnings if IE was not selected.

`v8.6.4`

Compare Source

Fix stretch prefix in Chrome >= 46.

`v8.6.3`

Compare Source

Add warnings for unsupported Grid features.
Add warnings about wrong Grid properties.
Add note about grid option for grid properties in autoprefixer --info.

`v8.6.2`

Compare Source

Fix error during adding Grid prefixes in @media (by Evgeny Petukhov).

`v8.6.1`

Compare Source

Fix grid-template with media queries (by Evgeny Petukhov).

`v8.6.0`: 8.6 “Follow Reason”

Compare Source

Emblem of the Grand Lodge of Massachusetts

Autoprefixer 8.6 brings gap property support and two values support for grid-gap/gap.

Grid Gap

CSSWG renamed grid-gap property to gap.

@yepninja added gap support with 2 values support.

Grid layout code bellow will work even in IE if you pass grid: true option to Autoprefixer:

.main {
    gap: 10px 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "head head head"
                         "nav main main"
                         "nav foot foot";
}

Other Changes

Add ignoreUnknownVersions option for Browserslist

`v8.5.2`

Compare Source

Fix grid-template support wit auto row sizes (by Yury Timofeev).

`v8.5.1`

Compare Source

Remove unnecessary warning on -webkit-fill-available.

`v8.5.0`: 8.5 “Muito Nobre e Sempre Leal”

Compare Source

Autoprefixer 8.5 brings grid-gap support and fix radial-gradient.

Grid Gap

@yepninja continues his amazing work of adding CSS Grid Layout support to Autoprefixer.

Now he brought grid-gap. It is amazing work since IE 11 has gaps support in -ms- grids.

To add grid-gap support for IE 11 Autoprefixer adds addition grid cells. Unfortunately, it will work only if you have grid-template in the same rule with grid-gap. We had big discussion with a community about these limits.

.page {
    grid-gap: 33px;
    -ms-grid-rows: 1fr 33px minmax(100px, 1fr) 33px 2fr;
    -ms-grid-columns: 1fr 33px 100px 33px 1fr;
    grid-template:
        "head head  head" 1fr
        "nav  main  main" minmax(100px, 1fr)
        "nav  foot  foot" 2fr /
        1fr   100px 1fr;
}

Set postcss-gap-properties before Autoprefixer if you want to use new gap property.

Radial Gradients

Old gradients with prefixes used a different direction syntax. Autoprefixer converts direction to old syntax (or warn you to rewrite direction from old to new syntax).

But it has an issue with extent keywords like circle closest-corner. We fixed it after @BaliBalo report.

.mask {
    -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, black, white);
            mask-image: radial-gradient(circle closest-corner at 100% 50%, black, white);
}

`v8.4.1`

Compare Source

Fix working in old PostCSS versions (by Diablohu).

`v8.4.0`: 8.4 “Non in aves, sed in angues”

Compare Source

Autoprefixer 8.4 brings new control comment to ignore next line.

@vostrik implemented the @levin-du’s idea of having control comment to disable only next property/rule:

.logo {
    /* autoprefixer: ignore next */
    user-select: none; /* ← ignored */
    mask: url(mask.jpg); /* ← will be prefixed */
}

/* autoprefixer: ignore next */
::placholder /* ← ignored */ {
    text-decoration-style: dotted; /* ← will be prefixed */
}

`v8.3.0`: 8.3 “Benigno Numine”

Compare Source

Autoprefixer 8.3 adds @media support for grid-template and fixes gradient direction warning.

Media and Grid Layout

@evgeny-petukhov continues his great work for Grid Layout support in Autoprefixer.

Now he improved @media support. Now this CSS will work in IE:

body {
    grid-template:
        [header-left] "head head" 30px [header-right]
        [main-left]   "nav  main" 1fr  [main-right]
        [footer-left] "nav  foot" 30px [footer-right]
        / 120px repeat(4, 250px 10px);
}

header {
    grid-area: head;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

@&#8203;media (min-width: 1000px) {
    body {
        grid-template:
            [header-left] "head" 30px [header-right]
            [main-left]   "main" 1fr  [main-right]
            [footer-left] "footer" 30px [footer-right]
            / 1fr;
    }
}

Don’t forget that Autoprefixer inserts Grid Layout prefixes only if you set grid: true option.

Gradient Warning

@radium-v found that Autoprefixer show warning even if cover is outside of radial-gradient.

a {
    background: radial-gradient(#fff, transparent) 0 0 / cover no-repeat #f0f;
}

@kotfire improve old direction detection and fix this issue.

`v8.2.0`: 8.2 “Ad Astra per Aspera”

Compare Source

Autoprefixer 8.2 brings color-adjust support.

@YozhikM, @soul-wish, and @yuriyalekseyev did a great work. They added new data to Can I Use and implemented a new feature to Autoprefixer.

body {
    -webkit-print-color-adjust: exact;
            color-adjust: exact;
}

`v8.1.0`: 8.1 “Rex, Familia et Ultio”

Compare Source

Autoprefixer 8.1 brings overscroll-behavior and better Grid support.

Overscroll Behavior

@Malvoz suggested the great idea to polyfill overscroll-behavior for IE 11 and Edge by -ms-scroll-chaining.

.none {
    -ms-scroll-chaining: none;
        overscroll-behavior: none;
}
.contain {
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
}
.auto {
    -ms-scroll-chaining: chained;
        overscroll-behavior: auto;
}

Note, that overscroll-behavior-x and overscroll-behavior-y are not supported since -ms- property doesn’t have this freedom.

Better Grid Layout

@evgeny-petukhov continues his amazing work and now Autoprefixer polyfills Grid Layout for IE in more cases.

He added grid-template shortcut support and improve support of grid-column-end and grid-row-end.

Grid properties were fixed in @supports. We recommend:

To select modern Grid browsers and IE 11: @supports (display: grid).
To select only Grid browsers without IE 11: @supports (grid-gap: 0).

Note, that you need grid: true option to Autoprefixer to add -ms- prefixes for Grid Layout.

`v8.0.0`: 8.0 “Excelsior”

Compare Source

Autoprefixer 8.0 uses Browserslist 3.0, has autoprefixer CLI tool instead of autoprefixer-info.

Browserslist 3.0

The main feature of Autoprefixer 8.0 is Browserslist 3.0. In the new version, it brings new default browsers. It will affect you only if you don’t change browsers by .browserslistrc or browserslist key in package.json (we don’t recommend to use browsers option).

In one hand, Browserslist 3.0 usage statistics limit for default browsers was reduced from >1% to >0.5%. In another hand, we remove dead browsers from default browsers. The dead browser is a browser with < than 1% in the global market and who don’t have security updates. Right now IE 10 and BlackBerry browser are dead browsers.

Read other notable changes in Browserslist 3.0 changelog. We recommend subscribing for @Browserslist twitter account.

CLI Tool

CLI tool to show target browsers and used prefixes was renamed to autoprefixer:

$ npx autoprefixer --info
Browsers:
  Edge: 16

These browsers account for 0.04% of all users globally

At-Rules:
  @&#8203;viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  user-select: ms
  hyphens: ms
  appearance: webkit
  scroll-snap-type: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  flow-into: ms
  flow-from: ms
  region-fragment: ms
  text-spacing: ms

With the new name, npx will install Autoprefixer automatically if it is missed in the current project.

Page Breaks for Firefox

Previous Autoprefixer versions replace break-* properties to page-break-* for Firefox.

But this feature didn’t add any vendor prefix. Autoprefixer goal is to take care only about prefixes, not polyfills. For better consistency, we removed this feature from Autoprefixer.

Don’t afraid, the PostCSS ecosystem has many plugins for CSS polyfills. We recommend to take look at postcss-preset-env to write future CSS today.

`v7.2.6`

Compare Source

Fix -ms- prefix for grid cells with same grid-area (by Evgeny Petukhov).

`v7.2.5`

Compare Source

Fix multiple prefixes in declaration value.

`v7.2.4`

Compare Source

Fix IE 10 support.

`v7.2.3`

Compare Source

Fix grid-template-areas in @media (by Evgeny Petukhov).

`v7.2.2`

Compare Source

Fix _autoprefixerDisabled is undefined issue.

`v7.2.1`

Compare Source

Fix IE and other old JS runtimes support.

`v7.2.0`: 7.2 “Ordem e Progresso”

Compare Source

Autoprefixer 7.2 brings better Grid support for IE
and autoprefixer-info CLI tool.

Grid Layout

With grid: true option Autoprefixer adds -ms- prefixes to Grid Layout properties. But this feature was very limited.

In 7.0 we dramatically improved Grid support for IE. @Alex7Kom added grid-area and improved grid-row and grid-column support. @evgeny-petukhov added grid-template-areas and grid-template support.

Even this complex emoji example will work with new Autoprefixer (output):

body {
    display: grid;
    grid-template-rows: 30px auto 30px;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "🎩 🎩"
                         "🍔 📰"
                         "👞 👞";
}
.header {
    grid-area: 🎩;
}
.nav {
    grid-area: 🍔;
}
.main {
    grid-area: 📰;
}
.footer {
    grid-area: 👞;
}

Just don’t forget to set grid: true option:

auoprefixer({ grid: true })

Info CLI Tool

Autoprefixer 7.2 ships with new CLI tool to check which browsers are selected and which properties will be prefixed.

Just go to your project directory and run npx autoprefixer-info:

Browsers:
  Edge: 16

These browsers account for 0.04% of all users globally

At-Rules:
  @&#8203;viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  user-select: ms
  hyphens: ms
  appearance: webkit
  scroll-snap-type: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  flow-into: ms
  flow-from: ms
  region-fragment: ms
  text-spacing: ms

Also, @pdokas added default value (current working dir) for from option in autoprefixer.info().

Other Changes

Add wrong radial-gradient properties warning.
Do not prefix reverse animation direction.
Improve test coverage (by @Semigradsky).

`v7.1.6`

Compare Source

Add warning for using browserslist option instead of browsers.
Add warning for multiple control comments in the same scope.
Fix Invalid array length error during indent changes.

`v7.1.5`

Compare Source

Fix ::placeholder prefix for Edge.
Fix inherit/initial/unset values for flex-direction.
Fix RegExp usage in gradients (by Yet Another Minion).

`v7.1.4`

Compare Source

Fix radial-gradient direction conversion.
Fix image-set in cursor.

`v7.1.3`

Compare Source

Add warning for old radial-gradient direction syntax.

`v7.1.2`

Compare Source

Fix text-decoration shortcut support.

`v7.1.1`

Compare Source

Remove non--webkit- intrinsic prefixes in Grid Layout (by 一丝).

[`v7.1.0`](

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

gitstream-cm · 2024-07-22T17:24:38Z

This PR is missing a Jira ticket reference in the title or description.
Please add a Jira ticket reference to the title or description of this PR.

gitstream-cm · 2024-07-22T17:24:48Z

🥷 Code experts: lauraluiz

lauraluiz has most 🧠 knowledge in the files.

See details

package-lock.json

Knowledge based on git-blame:
lauraluiz: 55%

package.json

Knowledge based on git-blame:
lauraluiz: 72%

To learn more about /:\ gitStream - Visit our Docs

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 0c7097f to 5c9da0c Compare November 27, 2020 23:57

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 5c9da0c to 3beb713 Compare December 10, 2020 09:59

renovate bot force-pushed the renovate/autoprefixer-10.x branch 2 times, most recently from 992d9f4 to 82089bb Compare January 9, 2021 17:51

renovate bot force-pushed the renovate/autoprefixer-10.x branch 2 times, most recently from 055f199 to 6c7c544 Compare January 31, 2021 11:52

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 6c7c544 to d713692 Compare April 26, 2021 16:02

renovate bot force-pushed the renovate/autoprefixer-10.x branch from d713692 to 28789c5 Compare June 6, 2021 19:46

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 28789c5 to e0e9513 Compare October 18, 2021 20:40

renovate bot force-pushed the renovate/autoprefixer-10.x branch from e0e9513 to 16b58e7 Compare March 7, 2022 17:48

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 16b58e7 to 3a7a939 Compare March 26, 2022 13:20

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 3a7a939 to 9e09234 Compare April 24, 2022 18:21

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 9e09234 to 70ba9f4 Compare May 15, 2022 20:31

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 70ba9f4 to d44807e Compare September 25, 2022 16:58

renovate bot force-pushed the renovate/autoprefixer-10.x branch from d44807e to ba8cd88 Compare November 20, 2022 21:41

renovate bot force-pushed the renovate/autoprefixer-10.x branch from ba8cd88 to b1fc14a Compare March 18, 2023 22:13

renovate bot force-pushed the renovate/autoprefixer-10.x branch from b1fc14a to 0e82e47 Compare August 13, 2023 16:11

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 0e82e47 to 32e046e Compare September 20, 2023 22:11

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 32e046e to 874315f Compare January 17, 2024 19:06

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 874315f to ad07c50 Compare March 1, 2024 19:20

renovate bot force-pushed the renovate/autoprefixer-10.x branch from ad07c50 to 28fc676 Compare March 21, 2024 01:23

gitstream-cm bot added the missing-jira label Jul 22, 2024

Update dependency autoprefixer to v10

c1cb2bd

renovate bot force-pushed the renovate/autoprefixer-10.x branch from 28fc676 to c1cb2bd Compare August 3, 2024 00:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependency autoprefixer to v10 #491

Update dependency autoprefixer to v10 #491

renovate bot commented Oct 28, 2020 •

edited

Loading

gitstream-cm bot commented Jul 22, 2024

gitstream-cm bot commented Jul 22, 2024

Update dependency autoprefixer to v10 #491

Are you sure you want to change the base?

Update dependency autoprefixer to v10 #491

Conversation

renovate bot commented Oct 28, 2020 • edited Loading

Release Notes

v10.4.0: 10.4 “ǃke e꞉ ǀxarra ǁke”

v10.3.0: 10.3 “Чести своей не отдам никому”

v10.2.0: 10.2 “Sub rosa”

v10.1.0: 10.1 “Pula”

v10.0.0: 10.0 “Alis volat propriis”

v9.8.0: 9.8 “Vigilo Confido”

Placeholder Shown

v9.7.0: 9.7 “Ad Victoriam”

Grid Environment Variable

Performance Improvements

Other

v9.6.0: 9.6 “Nunc id vides, nunc ne vides”

Browsers

HiDPI Media Query

Other

v9.5.0: 9.5 “Draco dormiens nunquam titillandus”

v9.4.0: 9.4 “Advance Australia”

Grid Autoplacement

Other Changes

v9.3.0: 9.3 “Labor omnia vincit”

place-self

Other Changes

v9.2.0: 9.2 “Onyi est glavnaya krepost”

New Ways to Enable/Disable Grid Layout

Smarter grid-area

Other Changes

v9.1.0: 9.1 “Equality before the law”

Background Clip

Grid Layout Fix

v9.0.0: 9.0 “A Mari Usque Ad Mare”

Breaking Changes

Browserslist 4.0

PostCSS 7.0

v8.6.0: 8.6 “Follow Reason”

Grid Gap

Other Changes

v8.5.0: 8.5 “Muito Nobre e Sempre Leal”

Grid Gap

Radial Gradients

v8.4.0: 8.4 “Non in aves, sed in angues”

v8.3.0: 8.3 “Benigno Numine”

Media and Grid Layout

Gradient Warning

v8.2.0: 8.2 “Ad Astra per Aspera”

v8.1.0: 8.1 “Rex, Familia et Ultio”

Overscroll Behavior

Better Grid Layout

v8.0.0: 8.0 “Excelsior”

Browserslist 3.0

CLI Tool

Page Breaks for Firefox

renovate bot commented Oct 28, 2020 •

edited

Loading

`v10.4.0`: 10.4 “ǃke e꞉ ǀxarra ǁke”

`v10.3.0`: 10.3 “Чести своей не отдам никому”

`v10.2.0`: 10.2 “Sub rosa”

`v10.1.0`: 10.1 “Pula”

`v10.0.0`: 10.0 “Alis volat propriis”

`v9.8.0`: 9.8 “Vigilo Confido”

`v9.7.0`: 9.7 “Ad Victoriam”

`v9.6.0`: 9.6 “Nunc id vides, nunc ne vides”

`v9.5.0`: 9.5 “Draco dormiens nunquam titillandus”

`v9.4.0`: 9.4 “Advance Australia”

`v9.3.0`: 9.3 “Labor omnia vincit”

`place-self`

`v9.2.0`: 9.2 “Onyi est glavnaya krepost”

Smarter `grid-area`

`v9.1.0`: 9.1 “Equality before the law”

`v9.0.0`: 9.0 “A Mari Usque Ad Mare”

`v8.6.0`: 8.6 “Follow Reason”

`v8.5.0`: 8.5 “Muito Nobre e Sempre Leal”

`v8.4.0`: 8.4 “Non in aves, sed in angues”

`v8.3.0`: 8.3 “Benigno Numine”

`v8.2.0`: 8.2 “Ad Astra per Aspera”

`v8.1.0`: 8.1 “Rex, Familia et Ultio”

`v8.0.0`: 8.0 “Excelsior”