0
# WordPress Browserslist Config
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @wordpress/browserslist-config
7
- **Package Type**: npm
8
- **Language**: JavaScript (CommonJS)
9
- **Installation**: `npm install browserslist @wordpress/browserslist-config --save-dev`
10

11
## Core Imports
12

13
CommonJS (primary):
14

15
```javascript
16
const config = require('@wordpress/browserslist-config');
17
```
18

19
ES Module (for tools that support it):
20

21
```javascript
22
import config from '@wordpress/browserslist-config';
23
```
24

25
## Basic Usage
26

27
### Package Configuration
28

29
Add to your `package.json`:
30

31
```json
32
{
33
  "browserslist": [
34
    "extends @wordpress/browserslist-config"
35
  ]
36
}
37
```
38

39
### Browserslist Configuration File
40

41
Create `.browserslistrc`:
42

43
```
44
extends @wordpress/browserslist-config
45
```
46

47
### Direct Usage
48

49
```javascript
50
const wpBrowserslistConfig = require('@wordpress/browserslist-config');
51
const browserslist = require('browserslist');
52

53
// Get list of supported browsers
54
const supportedBrowsers = browserslist(wpBrowserslistConfig);
55
console.log(supportedBrowsers);
56
```
57

58
## Capabilities
59

60
### Browserslist Configuration Export
61

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

64
```javascript { .api }
65
/**
66
 * WordPress Browserslist configuration array
67
 * @type {string[]} Array of Browserslist query strings
68
 */
69
module.exports = [
70
  '> 1%',
71
  'last 1 Android versions',
72
  'last 1 ChromeAndroid versions',
73
  'last 2 Chrome versions',
74
  'last 2 Firefox versions',
75
  'last 2 Safari versions',
76
  'last 2 iOS versions',
77
  'last 2 Edge versions',
78
  'last 2 Opera versions',
79
];
80
```
81

82
**Query String Details:**
83

84
- `'> 1%'` - Browsers with greater than 1% global usage statistics
85
- `'last 1 Android versions'` - Last 1 version of Android Browser
86
- `'last 1 ChromeAndroid versions'` - Last 1 version of Chrome for Android
87
- `'last 2 Chrome versions'` - Last 2 versions of Chrome desktop
88
- `'last 2 Firefox versions'` - Last 2 versions of Firefox
89
- `'last 2 Safari versions'` - Last 2 versions of Safari
90
- `'last 2 iOS versions'` - Last 2 versions of iOS Safari
91
- `'last 2 Edge versions'` - Last 2 versions of Microsoft Edge
92
- `'last 2 Opera versions'` - Last 2 versions of Opera
93

94
### Usage with Build Tools
95

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

98
**Autoprefixer (PostCSS):**
99
```javascript
100
const autoprefixer = require('autoprefixer');
101
const wpBrowsers = require('@wordpress/browserslist-config');
102

103
// Use directly
104
autoprefixer({ browsers: wpBrowsers })
105
```
106

107
**Babel:**
108
```javascript
109
// babel.config.js
110
module.exports = {
111
  presets: [
112
    ['@babel/preset-env', {
113
      // Will automatically use browserslist config
114
    }]
115
  ]
116
};
117
```
118

119
**PostCSS:**
120
```javascript
121
// postcss.config.js
122
module.exports = {
123
  plugins: [
124
    require('autoprefixer')
125
    // Will automatically use browserslist config
126
  ]
127
};
128
```
129

130
## Environment Requirements
131

132
- **Node.js**: >=18.12.0
133
- **npm**: >=8.19.2
134

135
## Related Tools
136

137
This configuration is intended for use with:
138

139
- **browserslist** - Browser targeting configuration
140
- **Autoprefixer** - CSS vendor prefix handling
141
- **@babel/preset-env** - JavaScript transpilation targets
142
- **PostCSS** - CSS processing and transformation
143
- **ESLint** - Browser environment-specific linting rules