### Project Setup Commands

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Commands to clone the repository, navigate to the demo directory, install Node.js version (optional), and install npm packages.

```bash
git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack-browserslist-config-baseline
nvm i
nvm use
npm i
```

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

### Starting the Development Server

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Command to start the webpack development server, allowing you to view the application locally.

```bash
npm start
```

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

### VS Code Configuration for Baseline MCP Server

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This JSON configuration snippet adds the Baseline MCP server details to VS Code's user settings. It specifies the command to run the server using Deno and includes necessary network permissions. This setup allows VS Code to communicate with the MCP server for enhanced functionality.

```json
{
  "mcp": {
    "servers": {
      "baseline-mcp-server": {
        "command": "deno",
        "args": [
          "run",
          "--allow-net=api.webstatus.dev",
          "jsr:@yamanoku/baseline-mcp-server"
        ]
      }
    }
  }
}
```

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

### Get Web Feature Baseline Status (JSON Query - CSS Container)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This example shows a JSON query to retrieve the baseline status for CSS container-related features. It's part of a process to identify CSS properties with limited availability.

```json
{
  "query": "container-type"
}
```

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

### Run Browserslist Command

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

This command is used to display the browser versions included in the current browserslist configuration. It helps in verifying the setup after modifying the configuration file.

```bash
npx browserslist
```

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

### Get Compatible Browser Versions (JavaScript)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/baseline-browser-mapping/README.md

Retrieves a list of browsers compatible with Baseline feature sets and their versions. It takes an optional configuration object and formats the output for display. Dependencies: `baseline-browser-mapping`.

```javascript
import { getCompatibleVersions } from "baseline-browser-mapping";

console.log(getCompatibleVersions({
  includeDownstreamBrowsers: true,
}).map(({browser, version, release_date}) => `${browser} ${version} (${release_date})`).join("\n"));
```

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

### Get Web Feature Baseline Status (JSON Query)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This snippet demonstrates how to query the baseline status of a web feature using a JSON payload. It's useful for programmatically checking browser support and availability.

```json
{
  "query": "view transitions"
}
```

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

### Example Polyfills with Baseline 2016

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Illustrates the specific polyfills added by 'core-js' when targeting browsers from 2016. This output shows which JavaScript features are polyfilled for each targeted browser version.

```text
The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
```

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

### Example Babel Plugins with Baseline 2016

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Lists the Babel plugins used when targeting browsers from 2016. This demonstrates how older browser support requirements influence the selection of Babel transformations for JavaScript features.

```text
Using plugins:
  transform-explicit-resource-management { chrome < 134, edge < 134, firefox, ios, safari }
  transform-duplicate-named-capturing-groups-regex { chrome < 126, edge < 126, firefox < 129, ios < 17.4, safari < 17.4 }
  transform-regexp-modifiers { chrome < 125, edge < 125, firefox < 132, ios, safari }
  transform-unicode-sets-regex { chrome < 112, edge < 112, firefox < 116, ios < 17, safari < 17 }
  proposal-class-static-block { chrome < 94, edge < 94, firefox < 93, ios < 16.4, safari < 16.4 }
  proposal-private-property-in-object { chrome < 91, edge < 91, firefox < 90, ios < 15, safari < 15 }
  proposal-class-properties { chrome < 74, edge < 79, firefox < 90, ios < 14.5, safari < 14.1 }
  proposal-private-methods { chrome < 84, edge < 84, firefox < 90, ios < 15, safari < 15 }
  proposal-numeric-separator { chrome < 75, edge < 79, firefox < 70, ios < 13, safari < 13 }
  proposal-logical-assignment-operators { chrome < 85, edge < 85, firefox < 79, ios < 14, safari < 14 }
  proposal-nullish-coalescing-operator { chrome < 80, edge < 80, firefox < 72, ios < 13.4, safari < 13.1 }
  proposal-optional-chaining { chrome < 91, edge < 91, firefox < 74, ios < 13.4, safari < 13.1 }
  proposal-json-strings { chrome < 66, edge < 79, firefox < 62, ios < 12, safari < 12 }
  proposal-optional-catch-binding { chrome < 66, edge < 79, firefox < 58, ios < 11.3, safari < 11.1 }
  transform-parameters { edge < 18, firefox < 52, ios < 16.3, safari < 16.3 }
  proposal-async-generator-functions { chrome < 63, edge < 79, firefox < 57, ios < 12, safari < 12 }
  proposal-object-rest-spread { chrome < 60, edge < 79, firefox < 55, ios < 11.3, safari < 11.1 }
  transform-dotall-regex { chrome < 62, edge < 79, firefox < 78, ios < 11.3, safari < 11.1 }
  proposal-unicode-property-regex { chrome < 64, edge < 79, firefox < 78, ios < 11.3, safari < 11.1 }
  transform-named-capturing-groups-regex { chrome < 64, edge < 79, firefox < 78, ios < 11.3, safari < 11.1 }
  transform-async-to-generator { chrome < 55, edge < 15, firefox < 52, ios < 11, safari < 11 }
  transform-exponentiation-operator { firefox < 52, ios < 10.3, safari < 10.1 }
  transform-template-literals { ios < 13, safari < 13 }
  transform-literals { firefox < 53 }
  transform-function-name { edge < 79, firefox < 53 }
  transform-for-of { edge < 15, firefox < 53 }
  transform-unicode-escapes { firefox < 53 }
  transform-unicode-regex { ios < 12, safari < 12 }
  transform-destructuring { edge < 15, firefox < 53 }
  transform-block-scoping { firefox < 53, ios < 11, safari < 11 }
  transform-regenerator { firefox < 53 }
  proposal-export-namespace-from { chrome < 72, edge < 79, firefox < 80, ios < 14.5, safari < 14.1 }
  syntax-dynamic-import
  syntax-top-level-await
  syntax-import-meta
```

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

### Get Web Feature Baseline Status (JSON Query - Aspect Ratio)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This JSON query retrieves the baseline status for the CSS 'aspect-ratio' property. It's used to confirm if a property is widely supported or has limited availability.

```json
{
  "query": "aspect-ratio"
}
```

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

### Get Web Feature Baseline Status (JSON Query - CSS Has Selector)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This JSON query targets the CSS :has selector to check its baseline status. This is used in analyses to find CSS features with limited browser support.

```json
{
  "query": "css has selector"
}
```

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

### Get Web Feature Baseline Status (JSON Query - Color Mix)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This JSON query is used to determine the baseline status of the CSS 'color-mix()' function. It helps in classifying features as 'newly standardized' or 'limited' in terms of browser support.

```json
{
  "query": "color-mix"
}
```

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

### Get Web Feature Baseline Status (JSON Query - CSS :has)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/mcp/README.md

This JSON query specifically checks the baseline status of the CSS :has pseudo-class. It's employed when investigating CSS features that might have limited availability across browsers.

```json
{
  "query": "css :has"
}
```

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

### Build Project with npm

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

This command executes the build script defined in the project's package.json. It is a standard command for compiling or bundling project assets.

```bash
npm run build
```

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

### Run ESLint for HTML linting (Shell)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

This command initiates the ESLint process for linting HTML files, verifying compliance with baseline features as defined by the '@html-eslint/use-baseline' rule.

```shell
npm run lint:html
```

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

### Run JavaScript Script (Shell)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/baseline-browser-mapping/README.md

Executes a Node.js script from the command line. Assumes the script is named `index.js` and is in the current directory. No specific dependencies are mentioned other than Node.js.

```bash
node index.js
```

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

### Configure Babel with Browserslist Baseline

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

Demonstrates how to configure Babel to use the 'browserslist-config-baseline' for the 'Baseline widely available' configuration. This ensures modern JavaScript syntax with minimal transformations.

```diff
+extends browserslist-config-baseline

```

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

### Run CSS Linting with ESLint

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

Executes the CSS linting process using npm. This command runs ESLint with its CSS rules to check for baseline compatibility.

```sh
npm run lint:css
```

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

### Configure ESLint for Baseline Widely Available

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

This snippet shows how to configure ESLint to target 'Baseline widely available' by extending the `browserslist-config-baseline` in the `.browserslistrc` file. It then demonstrates running the ESLint linter.

```diff
+extends browserslist-config-baseline
```

```shell
npm run lint:js
```

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

### Core-js Polyfills for Baseline Widely Available

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Lists the specific polyfills injected by `core-js` with the 'usage-global' method based on the Baseline Widely available target.

```text
Using polyfills with `usage-global` method:

[/private/var/www/baseline-demos/tooling/webpack-browserslist-baseline-config/src/js/App.jsx]
The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
```

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

### Configure Browserslist in package.json

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/rollup-browserslist-config-baseline/README.md

Shows how to extend the browserslist-config-baseline in package.json to target different Baseline versions. This influences the Babel preset-env and Autoprefixer configurations.

```json
"browserslist": "extends browserslist-config-baseline"
```

```json
"browserslist": "extends browserslist-config-baseline/2020"
```

```json
"browserslist": "extends browserslist-config-baseline/2016"
```

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

### Configure Babel Targets in babel.config.json

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

Illustrates an alternative method to specify browserslist targets directly within the babel.config.json file using 'extends browserslist-config-baseline'.

```diff
{
  "presets": ["@babel/preset-env"],
+  "targets": "extends browserslist-config-baseline"
}

```

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

### Configure Babel with Browserslist Baseline with Downstream Browsers

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

Shows how to configure Babel to use 'browserslist-config-baseline/with-downstream' to include downstream browsers in the Baseline compatibility targets.

```diff
+extends browserslist-config-baseline/with-downstream

```

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

### Configure Babel with Browserslist Baseline Year 2016

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

Illustrates configuring Babel to use 'browserslist-config-baseline/2016' to target the Baseline year 2016. This older baseline year requires more polyfills and results in a larger output file.

```diff
+extends browserslist-config-baseline/2016

```

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

### Babel Plugins Used for Baseline Widely Available

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Lists the Babel plugins activated by `@babel/preset-env` based on the Baseline Widely available target, indicating which browser versions require specific transformations.

```text
Using plugins:
  transform-explicit-resource-management { chrome < 134, edge < 134, firefox, ios, safari }
  transform-duplicate-named-capturing-groups-regex { chrome < 126, edge < 126, firefox < 129, ios < 17.4, safari < 17.4 }
  transform-regexp-modifiers { chrome < 125, edge < 125, firefox < 132, ios, safari }
  transform-unicode-sets-regex { chrome < 112, edge < 112, firefox < 116, ios < 17, safari < 17 }
  bugfix/transform-firefox-class-in-computed-class-key { firefox < 126 }
  proposal-class-static-block { ios < 16.4, safari < 16.4 }
  syntax-private-property-in-object
  syntax-class-properties
  syntax-numeric-separator
  syntax-nullish-coalescing-operator
  syntax-optional-chaining
  syntax-json-strings
  syntax-optional-catch-binding
  transform-parameters { ios < 16.3, safari < 16.3 }
  syntax-async-generators
  syntax-object-rest-spread
  syntax-export-namespace-from
  syntax-dynamic-import
  syntax-top-level-await
  syntax-import-meta
```

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

### Configure ESLint for Baseline Year (2016)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

This snippet demonstrates configuring ESLint for a specific baseline year (2016) by modifying the `.browserslistrc` file to extend `browserslist-config-baseline/2016`. It includes the command to run the ESLint linter.

```diff
-extends browserslist-config-baseline
+extends browserslist-config-baseline/2016
```

```shell
npm run lint:js
```

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

### Browserslist Configuration for Baseline 2016

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/rollup-browserslist-config-baseline/README.md

This snippet shows the browser list generated when extending 'browserslist-config-baseline/2016', targeting the Baseline 2016 configuration. This results in broader browser support compared to newer Baseline targets.

```text
Your browserslist config from browserslist-config-baseline is:
[
  'Chrome >= 53',
  'ChromeAndroid >= 53',
  'Edge >= 14',
  'Firefox >= 49',
  'FirefoxAndroid >= 49',
  'Safari >= 10',
  'iOS >= 10'
]
```

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

### Configuring Browserslist Target in package.json

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Illustrates how to set the Browserslist target using `browserslist-config-baseline`, including a widely available target and a specific year-based target.

```json
"browserslist": "extends browserslist-config-baseline"

"browserslist": "extends browserslist-config-baseline/2020"
```

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

### Configure ESLint CSS Baseline Availability

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

Demonstrates how to configure the `use-baseline` rule in ESLint's configuration file (`eslint.config.mjs`) to check for 'newly' available baseline features.

```javascript
rules: {
  "css/use-baseline": ["warn", {
    "available": "newly"
  }],
}
```

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

### Configure Babel with Browserslist Baseline Year 2020

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

Demonstrates configuring Babel to use 'browserslist-config-baseline/2020' to target the Baseline year 2020, influencing the extent of code transformations.

```diff
+extends browserslist-config-baseline/2020

```

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

### Bundle Size Comparison: Baseline 2016 vs. Widely Available

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Compares the JavaScript bundle size and CSS size between a 'Baseline Widely available' configuration and the 'Baseline 2016' configuration. This highlights the increase in size when targeting older browsers.

```text
- Baseline Widely available:
  - JavaScript bundle size: `208 KiB`
  - CSS size: `3.64 KiB`
- Baseline 2016:
  - JavaScript bundle size: `232 KiB`
  - CSS size: `3.91 KiB`
```

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

### Babel Preset Env Configuration (Debug)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Configuration in `babel.config.js` that enables debug output for `@babel/preset-env`, showing how the Browserslist configuration affects transformations.

```javascript
debug: true
```

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

### Browserslist Configuration for Baseline Widely Available

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/rollup-browserslist-config-baseline/README.md

This snippet displays the browser list generated when extending the default 'browserslist-config-baseline', targeting Baseline Widely available. This configuration is used by tools like Babel and Autoprefixer.

```text
Your browserslist config from browserslist-config-baseline is:
[
  'Chrome >= 108',
  'ChromeAndroid >= 108',
  'Edge >= 108',
  'Firefox >= 108',
  'FirefoxAndroid >= 108',
  'Safari >= 16',
  'iOS >= 16'
]
```

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

### Configure .browserslistrc with Baseline 2020

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

This snippet shows how to extend the browserslist configuration to include the 'baseline/with-downstream/2020' configuration. This is typically used to set default browser support targets.

```diff
+extends browserslist-config-baseline/with-downstream/2020
```

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

### Browserslist Targets for Baseline Widely Available

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

The browser targets derived from the `browserslist-config-baseline` 'Widely available' setting, used by Babel and other tools.

```text
Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}
```

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

### Configure html-eslint use-baseline rule for widely available features (JavaScript)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

This configuration snippet demonstrates how to integrate and set up the '@html-eslint/use-baseline' rule within an ESLint configuration file (`eslint.config.mjs`). It targets HTML files and checks for attributes and elements that are 'widely available'.

```javascript
import html from "@html-eslint/eslint-plugin";

export default [
  // {...}
  {
    ...html.configs["flat/recommended"],
    files: ["**/*.html"],
    rules: {
      "@html-eslint/use-baseline": ["warn", {
        "available": "widely"
      }],
    },
  }
];
```

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

### Configure Browserslist for Baseline 2016

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/webpack-browserslist-config-baseline/README.md

Sets the Browserslist configuration in package.json to target browsers from 2016. This influences which polyfills and transformations are applied.

```json
"browserslist": "extends browserslist-config-baseline/2016"
```

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

### Babel Transformation: Default Browserslist (ES5 Fallback)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/babel/README.md

Shows Babel's default behavior when no browserslist targets are specified, resulting in ES5 compatible code. This includes transformations like arrow functions to function expressions and 'const' to 'var'.

```diff
-const add = (a, b) => a + b;
+var add = function add(a, b) {
+ return a + b;
+};

```

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

### Google Analytics Tag Configuration

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/google-analytics-baseline-checker/public/index.html

This snippet configures the Google Analytics data layer and initializes the gtag function for tracking. It ensures that analytics events are captured correctly by the Google Analytics service.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}

gt('js', new Date());
gt('config', 'G-754F24EHD8');
```

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

### Configure CSS use-baseline rule with a specific year (JavaScript)

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

This snippet shows how to configure the 'css/use-baseline' ESLint rule in `eslint.config.mjs` to check for CSS features available from a specific year. It's part of the Google Chrome Labs baseline demos.

```javascript
rules: {
  "css/use-baseline": ["warn", {
    "available": 2023
  }],
}
```

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

### Suppress ESLint CSS Warnings

Source: https://github.com/googlechromelabs/baseline-demos/blob/main/tooling/eslint/README.md

Shows how to suppress individual ESLint CSS warnings by adding a comment. This is useful when a feature is intentionally used as a progressive enhancement.

```diff
-view-transition-name: card-transition;
+view-transition-name: card-transition; /* eslint-disable-line css/use-baseline */
view-transition-name: card-transition;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.