WordPress Browserslist Config

WordPress Browserslist Config provides a shared configuration for browser support targets used across WordPress and Gutenberg projects. It exports a standardized array of Browserslist query strings that define which browsers should be supported when processing CSS and JavaScript.

Package Information

• Package Name: @wordpress/browserslist-config
• Package Type: npm
• Language: JavaScript (CommonJS)
• Installation: npm install browserslist @wordpress/browserslist-config --save-dev

Core Imports

CommonJS (primary):

const config = require('@wordpress/browserslist-config');

ES Module (for tools that support it):

import config from '@wordpress/browserslist-config';

Basic Usage

Package Configuration

Add to your package.json:

{
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ]
}

Browserslist Configuration File

Create .browserslistrc:

extends @wordpress/browserslist-config

Direct Usage

const wpBrowserslistConfig = require('@wordpress/browserslist-config');
const browserslist = require('browserslist');

// Get list of supported browsers
const supportedBrowsers = browserslist(wpBrowserslistConfig);
console.log(supportedBrowsers);

Capabilities

Browserslist Configuration Export

The package exports a pre-configured array of Browserslist query strings that define WordPress's browser support policy.

/**
 * WordPress Browserslist configuration array
 * @type {string[]} Array of Browserslist query strings
 */
module.exports = [
  '> 1%',
  'last 1 Android versions',
  'last 1 ChromeAndroid versions',
  'last 2 Chrome versions',
  'last 2 Firefox versions',
  'last 2 Safari versions',
  'last 2 iOS versions',
  'last 2 Edge versions',
  'last 2 Opera versions',
];

Query String Details:

• '> 1%' - Browsers with greater than 1% global usage statistics
• 'last 1 Android versions' - Last 1 version of Android Browser
• 'last 1 ChromeAndroid versions' - Last 1 version of Chrome for Android
• 'last 2 Chrome versions' - Last 2 versions of Chrome desktop
• 'last 2 Firefox versions' - Last 2 versions of Firefox
• 'last 2 Safari versions' - Last 2 versions of Safari
• 'last 2 iOS versions' - Last 2 versions of iOS Safari
• 'last 2 Edge versions' - Last 2 versions of Microsoft Edge
• 'last 2 Opera versions' - Last 2 versions of Opera

Usage with Build Tools

This configuration is designed to work with tools that consume Browserslist configurations:

Autoprefixer (PostCSS):

const autoprefixer = require('autoprefixer');
const wpBrowsers = require('@wordpress/browserslist-config');

// Use directly
autoprefixer({ browsers: wpBrowsers })

Babel:

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      // Will automatically use browserslist config
    }]
  ]
};

PostCSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
    // Will automatically use browserslist config
  ]
};

Environment Requirements

• Node.js: >=18.12.0
• npm: >=8.19.2

Related Tools

This configuration is intended for use with:

• browserslist - Browser targeting configuration
• Autoprefixer - CSS vendor prefix handling
• @babel/preset-env - JavaScript transpilation targets
• PostCSS - CSS processing and transformation
• ESLint - Browser environment-specific linting rules