# Vyriy Browserslist Config

Shared Browserslist configuration for Vyriy projects.

Published: 2026-05-10
Tags: vyriy, browserslist, config
Source: https://vyriy.dev/examples/vyriy-browserslist-config/

---

# Vyriy Browserslist Config

`@vyriy/browserslist-config` is a shared Browserslist configuration used across Vyriy projects.

The goal of this package is to keep browser and runtime targets consistent between different parts of the system: local development, client-side production bundles, modern builds, and server-side rendering.

Instead of duplicating Browserslist rules in every project, the configuration can be installed once and reused through `.browserslistrc`.

## Why this config exists

Modern frontend projects often have several different build targets.

For example, a React application may need:

- a fast development build for the latest Chrome;
- a production build for real users and supported browsers;
- an SSR build targeting Node.js;
- a modern build for evergreen browsers.

Keeping these targets in one shared package makes the setup easier to maintain and safer to reuse across projects.

## Installation

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

## Usage

Create or update `.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 all environments, but Browserslist resolves the actual target list based on the selected environment.

## Environments

The config provides several environments for different build scenarios.

### Default / Production

The default environment is intended for production client-side bundles.

It targets browsers used by real users and is suitable for normal production builds, CSS processing, Babel transpilation, and other tools that read Browserslist.

```bash
npx browserslist --config=.browserslistrc
```

Output:

```bash
and_chr 147
and_ff 150
and_qq 14.9
and_uc 15.5
android 147
chrome 148
chrome 147
chrome 146
chrome 112
edge 147
edge 146
firefox 150
firefox 149
ios_saf 26.4
ios_saf 26.3
ios_saf 26.2
ios_saf 18.5-18.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 131
opera 127
safari 26.4
safari 26.3
samsung 29
samsung 28
```

### Development

The `development` environment is intentionally small.

It is optimized for local development where build speed and debugging experience are more important than wide browser coverage.

```bash
npx browserslist --config=.browserslistrc --env=development
```

Output:

```bash
chrome 148
```

This keeps local builds faster and easier to debug while still using a realistic modern browser target.

### SSR

The `ssr` environment is used for server-side rendering and server-side build targets.

In Vyriy projects, SSR runs on Node.js, so the Browserslist target is Node instead of browsers.

```bash
npx browserslist --config=.browserslistrc --env=ssr
```

Output:

```bash
node 24.15.0
```

This is useful when tools like Babel or other build steps need to understand that the output is not meant for the browser.

### Production

The `production` environment is the main browser target for public client-side bundles.

It should be used for assets that are shipped to users through CDN, S3, CloudFront, or any other static hosting setup.

```bash
npx browserslist --config=.browserslistrc --env=production
```

Output:

```bash
and_chr 147
and_ff 150
and_qq 14.9
and_uc 15.5
android 147
chrome 148
chrome 147
chrome 146
chrome 112
edge 147
edge 146
firefox 150
firefox 149
ios_saf 26.4
ios_saf 26.3
ios_saf 26.2
ios_saf 18.5-18.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 131
opera 127
safari 26.4
safari 26.3
samsung 29
samsung 28
```

### Modern

The `modern` environment is intended for modern-only builds.

It targets the latest evergreen browsers and can be useful for experiments, internal tools, documentation sites, or separate modern bundles.

```bash
npx browserslist --config=.browserslistrc --env=modern
```

Output:

```bash
chrome 148
firefox 150
safari 26.4
```

## Typical usage in Vyriy projects

In a Vyriy-style project, different tools can use different Browserslist environments:

- local development can use `development`;
- browser production bundles can use `production`;
- SSR builds can use `ssr`;
- modern-only builds can use `modern`.

This makes the build configuration explicit without spreading browser target rules across multiple repositories.

## Notes

Browserslist is used by many frontend tools, including Babel, PostCSS, Autoprefixer, and other build-time utilities.

Because of that, keeping the target list centralized helps avoid small differences between packages, applications, documentation builds, and SSR entry points.

The config is intentionally simple. It does not try to solve every possible browser support strategy. It provides a practical baseline for Vyriy projects and can evolve together with the platform.

## Documentation

See the [Browserslist config API documentation](https://vyriy.dev/storybook/?path=/docs/config-browserslist--api).