### Browserslist Configuration Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Example of how to configure target browsers using Browserslist syntax in a .browserslistrc file or package.json.

```text
> 0.5%      // More than 0.5% global usage
last 2 versions  // Last 2 versions of all browsers
not dead    // Skip unsupported browsers
```

--------------------------------

### Prefix Data Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Illustrates the prefix data format with examples for 'display', 'transform', and 'placeholder' prefixes.

```javascript
{
  'display': {
    browsers: [
      'ios_saf 12.2',
      'chrome 20',
      'firefox 20',
      // ... more versions
    ],
    props: ['display'],
    selector: false
  },
  'transform': {
    browsers: [
      'chrome 26',
      'firefox 16',
      'ie 9',
      // ...
    ],
    props: ['transform'],
    selector: false
  },
  'placeholder': {
    browsers: [
      'ie 10',
      'firefox 19',
      // ...
    ],
    selector: true,
    props: undefined
  }
}
```

--------------------------------

### Install Autoprefixer and cross-env

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Install the necessary packages for managing environment variables with Autoprefixer. This includes Autoprefixer itself and the cross-env utility.

```bash
npm install autoprefixer@latest cross-env --save-dev
```

--------------------------------

### Getting Autoprefixer Plugin Info

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Demonstrates how to instantiate the Autoprefixer plugin and use its `info()` method to get details about the selected browsers and prefixed properties.

```javascript
const autoprefixer = require('autoprefixer')

// Get plugin with current options
const plugin = autoprefixer()

// Get formatted info about selected browsers
console.log(plugin.info())
// Output:
// Browsers:
//   Chrome: 100, 99, 98
//   Firefox: 100, 99
//   Safari: 15
//
// These browsers account for 45.28% of all users globally
//
// Properties:
//   appearance: webkit
//   transform: webkit, moz
```

--------------------------------

### Install Autoprefixer via npm

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Install Autoprefixer using npm. This is the first step for integrating Autoprefixer into your project.

```bash
npm install autoprefixer
```

--------------------------------

### Prefix Data Structure Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/types.md

Illustrates the structure of prefix data accessed via `autoprefixer.data.prefixes`. Shows examples for 'display' property prefixing and a placeholder selector.

```javascript
const data = autoprefixer.data.prefixes

// Display property prefixing
{
  'display': {
    'browsers': [
      'ios_saf 12.2',
      'chrome 20',
      'firefox 20'
    ],
    'props': ['display'],
    'selector': false
  }
}

// Placeholder selector
{
  'placeholder': {
    'browsers': [
      'chrome 57',
      'firefox 51'
    ],
    'selector': true
  }
}
```

--------------------------------

### Browser Data Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Provides examples of browser data, showing default prefixes and specific exceptions for browsers like Internet Explorer.

```javascript
{
  chrome: {
    prefix: 'webkit',
  },
  firefox: {
    prefix: 'moz',
  },
  ie: {
    prefix: 'ms',
    prefix_exceptions: {
      '5.5': 'mso',
      '6': 'ms'
    }
  },
  safari: {
    prefix: 'webkit',
  }
}
```

--------------------------------

### Add Prefixes to CSS (Basic)

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Basic example of using Autoprefixer with PostCSS to add vendor prefixes to CSS. Requires 'autoprefixer' and 'postcss' to be installed.

```javascript
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

postcss([autoprefixer()]).process(css).then(result => {
  console.log(result.css)
})
```

--------------------------------

### PostCSS @media AtRule Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Specific example of a PostCSS @media AtRule node, highlighting its parameters and child rules.

```javascript
{
  type: 'atrule',
  name: 'media',
  params: '(min-width: 768px)',
  nodes: [<Rule>, ...]
}
```

--------------------------------

### CSS with Autoprefixer Added Prefixes

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Example of CSS after Autoprefixer has processed it, showing added vendor prefixes for compatibility.

```css
::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}
```

--------------------------------

### PostCSS @supports AtRule Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Specific example of a PostCSS @supports AtRule node, showing its parameters and child rules.

```javascript
{
  type: 'atrule',
  name: 'supports',
  params: '(display: flex)',
  nodes: [<Rule>, ...]
}
```

--------------------------------

### CLI Usage of Autoprefixer

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Install Autoprefixer and postcss-cli, then use the npx command to process CSS files and output them to a build directory.

```sh
npm install postcss postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/
```

--------------------------------

### CSS Grid Autoplacement Example (Input)

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

This CSS input demonstrates how to enable Autoprefixer's grid autoplacement support using a control comment. It sets up a basic grid layout.

```css
/* autoprefixer grid: autoplace */

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

--------------------------------

### Selector Prefix Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Illustrates how Autoprefixer handles selector prefixes, such as for the '::placeholder' pseudo-element, by creating additional rules with prefixed selectors.

```css
::placeholder { color: red; }
→ ::-webkit-input-placeholder { color: red; }
→ ::-moz-placeholder { color: red; }
→ ::placeholder { color: red; }
```

--------------------------------

### Autoprefixer BrowserData Structure Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/types.md

Illustrates the structure of browser compatibility data accessed via `autoprefixer.data.browsers`. Shows prefix and version-specific prefix exceptions.

```javascript
const autoprefixer = require('autoprefixer')
const data = autoprefixer.data.browsers

// Example: Chrome browser
{
  chrome: {
    prefix: 'webkit',
    // chrome has uniform -webkit- prefix across versions
  }
}

// Example: IE browser with version-specific prefixes
{
  ie: {
    prefix: 'ms',
    prefix_exceptions: {
      '5.5': 'mso',
      '6': 'ms'
    }
  }
}
```

--------------------------------

### CSS @supports Rule Prefixing Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Illustrates how the `supports` option prefixes `@supports` rule parameters to ensure cross-browser compatibility for feature queries.

```css
/* Input */
@supports (display: flex) {
  .flex { display: flex; }
}

/* Output (with supports: true) */
@supports (-webkit-flex) {
  .flex { display: -webkit-flex; }
}
@supports (display: flex) {
  .flex { display: flex; }
}
```

--------------------------------

### Accessing Autoprefixer Warnings

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/warnings-and-errors.md

This snippet shows how to process CSS with Autoprefixer and log any warnings generated during the process. Ensure PostCSS and Autoprefixer are installed.

```javascript
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

postcss([autoprefixer()])
  .process(css, { from: 'input.css' })
  .then(result => {
    result.warnings().forEach(warn => {
      console.warn(warn.toString())
    })
  })
```

--------------------------------

### Autoprefixer JS API Info

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Demonstrates how to get Autoprefixer information using its JavaScript API.

```js
console.log(autoprefixer().info())
```

--------------------------------

### Property Prefix Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Illustrates a CSS declaration where the property name itself requires a vendor prefix, such as '-webkit-transform'.

```css
transform: rotate(45deg);
→ -webkit-transform: rotate(45deg);
```

--------------------------------

### Add Prefixes to CSS (With Options)

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Example of adding prefixes to CSS using Autoprefixer with specific options like 'cascade' and 'grid'.

```javascript
postcss([
  autoprefixer({
    cascade: false,
    grid: 'autoplace'
  })
]).process(css)
```

--------------------------------

### PostCSS AtRule Node Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Shows the structure of a PostCSS AtRule node, including its name, parameters, and potential child nodes.

```javascript
{
  type: 'atrule',
  name: 'keyframes',
  params: 'slide',
  raws: { before: '\n' },
  parent: <Root>,
  nodes: [
    <Rule>,
    // ...
  ]
}
```

--------------------------------

### Value Prefix Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Demonstrates a CSS declaration where a value within a property requires a vendor prefix, like '-webkit-linear-gradient'.

```css
background: linear-gradient(red, blue);
→ background: -webkit-linear-gradient(red, blue);
```

--------------------------------

### CSS Grid Autoplacement Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Demonstrates enabling IE 10-11 CSS Grid prefixes with autoplacement support, which generates `nth-child` selectors for cell positioning.

```css
/* Input with grid: 'autoplace' */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

/* Output */
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

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

.grid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
/* ... etc ... */
```

--------------------------------

### CSS Prefix Removal Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/prefixing-guide.md

Shows how Autoprefixer removes outdated prefixes based on browser targets.

```css
/* Input (targeting modern browsers) */
.box {
  -moz-transform: scale(2);    /* Not needed for Firefox > 16 */
  -ms-transform: scale(2);      /* Not needed (IE dead) */
  -webkit-transform: scale(2);
  transform: scale(2);
}

/* Output (with modern browser targets) */
.box {
  -webkit-transform: scale(2);
  transform: scale(2);
}
```

--------------------------------

### PostCSS Comment Node Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Illustrates the structure of a PostCSS Comment node, including its text content.

```javascript
{
  type: 'comment',
  text: 'autoprefixer: off',
  raws: { before: '\n' }
}
```

--------------------------------

### CSS Grid Layout Example

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

This CSS demonstrates how to use Grid Layout with Autoprefixer, including grid-gap and grid-template properties. It's important to note that Autoprefixer's Grid polyfill has limitations and is disabled by default.

```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;
}
.page__head {
  grid-area: head;
}
.page__nav {
  grid-area: nav;
}
.page__main {
  grid-area: main;
}
.page__footer {
  grid-area: foot;
}
```

--------------------------------

### JavaScript Configuration for Prefix Removal

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/prefixing-guide.md

Example of disabling prefix removal using Autoprefixer configuration.

```javascript
autoprefixer({ remove: false })
```

--------------------------------

### Get Autoprefixer Info

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

Retrieve a formatted string describing selected browsers and applied prefixes. Can be used with default settings or a specific path for context.

```javascript
const autoprefixer = require('autoprefixer')

// Get default info
console.log(autoprefixer.info())

// With specific path
console.log(autoprefixer().info({ from: '/path/to/project' }))
```

--------------------------------

### CSS Grid Autoplacement Example (Output)

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

This CSS output shows the result of Autoprefixer processing the input CSS with grid autoplacement enabled. It includes IE-specific prefixes and nth-child selectors for autoplacement.

```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;
}
```

--------------------------------

### JavaScript Configuration for @supports Prefixing

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/prefixing-guide.md

Example of disabling @supports at-rule prefixing using Autoprefixer configuration.

```javascript
autoprefixer({ supports: false })
```

--------------------------------

### PostCSS Declaration Node Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Shows the structure of a PostCSS Declaration node, including property, value, and raw formatting details.

```javascript
{
  type: 'decl',
  prop: 'transform',
  value: 'rotate(45deg)',
  raws: {
    before: '  ',
    between: ': ',
    semicolon: true
  },
  parent: <Rule>,
  source: {
    input: <Input>,
    start: { line: 5, column: 3 },
    end: { line: 5, column: 30 }
  }
}
```

--------------------------------

### Property and Value Prefix Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Shows a CSS declaration where both the property name ('display') and its value ('flex') require vendor prefixes, leading to multiple prefixed versions.

```css
display: flex;
→ display: -webkit-flex;
→ display: -webkit-box;
```

--------------------------------

### CSS Cascade Formatting Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Demonstrates how the `cascade` option affects the visual alignment of prefixed properties in uncompressed CSS.

```css
/* cascade: true */
.example {
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
      transform: scale(2);
}

/* cascade: false */
.example {
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}
```

--------------------------------

### Get Autoprefixer Info

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Retrieves and logs information about the selected browsers, their global usage, and the CSS properties that will be prefixed.

```javascript
const autoprefixer = require('autoprefixer')

console.log(autoprefixer.info())
// Browsers:
//   Chrome: 100, 99
//   Firefox: 100, 99
//   Safari: 15
//
// These browsers account for 45.28% of all users globally
//
// Properties:
//   appearance: webkit
//   transform: webkit, moz
```

--------------------------------

### PostCSS Rule Node Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Illustrates the structure of a PostCSS Rule node, containing selectors and child nodes (declarations).

```javascript
{
  type: 'rule',
  selector: '.box, .item',
  raws: {
    before: '\n\n',
    between: ' '
  },
  parent: <Root>,
  nodes: [
    <Declaration>,
    <Declaration>,
    // ...
  ]
}
```

--------------------------------

### Get All Vendor Prefixes

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Retrieves all vendor prefixes defined in the browser data. Results are cached on the first call.

```javascript
const prefixes = Browsers.prefixes()
// ['-webkit-', '-moz-', '-ms-', '-o-', '-khtml-']
```

--------------------------------

### Basic Autoprefixer API Usage with PostCSS

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Directly use the Autoprefixer API with PostCSS to process CSS. This example reads CSS from a file, processes it, and writes the output to another file, including source maps.

```javascript
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const fs = require('fs')

const css = fs.readFileSync('input.css', 'utf-8')

postcss([autoprefixer()])
  .process(css, { from: 'input.css', to: 'output.css' })
  .then(result => {
    fs.writeFileSync('output.css', result.css)
    
    if (result.map) {
      fs.writeFileSync('output.css.map', result.map.toString())
    }
  })
```

--------------------------------

### Grunt-PostCSS Configuration with Options

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Customize Autoprefixer behavior within Grunt-PostCSS by passing options to the plugin. This example disables the cascade and sets the grid option.

```javascript
postcss: {
  options: {
    processors: [
      require('autoprefixer')({
        cascade: false,
        grid: 'autoplace'
      })
    ]
  },
  dist: {
    src: 'src/**/*.css',
    dest: 'dist/'
  }
}
```

--------------------------------

### JavaScript Integration with PostCSS

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Use Autoprefixer within a Node.js application by processing CSS through PostCSS. This example demonstrates how to handle warnings and output the processed CSS.

```javascript
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)
  })
```

--------------------------------

### Autoprefixer API Usage with Source Maps

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Configure PostCSS with Autoprefixer to generate source maps. This example explicitly sets source map options for inline and annotation generation.

```javascript
postcss([autoprefixer()])
  .process(css, {
    from: 'input.css',
    to: 'output.css',
    map: {
      inline: false,
      annotation: true
    }
  })
  .then(result => {
    fs.writeFileSync('output.css', result.css)
    fs.writeFileSync('output.css.map', result.map)
  })
```

--------------------------------

### GitHub Actions Workflow for CSS Prefixing

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

This workflow automates CSS prefixing using Autoprefixer as part of a GitHub Actions CI/CD pipeline. It checks out the code, sets up Node.js, installs dependencies, builds CSS, and verifies changes.

```yaml
name: CSS Prefixing

on: [push, pull_request]

jobs:
  css:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build:css
      - name: Check for changes
        run: git diff --exit-code dist/
```

--------------------------------

### PostCSS Result Interface Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/types.md

Demonstrates how to use the `result.warn()` method to add warnings to the PostCSS processing result. This is used in methods like Processor.add() and Processor.remove().

```javascript
result.warn('Replace color-adjust to print-color-adjust', { node: decl })
```

--------------------------------

### Get Vendor Prefix for Browser

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Retrieves the specific vendor prefix associated with a browser version. For example, 'chrome 100' maps to '-webkit-'.

```javascript
browsers.prefix('chrome 100')   // '-webkit-'
browsers.prefix('firefox 100')  // '-moz-'
browsers.prefix('ie 11')        // '-ms-'
```

--------------------------------

### autoprefixer.info([options])

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

Returns a formatted string describing which browsers are selected and what prefixes will be applied based on the provided options.

```APIDOC
## autoprefixer.info([options])

### Description
Returns a formatted string describing which browsers are selected and what prefixes will be applied.

### Method
`info`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### options (object) - Optional
Options object to configure the info output.
- **from** (string) - Optional - Path context for Browserslist config resolution. Defaults to the current working directory.

### Returns
`string` — formatted info about selected browsers and prefixes

### Example
```javascript
const autoprefixer = require('autoprefixer')

// Get default info
console.log(autoprefixer.info())

// With specific path
console.log(autoprefixer().info({ from: '/path/to/project' }))
```
```

--------------------------------

### Build with Autoprefixer using npm run build

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Execute the build process, which will automatically use the Autoprefixer configuration. This command is typically used in conjunction with a build tool.

```bash
# Webpack, Vite, Parcel auto-detect postcss.config.js
npm run build
```

--------------------------------

### Autoprefixer Configuration Options

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Demonstrates three ways to specify configuration for Autoprefixer: using an options object, a browser list, or a combination of both.

```javascript
autoprefixer({ cascade: false, grid: 'autoplace' })
```

```javascript
autoprefixer(['> 1%', 'last 2 versions'])
```

```javascript
autoprefixer(['> 1%'], { cascade: false })
```

--------------------------------

### Get prefixed property name

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Use this method to get the vendor-prefixed version of a CSS property. Provide the unprefixed property name and the desired vendor prefix.

```javascript
prefixes.prefixed('transform', '-webkit-')  // '-webkit-transform'
```

--------------------------------

### Get unprefixed property name

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Use this method to get the canonical unprefixed property name, which also handles aliases. Pass the potentially prefixed property name as input.

```javascript
prefixes.unprefixed('-webkit-flex-direction')  // 'flex-flow'
```

--------------------------------

### esbuild Configuration with esbuild-plugin-postcss and Autoprefixer

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Set up esbuild for bundling with `esbuild-plugin-postcss` and Autoprefixer. This configuration processes CSS during the build process.

```javascript
const postcss = require('esbuild-plugin-postcss')
const autoprefixer = require('autoprefixer')

require('esbuild').build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    })
  ]
}).catch(() => process.exit(1))
```

--------------------------------

### Autoprefixer with Options Object

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

Illustrates initializing Autoprefixer with an options object for fine-grained control over its behavior, such as disabling cascade or enabling specific grid features. This is useful for customizing prefixing logic.

```javascript
postcss([
  autoprefixer({
    overrideBrowserslist: ['> 1%', 'last 2 versions'],
    cascade: false,
    grid: 'autoplace'
  })
]).process(css).then(result => {
  console.log(result.css)
})
```

--------------------------------

### Autoprefixer Info Command

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Shows how to use the npx autoprefixer --info command to inspect browser selections and prefixed properties.

```console
$ npx autoprefixer --info
Browsers:
  Edge: 16

These browsers account for 0.26% of all users globally

At-Rules:
  @viewport: ms

Selectors:
  ::placeholder: ms

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

--------------------------------

### Configure Autoprefixer Inline in Webpack

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Example of configuring Autoprefixer inline within Webpack's loader options.

```javascript
{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [['autoprefixer', { grid: 'autoplace' }]]
    }
  }
}
```

--------------------------------

### Using the Autoprefixer Module

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Demonstrates how to import and use the `processCss` function from the Autoprefixer module. This is part of the module pattern for CSS processing.

```javascript
const { processCss } = require('./process-css')

async function build() {
  const css = await processCss(sourceCSS, 'input.css')
  // Do something with css
}
```

--------------------------------

### CSS Grid with Pseudo-elements

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Demonstrates how Autoprefixer handles CSS grid layouts with ::before and ::after pseudo-elements, highlighting differences in IE and modern browsers.

```html
<div class="grid">
  <div class="grid-cell"></div>
</div>
```

```css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.grid::before {
  content: 'before';
}

.grid::after {
  content: 'after';
}
```

```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;
}

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

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

.grid::before {
  content: 'before';
}

.grid::after {
  content: 'after';
}
```

--------------------------------

### Next.js PostCSS Configuration with Options

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Provide Autoprefixer options within the Next.js configuration in next.config.js.

```javascript
module.exports = {
  plugins: {
    autoprefixer: {
      cascade: false,
      grid: 'autoplace'
    }
  }
}
```

--------------------------------

### PostCSS Configuration with Options

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Configure Autoprefixer with specific options like cascade, flexbox, and grid settings in postcss.config.js.

```javascript
module.exports = {
  plugins: [
    require('autoprefixer')({
      cascade: false,
      flexbox: 'no-2009',
      grid: 'autoplace'
    })
  ]
}
```

--------------------------------

### JavaScript for Accessing Autoprefixer Warnings

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/prefixing-guide.md

Demonstrates how to access and log warnings generated by Autoprefixer.

```javascript
result.warnings().forEach(warn => {
  console.warn(warn.toString())
})
```

--------------------------------

### Minimal/Aggressive Configuration

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Use a minimal configuration that only removes modern prefixes without adding new ones. This approach focuses on cleaning up unnecessary prefixes rather than adding new ones.

```javascript
autoprefixer({
  remove: false,   // Keep all old prefixes
  add: false       // Only remove modern ones
})
```

--------------------------------

### Autoprefixer with Mixed Arguments

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

Demonstrates using Autoprefixer with a combination of a browser list and an options object. This overload provides flexibility when you need to set specific browsers and customize behavior simultaneously.

```javascript
postcss([
  autoprefixer(['last 2 versions'], { cascade: false })
]).process(css)
```

--------------------------------

### Get Autoprefixer Defaults

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

Access the default Browserslist queries used by Autoprefixer. This array defines the default browser support targets.

```javascript
const autoprefixer = require('autoprefixer')
console.log(autoprefixer.defaults)
// Output: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead']
```

--------------------------------

### Gulp Configuration with Source Maps

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Configure gulpfile.js to process CSS with Autoprefixer and generate source maps.

```javascript
const gulp = require('gulp')
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
const autoprefixer = require('autoprefixer')

function css() {
  return gulp.src('src/**/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'))
}

exports.css = css
```

--------------------------------

### Node Metadata Cache Example

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Lists the internal metadata properties cached on PostCSS nodes by the processor to avoid recalculating decisions for the same node.

```javascript
// Cached on declaration nodes
node._autoprefixerDisabled     // Is prefixing disabled?
node._autoprefixerGridStatus   // Grid mode for this node?
node._autoprefixerCascade      // Should cascade?
node._autoprefixerMax          // Max prefix length?
node._autoprefixerValues       // Prefixed values cache?
```

--------------------------------

### Rollup Configuration with rollup-plugin-postcss and Autoprefixer

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Configure Rollup to use `rollup-plugin-postcss` with Autoprefixer. This setup bundles JavaScript and processes CSS, applying autoprefixing.

```javascript
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    })
  ]
}
```

--------------------------------

### Calculating Browser Coverage Percentage

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Demonstrates how to use the `browserslist.coverage()` function with the plugin's browser list to calculate the global user coverage percentage.

```javascript
const autoprefixer = require('autoprefixer')
const browserslist = require('browserslist')

const plugin = autoprefixer()

// Get coverage percentage
const coverage = browserslist.coverage(
  plugin.browsers
)
console.log(`${coverage.toFixed(2)}% of users`)
```

--------------------------------

### Basic PostCSS Configuration

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Use this basic configuration in your postcss.config.js file to enable Autoprefixer.

```javascript
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
```

--------------------------------

### AUTOPREFIXER_GRID Environment Variable Usage

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/types.md

Example of setting the AUTOPREFIXER_GRID environment variable to control grid processing behavior. This setting overrides the `options.grid` configuration.

```bash
AUTOPREFIXER_GRID=autoplace npm run build
```

--------------------------------

### IE Grid Autoprefixer Solution

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Demonstrates how Autoprefixer generates nth-child selectors to simulate grid autoplacement for IE 10-11, which has a different grid implementation than the standard.

```css
.grid > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; }
.grid > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; }
/* ... */
```

--------------------------------

### Get value prefixes for a property

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Retrieves value transformers for a given CSS property. Specify whether to add or remove prefixes and the property name.

```javascript
const values = prefixes.values('add', 'display')
// Array of value transformers for display values
```

--------------------------------

### Browserslist Configuration File (.browserslistrc)

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Define browser targets using a dedicated .browserslistrc file. This is the recommended approach for better tooling integration and maintainability.

```text
> 0.5%
last 2 versions
not dead
not IE 11
```

--------------------------------

### PostCSS Integration with Autoprefixer

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Integrate Autoprefixer as a standard PostCSS plugin. This snippet shows the basic setup for processing CSS with Autoprefixer and other PostCSS plugins.

```javascript
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
```

```javascript
postcss([
  autoprefixer(options)
]).process(css, { from, to })
```

--------------------------------

### PostCSS Configuration with Other Plugins

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Integrate Autoprefixer alongside other PostCSS plugins like postcss-import and cssnano in postcss.config.js.

```javascript
module.exports = {
  plugins: [
    require('postcss-import'),
    require('autoprefixer'),
    require('cssnano')({
      preset: ['default', { discardComments: { removeAll: true } }]
    })
  ]
}
```

--------------------------------

### Get Old Prefixed Value for Removal

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Retrieves the old prefixed value, typically used for removal purposes. This is part of the Value class's functionality.

```javascript
old(prefix)
```

--------------------------------

### autoprefixer()

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

The main entry point function that creates a PostCSS plugin for adding vendor prefixes to CSS. It can be called with options only, with a browsers list and options, or with variable arguments.

```APIDOC
## autoprefixer()

### Description
The main entry point function that creates a PostCSS plugin for adding vendor prefixes to CSS.

### Function Signature
```javascript
autoprefixer(...args): Plugin & ExportedAPI
```

### Overloads

**1. With options only:**
```javascript
autoprefixer(options?: Options): Plugin & ExportedAPI
```

**2. With browsers list and options:**
```javascript
autoprefixer(browsers: string[], options?: Options): Plugin & ExportedAPI
```

**3. With variable arguments:**
```javascript
autoprefixer(...args: [...T, Options]): Plugin & ExportedAPI
```

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `browsers` | string \| string[] | No | — | Browser targets as Browserslist queries. If not provided, reads from `.browserslistrc` or `package.json` `browserslist` field. Example: `['> 1%', 'last 2 versions']` |
| `options` | [Options](#options-interface) | No | `{}` | Configuration object for Autoprefixer behavior |

### Options Interface

Passed as the first or final argument to `autoprefixer()`.

| Key | Type | Required | Default | Description |
|---|---|---|---|---|
| `env` | string | No | — | Environment name for Browserslist to use when selecting config section. Example: `'production'` or `'development'` |
| `cascade` | boolean | No | `true` | Enable visual cascade formatting of prefixed properties when CSS is uncompressed (aligns prefix indentation). Only applies when `add` is not `false` |
| `add` | boolean | No | `true` | Enable adding vendor prefixes to CSS rules |
| `remove` | boolean | No | `true` | Enable removal of outdated vendor prefixes that are no longer needed for target browsers |
| `supports` | boolean | No | `true` | Enable prefixing of `@supports` at-rule parameters (e.g., `@supports (display: flex)` → `@supports (display: -webkit-flex)`) |
| `flexbox` | boolean \| `'no-2009'` | No | `true` | Enable prefixing of flexbox properties. Set to `'no-2009'` to only add prefixes for final and IE 10+ specifications, skipping 2009 draft syntax |
| `grid` | false \| `'autoplace'` \| `'no-autoplace'` | No | `false` | Enable IE 10-11 CSS Grid prefixes. See Grid options below |
| `stats` | object | No | — | Custom usage statistics for `> 10% in my stats` Browserslist query. Must match Browserslist stats format |
| `overrideBrowserslist` | string \| string[] | No | — | List of Browserslist queries to override browser selection. Example: `['> 1%', 'last 2 versions']`. Recommended over `browsers` option |
| `ignoreUnknownVersions` | boolean | No | `false` | Suppress errors when Browserslist config contains unknown browser versions |

### Grid Options

The `grid` option controls IE 10-11 CSS Grid Layout prefixing:

- **`false`** (default): Disable all Grid prefixing
- **`'autoplace'`**: Enable Grid prefixes with autoplacement support (creates nth-child selectors for cell placement)
- **`'no-autoplace'`**: Enable Grid prefixes without autoplacement (alias for deprecated `true`)

### Request Example
None

### Response
#### Success Response (200)
Returns a PostCSS plugin object with additional properties (ExportedAPI):
```javascript
{
  // PostCSS plugin properties
  postcssPlugin: 'autoprefixer',
  prepare(result): { OnceExit(root): void },
  
  // Autoprefixer API properties
  browsers: string | string[] | undefined,
  options: Options,
  data: { browsers: object, prefixes: object },
  defaults: string[],
  info(options?: { from?: string }): string
}
```

#### Response Example
None

### Usage Examples

**Basic usage with default browsers:**
```javascript
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

postcss([autoprefixer()]).process(css).then(result => {
  console.log(result.css)
})
```

**With explicit browser targets:**
```javascript
postcss([
  autoprefixer(['last 2 versions', '> 5%'])
]).process(css).then(result => {
  console.log(result.css)
})
```

**With options object:**
```javascript
postcss([
  autoprefixer({
    overrideBrowserslist: ['> 1%', 'last 2 versions'],
    cascade: false,
    grid: 'autoplace'
  })
]).process(css).then(result => {
  console.log(result.css)
})
```

**With mixed arguments:**
```javascript
postcss([
  autoprefixer(['last 2 versions'], { cascade: false })
]).process(css)
```

**Accessing plugin metadata:**
```javascript
const plugin = autoprefixer()
console.log(plugin.browsers) // Browser targets
console.log(plugin.options)   // Configuration used
console.log(plugin.data)      // Browser data and prefix data
console.log(plugin.defaults)  // Default browser queries
```
```

--------------------------------

### Check Autoprefixer info

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Use this command to inspect which prefixes Autoprefixer will add based on your current configuration and target browsers.

```bash
npx autoprefixer --info
```

--------------------------------

### Autoplacement Limitations: Defined Columns and Rows

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Autoplacement requires both grid columns and rows to be explicitly defined. This example shows a case where only columns are defined, which is not supported for autoplacement.

```css
.not-allowed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.is-allowed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, auto);
}
```

--------------------------------

### autoprefixer.defaults

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

An array of default Browserslist queries used by Autoprefixer.

```APIDOC
## autoprefixer.defaults

### Description
Array of default Browserslist queries from Browserslist library.

### Type
`string[]`

### Example
```javascript
const autoprefixer = require('autoprefixer')
console.log(autoprefixer.defaults)
// Output: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead']
```
```

--------------------------------

### Use Autoprefixer via CLI

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

Process CSS files using Autoprefixer from the command line. This is a direct way to apply prefixes without a build tool configuration.

```bash
npx postcss input.css -o output.css
```

--------------------------------

### CSS Grid with Template Areas and Autoprefixer Output

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/prefixing-guide.md

Shows the input CSS using `grid-template-areas` and the corresponding output after Autoprefixer has added vendor prefixes for IE compatibility.

```css
/* Input with grid: 'no-autoplace' */
.layout {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Output */
.layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 1rem 1fr;
  grid-template-columns: 200px 1fr;
  -ms-grid-rows: auto 1rem 1fr 1rem auto;
  grid-template-rows: auto 1fr auto;
  -ms-grid-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-gap: 1rem;
}
```

--------------------------------

### GitLab CI configuration for CSS build

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Configures a GitLab CI pipeline to build CSS using Node.js, install dependencies, run the build script, and store the output in 'dist/' as an artifact.

```yaml
build_css:
  image: node:18
  script:
    - npm ci
    - npm run build:css
  artifacts:
    paths:
      - dist/
```

--------------------------------

### Vite Configuration with Inline PostCSS

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Provide inline PostCSS configuration for Autoprefixer within Vite's vite.config.js.

```javascript
export default {
  css: {
    postcss: {
      plugins: [
        require('autoprefixer')({
          cascade: false,
          grid: 'autoplace'
        })
      ]
    }
  }
}
```

--------------------------------

### Get Grid prefixing status for a node

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Retrieves the Grid prefixing status for a PostCSS node. This status can be influenced by control comments (e.g., '/* autoprefixer grid: ... */'), processor options, or environment variables.

```javascript
const gridStatus = processor.gridStatus(node, result)
```

--------------------------------

### Autoprefixer Prefix Selection Logic

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/data-and-internals.md

Illustrates how Autoprefixer determines which prefixes to add or remove for a CSS property based on the target browsers and their support for specific prefixes. This example shows the data structure and logic for the 'transform' property.

```javascript
// Browserslist result: ['chrome 100', 'firefox 100']

// For transform property:
prefixes.data.transform.browsers = [
  'chrome 26',   // Target has Chrome 100, so needs prefix!
  'firefox 16',  // Target has Firefox 100, so needs prefix!
  'safari 9',    // Target doesn't have Safari, so skip
  'ie 9',        // Target doesn't have IE, so skip
]

// Result: selected.add.transform = ['-webkit-', '-moz-']
```

--------------------------------

### Configure Autoprefixer to ignore unknown browser versions

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/warnings-and-errors.md

Set `ignoreUnknownVersions: true` to prevent errors when an unknown browser version is specified in the configuration.

```javascript
autoprefixer({
  overrideBrowserslist: ['chrome 100'],  // Valid version
  ignoreUnknownVersions: false           // Throw on unknown
})
```

```javascript
autoprefixer({
  overrideBrowserslist: ['chrome 999'],
  ignoreUnknownVersions: true  // Suppress error
})
```

--------------------------------

### Configure Autoprefixer Grid Option

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

Set the 'grid' option to 'autoplace' to enable -ms- prefixes for Grid Layout with autoplacement support.

```js
autoprefixer({ grid: 'autoplace' })
```

--------------------------------

### Production Build Configuration

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Optimize Autoprefixer settings for production builds by disabling cascading and removing old prefixes. This results in cleaner and potentially smaller CSS.

```javascript
const isProd = process.env.NODE_ENV === 'production'

autoprefixer({
  cascade: !isProd,        // Don't cascade in production
  remove: true,            // Clean up old prefixes
  add: true,               // Add new prefixes
  supports: true,
  flexbox: 'no-2009'       // Skip old syntax
})
```

--------------------------------

### Autoprefixer with Explicit Browser Targets

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/api-reference.md

Shows how to specify browser targets directly when initializing Autoprefixer. Use this when you need to enforce specific browser support beyond the default configuration.

```javascript
postcss([
  autoprefixer(['last 2 versions', '> 5%'])
]).process(css).then(result => {
  console.log(result.css)
})
```

--------------------------------

### Gulp Autoprefixer Integration

Source: https://github.com/postcss/autoprefixer/blob/main/README.md

This JavaScript snippet shows how to integrate Autoprefixer into a Gulp build process using `gulp-postcss`. It includes initializing sourcemaps and piping CSS through Autoprefixer before writing the output.

```javascript
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'))
})
```

--------------------------------

### Environment-Specific Browserslist in package.json

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Configure different browser targets for different environments (e.g., production, development) within the 'browserslist' object in package.json.

```json
{
  "browserslist": {
    "production": [
      "> 0.5%",
      "last 2 versions",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  }
}
```

--------------------------------

### Gulp 4.x Configuration with gulp-postcss

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Set up gulpfile.js to use gulp-postcss for processing CSS files with Autoprefixer.

```javascript
const gulp = require('gulp')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')

function css() {
  return gulp.src('src/**/*.css')
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('dist'))
}

exports.css = css
exports.watch = () => gulp.watch('src/**/*.css', css)
exports.default = css
```

--------------------------------

### Instantiate AtRule Prefixer

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Constructor for the AtRule class, used for prefixing at-rules like @keyframes and @viewport. Requires the at-rule name, prefixes, and the main Prefixes instance.

```javascript
new AtRule(name, prefixes, all)
```

--------------------------------

### Instantiate Processor

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/internal-classes.md

Creates a new Processor instance, which is the main CSS processing engine for Autoprefixer. It requires a Prefixes instance during initialization.

```javascript
const processor = new Processor(prefixesInstance)
```

--------------------------------

### Gulp Configuration with Other PostCSS Plugins

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/build-tool-integration.md

Combine Autoprefixer with other PostCSS plugins like cssnano in gulpfile.js.

```javascript
const gulp = require('gulp')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano')

function css() {
  return gulp.src('src/**/*.css')
    .pipe(postcss([
      autoprefixer(),
      cssnano()
    ]))
    .pipe(gulp.dest('dist'))
}

exports.css = css
```

--------------------------------

### Autoprefixer Main Function Signature

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/README.md

This is the main function that creates a PostCSS plugin. It returns an object with the PostCSS plugin interface and Autoprefixer API details.

```javascript
const plugin = autoprefixer([browsers], [options])
```

--------------------------------

### Control Grid Prefixing via Environment Variable

Source: https://github.com/postcss/autoprefixer/blob/main/_autodocs/configuration.md

Configure CSS Grid prefixing using the AUTOPREFIXER_GRID environment variable. This allows dynamic control over Grid support without modifying code.

```bash
AUTOPREFIXER_GRID=autoplace npm run build
```

```bash
AUTOPREFIXER_GRID=no-autoplace npm run build
```