hanzoai/autoprefixer
2
0
Fork 0
mirror of https://github.com/hanzoai/autoprefixer.git synced 2026-09-24 16:55:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace ESLint and Prettier to oxlint and oxfmt

Browse Source
This commit is contained in:
Andrey Sitnik
2026-04-13 20:19:00 +00:00
parent 8fa4fcafbb
commit 5b2bcf7fbc
22 changed files with 1414 additions and 2201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/CONTRIBUTING.md
+9 -14
View File
@@ -2,16 +2,14 @@
# Contributing to Autoprefixer
* [Filing Issues](#filing-issues)
* [Getting Started](#getting-started)
* [Adding a Prefix](#adding-a-prefix)
- [Filing Issues](#filing-issues)
- [Getting Started](#getting-started)
- [Adding a Prefix](#adding-a-prefix)
## Filing Issues
- If you have problems with the output CSS from Autoprefixer;
you’ll need to post:
you’ll need to post:
1. Input CSS.
2. Output CSS.
3. Expected output CSS.
@@ -20,7 +18,6 @@ you’ll need to post:
5. Run `npm ls | grep autoprefixer` and check output.
- If Autoprefixer throws error:
1. Input CSS.
2. Browserslist config.
3. Error stacktrace (copy and paste the error message that you get
@@ -28,22 +25,20 @@ you’ll need to post:
4. Run `npm ls | grep autoprefixer` and check output.
5. Run `npm ls | grep postcss` and check output.
## Getting Started
Before you begin contributing make sure you have a [GitHub account].
* [Fork the repository](https://github.com/postcss/autoprefixer)
* Clone a copy of it to your computer:
- [Fork the repository](https://github.com/postcss/autoprefixer)
- Clone a copy of it to your computer:
`git clone https://github.com/USERNAME/autoprefixer` (replace `USERNAME`
to your GitHub name).
* Ensure that you have the [pnpm](https://pnpm.io/) package manager
- Ensure that you have the [pnpm](https://pnpm.io/) package manager
installed.
* Run `pnpm install` this will install all dependencies needed to run tests.
- Run `pnpm install` this will install all dependencies needed to run tests.
[GitHub account]: https://github.com/signup/free
## Adding a Prefix
We’ll explain how would you go about adding a CSS feature to Autoprefixer.
@@ -69,7 +64,7 @@ on [Can I use](https://caniuse.com/).
```
3. If the prefix is simple (`-webkit-` for Safari, `-moz-` for Firefox,
all use the same syntax) go to step 8.
all use the same syntax) go to step 8.
4. If you need some non-standard behavior for the prefix (`-webkit-` prefix
for Firefox or different syntax for different browsers) you will need
.npmignore
-1
View File
@@ -3,5 +3,4 @@ coverage/
logo.svg
AUTHORS
eslint.config.mjs
patches
.prettierrc.js
+3
View File
@@ -0,0 +1,3 @@
import loguxOxfmtConfig from '@logux/oxc-configs/fmt'
export default loguxOxfmtConfig
CHANGELOG.md
+867 -599
View File
File diff suppressed because it is too large Load Diff
README.md
+146 -170
View File
@@ -46,54 +46,53 @@ Twitter account for news and releases: [@autoprefixer].
</a>
[interactive demo]: https://autoprefixer.github.io/
[@autoprefixer]: https://twitter.com/autoprefixer
[Can I Use]: https://caniuse.com/
[cult-img]: https://cultofmartians.com/assets/badges/badge.svg
[PostCSS]: https://github.com/postcss/postcss
[cult]: https://cultofmartians.com/tasks/autoprefixer-grid.html
[@autoprefixer]: https://twitter.com/autoprefixer
[Can I Use]: https://caniuse.com/
[cult-img]: https://cultofmartians.com/assets/badges/badge.svg
[PostCSS]: https://github.com/postcss/postcss
[cult]: https://cultofmartians.com/tasks/autoprefixer-grid.html
## Contents
* [Contents](#contents)
* [Browsers](#browsers)
* [FAQ](#faq)
* [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie)
* [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)
* [How to work with legacy `-webkit-` only code?](#how-to-work-with-legacy--webkit--only-code)
* [Does Autoprefixer add `-epub-` prefix?](#does-autoprefixer-add--epub--prefix)
* [Why doesn’t Autoprefixer transform generic font-family `system-ui`?](#why-doesnt-autoprefixer-transform-generic-font-family-system-ui)
* [Usage](#usage)
* [Gulp](#gulp)
* [Webpack](#webpack)
* [CSS-in-JS](#css-in-js)
* [CLI](#cli)
* [Other Build Tools](#other-build-tools)
* [Preprocessors](#preprocessors)
* [GUI Tools](#gui-tools)
* [JavaScript](#javascript)
* [Text Editors and IDE](#text-editors-and-ide)
* [Warnings](#warnings)
* [Disabling](#disabling)
* [Prefixes](#prefixes)
* [Features](#features)
* [Control Comments](#control-comments)
* [Options](#options)
* [Environment Variables](#environment-variables)
* [Using environment variables to support CSS Grid prefixes in Create React App](#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app)
* [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie)
* [Beware of enabling autoplacement in old projects](#beware-of-enabling-autoplacement-in-old-projects)
* [Autoplacement limitations](#autoplacement-limitations)
* [Both columns and rows must be defined](#both-columns-and-rows-must-be-defined)
* [Repeat auto-fit and auto-fill are not supported](#repeat-auto-fit-and-auto-fill-are-not-supported)
* [No manual cell placement or column/row spans allowed inside an autoplacement grid](#no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid)
* [Do not create `::before` and `::after` pseudo elements](#do-not-create-before-and-after-pseudo-elements)
* [When changing the `grid gap` value, columns and rows must be re-declared](#when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared)
* [Debug](#debug)
* [Security Contact](#security-contact)
* [For Enterprise](#for-enterprise)
- [Contents](#contents)
- [Browsers](#browsers)
- [FAQ](#faq)
- [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie)
- [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)
- [How to work with legacy `-webkit-` only code?](#how-to-work-with-legacy--webkit--only-code)
- [Does Autoprefixer add `-epub-` prefix?](#does-autoprefixer-add--epub--prefix)
- [Why doesn’t Autoprefixer transform generic font-family `system-ui`?](#why-doesnt-autoprefixer-transform-generic-font-family-system-ui)
- [Usage](#usage)
- [Gulp](#gulp)
- [Webpack](#webpack)
- [CSS-in-JS](#css-in-js)
- [CLI](#cli)
- [Other Build Tools](#other-build-tools)
- [Preprocessors](#preprocessors)
- [GUI Tools](#gui-tools)
- [JavaScript](#javascript)
- [Text Editors and IDE](#text-editors-and-ide)
- [Warnings](#warnings)
- [Disabling](#disabling)
- [Prefixes](#prefixes)
- [Features](#features)
- [Control Comments](#control-comments)
- [Options](#options)
- [Environment Variables](#environment-variables)
- [Using environment variables to support CSS Grid prefixes in Create React App](#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app)
- [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie)
- [Beware of enabling autoplacement in old projects](#beware-of-enabling-autoplacement-in-old-projects)
- [Autoplacement limitations](#autoplacement-limitations)
- [Both columns and rows must be defined](#both-columns-and-rows-must-be-defined)
- [Repeat auto-fit and auto-fill are not supported](#repeat-auto-fit-and-auto-fill-are-not-supported)
- [No manual cell placement or column/row spans allowed inside an autoplacement grid](#no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid)
- [Do not create `::before` and `::after` pseudo elements](#do-not-create-before-and-after-pseudo-elements)
- [When changing the `grid gap` value, columns and rows must be re-declared](#when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared)
- [Debug](#debug)
- [Security Contact](#security-contact)
- [For Enterprise](#for-enterprise)
## Browsers
@@ -111,11 +110,10 @@ that the config can be shared with other tools such as [babel-preset-env] and
See [Browserslist docs] for queries, browser names, config format, and defaults.
[Browserslist docs]: https://github.com/browserslist/browserslist#queries
[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
[Best Practices]: https://github.com/browserslist/browserslist#best-practices
[Browserslist]: https://github.com/browserslist/browserslist
[Stylelint]: https://stylelint.io/
[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
[Best Practices]: https://github.com/browserslist/browserslist#best-practices
[Browserslist]: https://github.com/browserslist/browserslist
[Stylelint]: https://stylelint.io/
## FAQ
@@ -139,17 +137,17 @@ Third, there is only very limited auto placement support. Read the
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`.
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;
'head head head' 1fr
'nav main main' minmax(100px, 1fr)
'nav foot foot' 2fr /
1fr 100px 1fr;
}
.page__head {
grid-area: head;
@@ -167,16 +165,15 @@ to use Autoprefixer is by using `grid-template` or `grid-template-areas`.
See also:
* [The guide about Grids in IE and Autoprefixer].
* [`postcss-gap-properties`] to use new `gap` property
- [The guide about Grids in IE and Autoprefixer].
- [`postcss-gap-properties`] to use new `gap` property
instead of old `grid-gap`.
* [`postcss-grid-kiss`] has alternate “everything in one property” syntax,
- [`postcss-grid-kiss`] has alternate “everything in one property” syntax,
which makes using Autoprefixer’s Grid translations safer.
[The guide about Grids in IE and Autoprefixer]: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
[`postcss-gap-properties`]: https://github.com/jonathantneal/postcss-gap-properties
[`postcss-grid-kiss`]: https://github.com/sylvainpolletvillard/postcss-grid-kiss
[`postcss-gap-properties`]: https://github.com/jonathantneal/postcss-gap-properties
[`postcss-grid-kiss`]: https://github.com/sylvainpolletvillard/postcss-grid-kiss
### Does it add polyfills?
@@ -195,9 +192,8 @@ you might take a look at:
- [postcss-flexbugs-fixes], a PostCSS plugin to fix flexbox issues.
[postcss-flexbugs-fixes]: https://github.com/luisrudge/postcss-flexbugs-fixes
[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
[Oldie]: https://github.com/jonathantneal/oldie
[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
[Oldie]: https://github.com/jonathantneal/oldie
### Why doesn’t Autoprefixer add prefixes to `border-radius`?
@@ -207,13 +203,11 @@ required on [Can I Use].
[Can I Use]: https://caniuse.com/
### Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?
Browser teams can remove some prefixes before others, so we try to use all
combinations of prefixed/unprefixed values.
### How to work with legacy `-webkit-` only code?
Autoprefixer needs unprefixed property to add prefixes. So if you only
@@ -225,7 +219,6 @@ Use [postcss-unprefix] before Autoprefixer.
[postcss-unprefix]: https://github.com/gucong3000/postcss-unprefix
### Does Autoprefixer add `-epub-` prefix?
No, Autoprefixer works only with browsers prefixes from Can I Use.
@@ -233,7 +226,6 @@ But you can use [postcss-epub] for prefixing ePub3 properties.
[postcss-epub]: https://github.com/Rycochet/postcss-epub
### Why doesn’t Autoprefixer transform generic font-family `system-ui`?
`system-ui` is technically not a prefix and the transformation is not
@@ -242,7 +234,6 @@ future-proof. You can use [postcss-font-family-system-ui] to transform
[postcss-font-family-system-ui]: https://github.com/JLHwung/postcss-font-family-system-ui
## Usage
### Gulp
@@ -255,9 +246,10 @@ gulp.task('autoprefixer', () => {
const sourcemaps = require('gulp-sourcemaps')
const postcss = require('gulp-postcss')
return gulp.src('./src/*.css')
return gulp
.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer() ]))
.pipe(postcss([autoprefixer()]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'))
})
@@ -266,10 +258,9 @@ gulp.task('autoprefixer', () => {
With `gulp-postcss` you also can combine Autoprefixer
with [other PostCSS plugins].
[gulp-postcss]: https://github.com/postcss/gulp-postcss
[gulp-postcss]: https://github.com/postcss/gulp-postcss
[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
### Webpack
In [webpack] you can use [postcss-loader] with `autoprefixer`
@@ -281,7 +272,7 @@ module.exports = {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
@@ -292,16 +283,13 @@ And create a `postcss.config.js` with:
```js
module.exports = {
plugins: [
require('autoprefixer')
]
plugins: [require('autoprefixer')]
}
```
[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
[postcss-loader]: https://github.com/postcss/postcss-loader
[webpack]: https://webpack.js.org/
[postcss-loader]: https://github.com/postcss/postcss-loader
[webpack]: https://webpack.js.org/
### CSS-in-JS
@@ -314,11 +302,11 @@ module.exports = {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
use: ['style-loader', 'postcss-loader']
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
use: ['babel-loader', 'astroturf/loader']
}
]
}
@@ -329,15 +317,12 @@ Then create `postcss.config.js`:
```js
module.exports = {
plugins: [
require('autoprefixer')
]
plugins: [require('autoprefixer')]
}
```
[`astroturf`]: https://github.com/4Catalyzer/astroturf
### CLI
You can use the [postcss-cli] to run Autoprefixer from CLI:
@@ -351,43 +336,39 @@ See `postcss -h` for help.
[postcss-cli]: https://github.com/postcss/postcss-cli
### Other Build Tools
* **Grunt:** [grunt-postcss]
* **Ruby on Rails**: [autoprefixer-rails]
* **Neutrino**: [neutrino-middleware-postcss]
* **Jekyll**: add `autoprefixer-rails` and `jekyll-assets` to `Gemfile`
* **Brunch**: [postcss-brunch]
* **Broccoli**: [broccoli-postcss]
* **Middleman**: [middleman-autoprefixer]
* **Mincer**: add `autoprefixer` npm package and enable it:
- **Grunt:** [grunt-postcss]
- **Ruby on Rails**: [autoprefixer-rails]
- **Neutrino**: [neutrino-middleware-postcss]
- **Jekyll**: add `autoprefixer-rails` and `jekyll-assets` to `Gemfile`
- **Brunch**: [postcss-brunch]
- **Broccoli**: [broccoli-postcss]
- **Middleman**: [middleman-autoprefixer]
- **Mincer**: add `autoprefixer` npm package and enable it:
`environment.enable('autoprefixer')`
[neutrino-middleware-postcss]: https://www.npmjs.com/package/neutrino-middleware-postcss
[middleman-autoprefixer]: https://github.com/middleman/middleman-autoprefixer
[autoprefixer-rails]: https://github.com/ai/autoprefixer-rails
[broccoli-postcss]: https://github.com/jeffjewiss/broccoli-postcss
[postcss-brunch]: https://github.com/iamvdo/postcss-brunch
[grunt-postcss]: https://github.com/C-Lodder/grunt-postcss
[middleman-autoprefixer]: https://github.com/middleman/middleman-autoprefixer
[autoprefixer-rails]: https://github.com/ai/autoprefixer-rails
[broccoli-postcss]: https://github.com/jeffjewiss/broccoli-postcss
[postcss-brunch]: https://github.com/iamvdo/postcss-brunch
[grunt-postcss]: https://github.com/C-Lodder/grunt-postcss
#### Preprocessors
* **Less**: [less-plugin-autoprefix]
* **Stylus**: [autoprefixer-stylus]
* **Compass**: [autoprefixer-rails#compass]
- **Less**: [less-plugin-autoprefix]
- **Stylus**: [autoprefixer-stylus]
- **Compass**: [autoprefixer-rails#compass]
[less-plugin-autoprefix]: https://github.com/less/less-plugin-autoprefix
[autoprefixer-stylus]: https://github.com/jenius/autoprefixer-stylus
[autoprefixer-rails#compass]: https://github.com/ai/autoprefixer-rails#compass
[autoprefixer-stylus]: https://github.com/jenius/autoprefixer-stylus
[autoprefixer-rails#compass]: https://github.com/ai/autoprefixer-rails#compass
#### GUI Tools
* [CodeKit](https://codekitapp.com/help/autoprefixer/)
* [Prepros](https://prepros.io)
- [CodeKit](https://codekitapp.com/help/autoprefixer/)
- [Prepros](https://prepros.io)
### JavaScript
@@ -398,12 +379,14 @@ or if you want to develop an Autoprefixer plugin for a new environment.
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
postcss([ autoprefixer ]).process(css).then(result => {
result.warnings().forEach(warn => {
console.warn(warn.toString())
postcss([autoprefixer])
.process(css)
.then(result => {
result.warnings().forEach(warn => {
console.warn(warn.toString())
})
console.log(result.css)
})
console.log(result.css)
})
```
There is also a [standalone build] for the browser or for a non-Node.js runtime.
@@ -411,9 +394,8 @@ There is also a [standalone build] for the browser or for a non-Node.js runtime.
You can use [html-autoprefixer] to process HTML with inlined CSS.
[html-autoprefixer]: https://github.com/RebelMail/html-autoprefixer
[standalone build]: https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js
[PostCSS]: https://github.com/postcss/postcss
[standalone build]: https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js
[PostCSS]: https://github.com/postcss/postcss
### Text Editors and IDE
@@ -427,19 +409,18 @@ and automation.
If you can’t move to a build tool, you can use text editor plugins:
* [Visual Studio Code](https://github.com/mrmlnc/vscode-autoprefixer)
* [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer)
- [Visual Studio Code](https://github.com/mrmlnc/vscode-autoprefixer)
- [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer)
[Parcel]: https://parceljs.org/
## Warnings
Autoprefixer uses the [PostCSS warning API] to warn about really important
problems in your CSS:
* Old direction syntax in gradients.
* Old unprefixed `display: box` instead of `display: flex`
- Old direction syntax in gradients.
- Old unprefixed `display: box` instead of `display: flex`
by latest specification version.
You can get warnings from `result.warnings()`:
@@ -454,7 +435,6 @@ Every Autoprefixer runner should display these warnings.
[PostCSS warning API]: https://postcss.org/api/#warning
## Disabling
### Prefixes
@@ -474,18 +454,17 @@ If some prefixes were generated incorrectly, please create an [issue on GitHub].
[issue on GitHub]: https://github.com/postcss/autoprefixer/issues
### Features
You can use these plugin options to control some of Autoprefixer’s features.
* `grid: "autoplace"` will enable `-ms-` prefixes for Grid Layout including some
- `grid: "autoplace"` will enable `-ms-` prefixes for Grid Layout including some
[limited autoplacement support](#grid-autoplacement-support-in-ie).
* `supports: false` will disable `@supports` parameters prefixing.
* `flexbox: false` will disable flexbox properties prefixing.
- `supports: false` will disable `@supports` parameters prefixing.
- `flexbox: false` will disable flexbox properties prefixing.
Or `flexbox: "no-2009"` will add prefixes only for final and IE
versions of specification.
* `remove: false` will disable cleaning outdated prefixes.
- `remove: false` will disable cleaning outdated prefixes.
You should set them inside the plugin like so:
@@ -493,7 +472,6 @@ You should set them inside the plugin like so:
autoprefixer({ grid: 'autoplace' })
```
### Control Comments
If you do not need Autoprefixer in some part of your CSS,
@@ -518,16 +496,16 @@ you can use control comments to disable Autoprefixer.
There are three types of control comments:
* `/* autoprefixer: (on|off) */`: enable/disable all Autoprefixer translations for the
whole block both *before* and *after* the comment.
* `/* autoprefixer: ignore next */`: disable Autoprefixer only for the next property
- `/* autoprefixer: (on|off) */`: enable/disable all Autoprefixer translations for the
whole block both _before_ and _after_ the comment.
- `/* autoprefixer: ignore next */`: disable Autoprefixer only for the next property
or next rule selector or at-rule parameters (but not rule/at‑rule body).
* `/* autoprefixer grid: (autoplace|no-autoplace|off) */`: control how Autoprefixer handles
- `/* 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:
@@ -555,7 +533,6 @@ block twice:
}
```
## Options
Function `autoprefixer(options)` returns a new PostCSS plugin.
@@ -567,36 +544,36 @@ autoprefixer({ cascade: false })
Available options are:
* `env` (string): environment for Browserslist.
* `cascade` (boolean): should Autoprefixer use Visual Cascade,
- `env` (string): environment for Browserslist.
- `cascade` (boolean): should Autoprefixer use Visual Cascade,
if CSS is uncompressed. Default: `true`
* `add` (boolean): should Autoprefixer add prefixes. Default is `true`.
* `remove` (boolean): should Autoprefixer [remove outdated] prefixes.
- `add` (boolean): should Autoprefixer add prefixes. Default is `true`.
- `remove` (boolean): should Autoprefixer [remove outdated] prefixes.
Default is `true`.
* `supports` (boolean): should Autoprefixer add prefixes for `@supports`
- `supports` (boolean): should Autoprefixer add prefixes for `@supports`
parameters. Default is `true`.
* `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
- `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
properties. With `"no-2009"` value Autoprefixer will add prefixes only
for final and IE 10 versions of specification. Default is `true`.
* `grid` (false|`"autoplace"`|`"no-autoplace"`): should Autoprefixer
- `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`
- `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.
* `overrideBrowserslist` (array): list of queries for target browsers.
- `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
- `ignoreUnknownVersions` (boolean): do not raise error on unknown browser
version in Browserslist config. Default is `false`.
Plugin object has `info()` method for debugging purpose.
@@ -605,16 +582,16 @@ You can use PostCSS processor to process several CSS files
to increase performance.
[usage statistics]: https://github.com/browserslist/browserslist#custom-usage-data
[PostCSS API]: https://postcss.org/api/
[PostCSS API]: https://postcss.org/api/
## Environment Variables
* `AUTOPREFIXER_GRID`: (`autoplace`|`no-autoplace`) should Autoprefixer
- `AUTOPREFIXER_GRID`: (`autoplace`|`no-autoplace`) should Autoprefixer
add IE 10-11 prefixes for Grid Layout properties?
* `autoplace`: enable Autoprefixer grid translations
and *include* autoplacement support.
* `no-autoplace`: enable Autoprefixer grid translations
but *exclude* autoplacement support.
- `autoplace`: enable Autoprefixer grid translations
and _include_ autoplacement support.
- `no-autoplace`: enable Autoprefixer grid translations
but _exclude_ autoplacement support.
Environment variables are useful, when you want to change Autoprefixer options but don't have access to config files.
[Create React App] is a good example of this.
@@ -861,7 +838,7 @@ 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))
grid-template-columns: repeat(auto-fit, min-max(200px, 1fr));
}
```
@@ -903,10 +880,10 @@ If manual cell placement is required, we recommend using `grid-template` or
display: grid;
grid-gap: 30px;
grid-template:
"head head"
"nav main" minmax(100px, 1fr)
"foot foot" /
200px 1fr;
'head head'
'nav main' minmax(100px, 1fr)
'foot foot' /
200px 1fr;
}
.page__head {
grid-area: head;
@@ -967,7 +944,6 @@ This will be the output:
-ms-grid-column: 1;
}
.grid > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
eslint.config.mjs
-27
View File
@@ -1,27 +0,0 @@
import loguxConfig from '@logux/eslint-config'
export default [
{
ignores: ['coverage']
},
...loguxConfig,
{
rules: {
'n/prefer-node-protocol': 'off',
'no-console': 'off'
}
},
{
files: ['bin/autoprefixer'],
rules: {
'n/global-require': 'off',
'n/no-unsupported-features/es-syntax': 'off'
}
},
{
files: ['data/prefixes.js'],
rules: {
'import/order': 'off'
}
}
]
lib/autoprefixer.d.ts
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
import { Plugin } from 'postcss'
import { Stats } from 'browserslist'
import { Plugin } from 'postcss'
declare function autoprefixer<T extends string[]>(
...args: [...T, autoprefixer.Options]
lib/hacks/gradient.js
+2 -2
View File
@@ -4,7 +4,7 @@ let OldValue = require('../old-value')
let utils = require('../utils')
let Value = require('../value')
let IS_DIRECTION = /top|left|right|bottom/gi
const IS_DIRECTION = /top|left|right|bottom/gi
class Gradient extends Value {
/**
@@ -229,7 +229,7 @@ class Gradient extends Value {
nodes[0].value = this.normalizeUnit(nodes[0].value, 1)
} else if (nodes[0].value.includes('deg')) {
let num = parseFloat(nodes[0].value)
num = (num % 360 + 360) % 360
num = ((num % 360) + 360) % 360
nodes[0].value = `${num}deg`
}
lib/hacks/grid-utils.js
+1 -1
View File
@@ -164,7 +164,7 @@ function prefixTrackValue({ gap, value }) {
// Parse grid-template-areas
let DOTS = /^\.+$/
const DOTS = /^\.+$/
function track(start, end) {
return { end, span: end - start, start }
lib/prefixes.js
+2 -2
View File
@@ -192,7 +192,7 @@ class Prefixes {
return true
}
if (step === +1 && other.prop === unprefixed) {
if (step === 1 && other.prop === unprefixed) {
if (!Browsers.withPrefix(other.value)) {
break
}
@@ -206,7 +206,7 @@ class Prefixes {
return {
down(callback) {
return checker(+1, callback)
return checker(1, callback)
},
up(callback) {
return checker(-1, callback)
lib/processor.js
+12 -11
View File
@@ -35,6 +35,17 @@ function hasRowsAndColumns(decl) {
return hasRows && hasColumns
}
function insideGrid(decl) {
return decl.parent.nodes.some(node => {
if (node.type !== 'decl') return false
let displayGrid =
node.prop === 'display' && /(inline-)?grid/.test(node.value)
let gridTemplate = node.prop.startsWith('grid-template')
let gridGap = /^grid-([A-z]+-)?gap/.test(node.prop)
return displayGrid || gridTemplate || gridGap
})
}
class Processor {
constructor(prefixes) {
this.prefixes = prefixes
@@ -84,17 +95,6 @@ class Processor {
})
})
function insideGrid(decl) {
return decl.parent.nodes.some(node => {
if (node.type !== 'decl') return false
let displayGrid =
node.prop === 'display' && /(inline-)?grid/.test(node.value)
let gridTemplate = node.prop.startsWith('grid-template')
let gridGap = /^grid-([A-z]+-)?gap/.test(node.prop)
return displayGrid || gridTemplate || gridGap
})
}
let gridPrefixes =
this.gridStatus(css, result) &&
this.prefixes.add['grid-area'] &&
@@ -586,6 +586,7 @@ class Processor {
let parts = decl.raw('before').split('\n')
let prevMin = parts[parts.length - 1].length
/** @type {number|false} */
let diff = false
this.prefixes.group(decl).down(other => {
lib/transition.js
+1 -1
View File
@@ -320,7 +320,7 @@ class Transition {
nodes = nodes.slice(1)
}
if (nodes[nodes.length - 1].type === 'div') {
nodes = nodes.slice(0, +-2 + 1 || undefined)
nodes = nodes.slice(0, -1)
}
return parser.stringify({ nodes })
}
oxfmt.config.ts
+6
View File
@@ -0,0 +1,6 @@
import loguxOxfmtConfig from '@logux/oxc-configs/fmt'
export default {
...loguxOxfmtConfig,
ignorePatterns: ['test/cases/*.css']
}
oxlint.config.ts
+23
View File
@@ -0,0 +1,23 @@
import loguxOxlintConfig from '@logux/oxc-configs/lint'
import { defineConfig } from 'oxlint'
export default defineConfig({
extends: [loguxOxlintConfig],
rules: {
'unicorn/no-array-sort': 'off',
'unicorn/no-array-reverse': 'off',
'typescript/no-base-to-string': 'off',
'typescript/consistent-type-imports': 'off',
'typescript/restrict-template-expressions': 'off',
'no-console': 'off',
'new-cap': 'off'
},
overrides: [
{
files: ['*.d.ts'],
rules: {
'typescript/consistent-type-imports': 'off'
}
}
]
})
package.json
+31 -36
View File
@@ -2,26 +2,19 @@
"name": "autoprefixer",
"version": "10.4.27",
"description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
"engines": {
"node": "^10 || ^12 || >=14"
},
"keywords": [
"autoprefixer",
"css",
"prefix",
"postcss",
"postcss-plugin"
"postcss-plugin",
"prefix"
],
"scripts": {
"unit": "uvu . '\\.test\\.js$'",
"test:coverage": "c8 node node_modules/uvu/bin.js . '\\.test\\.js$'",
"test:lint": "eslint . bin/*",
"test:size": "size-limit",
"test": "pnpm run /^test:/"
"bugs": {
"url": "https://github.com/postcss/autoprefixer/issues"
},
"main": "lib/autoprefixer.js",
"bin": "bin/autoprefixer",
"types": "lib/autoprefixer.d.ts",
"license": "MIT",
"author": "Andrey Sitnik <[email protected]>",
"repository": "postcss/autoprefixer",
"funding": [
{
"type": "opencollective",
@@ -36,14 +29,15 @@
"url": "https://github.com/sponsors/ai"
}
],
"author": "Andrey Sitnik <[email protected]>",
"license": "MIT",
"repository": "postcss/autoprefixer",
"bugs": {
"url": "https://github.com/postcss/autoprefixer/issues"
},
"peerDependencies": {
"postcss": "^8.1.0"
"bin": "bin/autoprefixer",
"main": "lib/autoprefixer.js",
"types": "lib/autoprefixer.d.ts",
"scripts": {
"unit": "uvu . '\\.test\\.js$'",
"test:coverage": "c8 node node_modules/uvu/bin.js . '\\.test\\.js$'",
"test:lint": "oxlint . bin/*",
"test:size": "size-limit",
"test": "pnpm run /^test:/"
},
"dependencies": {
"browserslist": "^4.28.1",
@@ -53,24 +47,22 @@
"postcss-value-parser": "^4.2.0"
},
"devDependencies": {
"@logux/eslint-config": "^57.0.2",
"@logux/oxc-configs": "^0.3.3",
"@size-limit/preset-small-lib": "12.0.0",
"actions-up": "^1.12.0",
"c8": "^11.0.0",
"clean-publish": "^6.0.3",
"eslint": "^10.0.2",
"eslint-plugin-prefer-let": "^4.2.2",
"nanospy": "^1.0.0",
"oxlint": "^1.59.0",
"oxlint-tsgolint": "^0.20.0",
"postcss": "^8.5.6",
"size-limit": "^12.0.0",
"typescript": "^6.0.2",
"uvu": "^0.5.6"
},
"prettier": {
"arrowParens": "avoid",
"jsxSingleQuote": false,
"quoteProps": "consistent",
"semi": false,
"singleQuote": true,
"trailingComma": "none"
"peerDependencies": {
"postcss": "^8.1.0"
},
"size-limit": [
{
@@ -78,24 +70,27 @@
}
],
"c8": {
"check-coverage": true,
"clean": true,
"exclude": [
"test/*"
],
"lines": 100,
"check-coverage": true,
"reporter": [
"text",
"lcov"
],
"skip-full": true,
"clean": true
"skip-full": true
},
"clean-publish": {
"cleanDocs": true
"engines": {
"node": "^10 || ^12 || >=14"
},
"pnpm": {
"patchedDependencies": {
"[email protected]": "patches/[email protected]"
}
},
"clean-publish": {
"cleanDocs": true
}
}
pnpm-lock.yaml
Generated
+300 -1321
View File
File diff suppressed because it is too large Load Diff
test/at-rule.test.js
+1 -3
View File
@@ -7,9 +7,7 @@ let AtRule = require('../lib/at-rule')
test('adds prefixes', () => {
let keyframes = new AtRule('@keyframes', ['-moz-', '-ms-'])
let css = parse(
'@-moz-keyframes b {} ' + '@-ms-keyframes a {} ' + '@keyframes a {}'
)
let css = parse('@-moz-keyframes b {} @-ms-keyframes a {} @keyframes a {}')
keyframes.process(css.last)
equal(
css.toString(),
test/autoprefixer.test.js
+1 -2
View File
@@ -1131,8 +1131,7 @@ test('ignores values for CSS3PIE props', () => {
})
test('add prefix for backface-visibility for Safari 9', () => {
let input =
'a{ ' + 'backface-visibility: hidden; ' + 'transform-style: preserve-3d }'
let input = 'a{ backface-visibility: hidden; transform-style: preserve-3d }'
let ap = autoprefixer({
flexbox: false,
overrideBrowserslist: ['Safari 9']
test/declaration.test.js
+1 -1
View File
@@ -52,7 +52,7 @@ test('returns before with cascade', () => {
})
test('removes cascade', () => {
let css = parse('a {\n' + ' -moz-tab-size: 4;\n' + ' tab-size: 4 }')
let css = parse('a {\n -moz-tab-size: 4;\n tab-size: 4 }')
let decl = css.first.nodes[1]
tabsize.restoreBefore(decl)
equal(decl.raws.before, '\n ')
test/old-selector.test.js
+2 -2
View File
@@ -13,7 +13,7 @@ test('returns true on last rule', () => {
})
test('stops on another type', () => {
let css = parse('::-moz-selection {} ' + '@keyframes anim {} ::selection {}')
let css = parse('::-moz-selection {} @keyframes anim {} ::selection {}')
is(old.isHack(css.first), true)
})
@@ -23,7 +23,7 @@ test('stops on another selector', () => {
})
test('finds unprefixed selector', () => {
let css = parse('::-moz-selection {} ' + '::-o-selection {} ::selection {}')
let css = parse('::-moz-selection {} ::-o-selection {} ::selection {}')
is(old.isHack(css.first), false)
})
test/prefixes.test.js
+2 -2
View File
@@ -145,7 +145,7 @@ test('checks prefix group', () => {
})
test('checks prefix groups', () => {
let css = parse('a { -ms-a: 1; -o-a: 1; ' + 'a: -o-calc(1); a: 1; a: 2 }')
let css = parse('a { -ms-a: 1; -o-a: 1; a: -o-calc(1); a: 1; a: 2 }')
let props = []
empty.group(css.first.first).down(i => props.push(i.prop))
@@ -175,7 +175,7 @@ test('checks prefix group', () => {
})
test('checks prefix groups', () => {
let css = parse('a { a: 2; -ms-a: 1; ' + '-o-a: 1; a: -o-calc(1); a: 1 }')
let css = parse('a { a: 2; -ms-a: 1; -o-a: 1; a: -o-calc(1); a: 1 }')
let props = []
empty.group(css.first.nodes[4]).up(i => props.push(i.prop))
test/selector.test.js
+3 -5
View File
@@ -27,9 +27,7 @@ test('creates regexp without prefix', () => {
})
test('checks rule selectors', () => {
let css = parse(
'body .selection {}, ' + ':::selection {}, body ::selection {}'
)
let css = parse('body .selection {}, :::selection {}, body ::selection {}')
is(selector.check(css.nodes[0]), false)
is(selector.check(css.nodes[1]), false)
is(selector.check(css.nodes[2]), true)
@@ -74,7 +72,7 @@ test('returns false on first element', () => {
})
test('stops on another type', () => {
let css = parse('::-moz-selection {} ' + '@keyframes anim {} ::selection {}')
let css = parse('::-moz-selection {} @keyframes anim {} ::selection {}')
is(selector.already(css.nodes[2], prefixeds, '-moz-'), false)
})
@@ -84,7 +82,7 @@ test('stops on another selector', () => {
})
test('finds prefixed even if unknown prefix is between', () => {
let css = parse('::-moz-selection {} ' + '::-o-selection {} ::selection {}')
let css = parse('::-moz-selection {} ::-o-selection {} ::selection {}')
is(selector.already(css.nodes[2], prefixeds, '-moz-'), true)
})