# @vyriy/browserslist-config

Shared Browserslist config for Vyriy projects.

Tags: browserslist, config, frontend, compatibility
Source: https://vyriy.dev/docs/browserslist/

---

# @vyriy/browserslist-config

Part of [Vyriy](https://vyriy.dev) - a calm architecture toolkit for TypeScript, React, SSR, SSG, APIs, and cloud-ready apps.

Shared Browserslist config for Vyriy projects.

## Purpose

This package centralizes reusable Browserslist target sets for applications and libraries in the Vyriy monorepo. It provides separate environments for local development, SSR, default production builds, and a narrower modern browser target.
This keeps browser and runtime targets consistent between local development, client-side production bundles, modern builds, and server-side rendering.

## Install

With npm:

```bash
npm install -D @vyriy/browserslist-config
```

With Yarn:

```bash
yarn add -D @vyriy/browserslist-config
```

Install `browserslist` separately only when the consumer project needs the Browserslist CLI binary.

## Usage

Create `.browserslistrc` in your project:

```ini
[development]
extends @vyriy/browserslist-config

[ssr]
extends @vyriy/browserslist-config

[production]
extends @vyriy/browserslist-config

[modern]
extends @vyriy/browserslist-config
```

The same shared config is used for each environment, while Browserslist resolves the actual target list from the selected environment.

## Environments

Available environments:

- `development`
- `ssr`
- `production`
- `modern`

Typical usage:

- `development` for fast local builds and debugging.
- `production` for public client bundles shipped to users.
- `ssr` for Node.js server-side rendering or server-side build output.
- `modern` for evergreen-browser-only builds, documentation, or experiments.

Programmatic usage is also supported:

```js
const browserslistConfig = require('@vyriy/browserslist-config');

module.exports = browserslistConfig;
```

```ts
import browserslistConfig from '@vyriy/browserslist-config';

export default browserslistConfig;
```

If you use it from TypeScript, the package also exposes types from the root entry.

```ts
import browserslistConfig, { type BrowserslistConfig } from '@vyriy/browserslist-config';

const config: BrowserslistConfig = browserslistConfig;
```

## CLI

You can inspect the resolved browser targets from the command line with `browserslist`:

```bash
npx browserslist --config .browserslistrc
npx browserslist --config .browserslistrc --env development
npx browserslist --config .browserslistrc --env ssr
npx browserslist --config .browserslistrc --env production
npx browserslist --config .browserslistrc --env modern
```

## API

- `development` targets the latest Chrome for fast local iteration.
- `ssr` targets Node.js 24 for server-side rendering.
- `production` targets a broad, safe browser baseline for public builds.
- `modern` targets the latest Chrome, Safari, and Firefox versions.

## Full Example

See the article with resolved target examples for each environment: <https://vyriy.dev/examples/vyriy-browserslist-config/>.