Shareable Browserslist Config

📄 About

Shareable configuration for 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.

→ 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.

💿 Installation

To use @hybrbase-front/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:

   $ pnpm add \
     --filter="my-first-app" \
     -D browserslist @hybrbase-front/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-front/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.

   .
   ├── 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:

   extends @hybrbase-front/browserslist-config

   This extends the @hybrbase-front/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:

   {
     "browserslist": ["extends @hybrbase-front/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:

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.