Update dependency autoprefixer to v9.8.8 #59

renovate · 2023-03-25T05:29:11Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
autoprefixer	`9.3.1` -> `9.8.8`

Release Notes

postcss/autoprefixer

`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).

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 has been generated by Mend Renovate. View repository job log here.

renovate · 2023-03-25T05:29:12Z

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

Error response from daemon: toomanyrequests: You have reached your pull rate limit. You may increase the limit by authenticating and upgrading: https://www.docker.com/increase-rate-limit

Update dependency autoprefixer to v9.8.8

0ac6262

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependency autoprefixer to v9.8.8 #59

Update dependency autoprefixer to v9.8.8 #59

renovate bot commented Mar 25, 2023

renovate bot commented Mar 25, 2023

Update dependency autoprefixer to v9.8.8 #59

Are you sure you want to change the base?

Update dependency autoprefixer to v9.8.8 #59

Conversation

renovate bot commented Mar 25, 2023

Release Notes

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

Configuration

renovate bot commented Mar 25, 2023

⚠ Artifact update problem

File name: package-lock.json

`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”