Shareable PostCSS Config

📄 About

Shareable configuration for PostCSS — 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 — adds vendor prefixes to CSS properties
  • cssnano — minifies CSS files and removes unnecessary code
  • postcss-preset-env — enables the use of future CSS features and converts them into compatible CSS code for current browsers.
  • 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 — fixes the issue where the height of an element with 100vh is taller than the viewport in some mobile browsers
  • 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 — 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.

💿 Installation

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

pnpm add -D \
 postcss \
 @hybrbase-front/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:

pnpm --filter=[app-dir-name] add -D \
 postcss \
 @hybrbase-front/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.

💻 Usage

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

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

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

.
└── 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-front/postcss-config configuration, create a new postcss.config.js file with the following code:

module.exports = {
  plugins: [...require('@hybrbase-front/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-front/postcss-config').plugins and then adding autoprefixer as a new plugin.