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

# Shareable PostCSS Config

## 📄 About

Shareable configuration for [PostCSS](https://postcss.org/) — a tool for transforming CSS with JavaScript.

The package provides a set of plugins and settings that can be easily shared and reused across different projects, reducing the amount of boilerplate code needed to set up PostCSS in each project.

### → Purpose

Simplify the process of setting up PostCSS in a project by providing a pre-configured set of plugins and settings.

This package can be useful for developers who want to:

- Use PostCSS in their project but don't want to spend time configuring it from scratch
- Share PostCSS configuration across multiple projects
- Avoid maintaining and updating PostCSS configuration in every project manually

- Take advantage of preconfigured optimizations and plugins, such as:
  - [autoprefixer](https://github.com/postcss/autoprefixer) — adds vendor prefixes to CSS properties
  - [cssnano](https://cssnano.co) — minifies CSS files and removes unnecessary code
  - [postcss-preset-env](https://github.com/csstools/postcss-plugins) — enables the use of future CSS features and converts them into compatible CSS code for current browsers.
  - [postcss-import](https://github.com/postcss/postcss-import), which allows you to use `@import` statements in your CSS files, making it easy to split your code into multiple files and organize your CSS
  - [postcss-100vh-fix](https://github.com/postcss/postcss-100vh-fix) — fixes the issue where the height of an element with `100vh` is taller than the viewport in some mobile browsers
  - [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes) — fixes various flexbox bugs in older versions of Safari and IE
  - [tailwindcss — utility-first CSS framework for rapidly building custom user interfaces
  - [tailwindcss/nesting — adds support for nested rules in Tailwind CSS
  - [postcss-reporter](https://github.com/postcss/postcss-reporter) — logs PostCSS messages to the console with a clean and concise format

Developers can streamline the process of using PostCSS in their project and ensure a consistent configuration across different projects.

<br>

## 💿 Installation

To use this configuration, you'll need to install `@hybrbase/postcss-config` as a development dependency in your project. You can do this by running the following command:

```bash
pnpm add -D \
 postcss \
 @hybrbase/postcss-config \
 postcss-100vh-fix \
 postcss-flexbugs-fixes \
 postcss-import \
 postcss-preset-env \
 postcss-reporter
```

If you're working in a monorepository and want to add the package to a specific app, you can use the `--filter` flag to add it only to that app. For example:

```bash
pnpm --filter=[app-dir-name] add -D \
 postcss \
 @hybrbase/postcss-config \
 postcss-100vh-fix \
 postcss-flexbugs-fixes \
 postcss-import \
 postcss-preset-env \
 postcss-reporter
```

Replace `[app-dir-name]` with the name of the directory of the app where you want to install the package.

<br>

## 💻 Usage

To use the `@hybrbase/postcss-config` package in your project, follow these steps:

1. Create a file called `postcss.config.js` in the root folder of your project.
2. Add the following code to the `postcss.config.js` file:

```js
module.exports = require('@hybrbase/postcss-config')
```

If you're using a monorepository, your project structure might look like this:

```bash
.
└── apps
    ├── docs    # example nextra app
    └── web     # example nextjs app
        ├── postcss.config.js
        ├── ... (other app files)
└── packages    # shared packages
```

### → Extending the Configuration

To extend the `@hybrbase/postcss-config` configuration, create a new `postcss.config.js` file with the following code:

```js
module.exports = {
  plugins: [...require('@hybrbase/postcss-config').plugins, require('autoprefixer')],
}
```

In this code, you're extending the `plugins` array of the existing configuration by first including the plugins in the original configuration using `...require('@hybrbase/postcss-config').plugins` and then adding `autoprefixer` as a new plugin.