npm package: @hybrbase/browserslist-config
Description: A shareable browserslint configuration for projects.
Author: Toby Bui
Latest version: 0.0.0

# Shareable Browserslist Config

## 📄 About

Shareable configuration for [Browserslist](https://github.com/browserslist/browserslist) — a popular library for defining the target browsers for your projects.

It helps you maintain consistency across different projects and ensures that your projects support the same set of browsers. This configuration can be used by any project, not just projects from [wayofdev](https://github.com/wayofdev).

### → Purpose

The purpose of this package is to provide a single, consistent configuration for all your projects, saving you time and reducing the risk of errors. Specifically, it achieves this goal by:

- Eliminating the need to define the target browsers in each project
- Providing a pre-defined set of widely used target browsers
- Making it easy to update the target browsers across all your projects when needed

Overall, Browserslist Config helps maintain a high-quality user experience for your users, regardless of which browsers they use.

<br>

## 💿 Installation

To use `@hybrbase/browserslist-config` in your JavaScript projects within a mono-repository, follow the steps below:

1. Install the package in each `app` and/or `package` within the mono-repository using your preferred package manager. For example, with `pnpm`:

   ```bash
   $ pnpm add \
     --filter="my-first-app" \
     -D browserslist @hybrbase/browserslist-config
   ```

   Here, `--filter` specifies the target package or app where the dependencies should be installed. Replace `"my-first-app"` with the name of your target package or app.

   This will install both `browserslist` and `@hybrbase/browserslist-config` packages as development dependencies in your target package or app.

2. Within your monorepo, you should have a structure with directories for your apps and packages.

   ```bash
   .
   ├── package.json (root)
   ├── apps
   │   └── my-first-app
   │    ├── .browserslistrc
   │       ├── package.json
   │       └── ... (other app files)
   └── packages
       └── my-first-package
           ├── .browserslistrc
           ├── package.json
           └── ... (other package files)
   ```

3. To configure the `.browserslistrc` file, include the following line:

   ```js
   extends @hybrbase/browserslist-config
   ```

   This extends the `@hybrbase/browserslist-config` configuration and uses its pre-defined browser support ranges.

4. (Optional) For each package or app in your mono-repository that needs to use the `browserslist` package, add a `browserslist` field in the `package.json` file with the desired browser support ranges. The `package.json` file is located in either the `./packages/[package-name]` or `./apps/[app-name]` directory.

   **For example:**

   ```json
   {
     "browserslist": ["extends @hybrbase/browserslist-config"]
   }
   ```

### → Scripts

Adding the following script to your root `package.json` file makes it easier to run the `browserslist` command in your mono-repository:

```bash
pnpm pkg set scripts.lint:browsers="browserslist"
```

For `npm` users, replace `pnpm` with `npm` in the above command.

This script allows you to run the `browserslist` command by simply typing `pnpm run lint:browsers` (or `npm run lint:browsers` for `npm` users) in the terminal.