@wayofdev/postcss-config NPM

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 @wayofdev/postcss-config as a development dependency in your project. You can do this by running the following command:

pnpm add -D \
	postcss \
	@wayofdev/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 \
	@wayofdev/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 @wayofdev/postcss-config package in your project, follow these steps:

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

module.exports = require('@wayofdev/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 @wayofdev/postcss-config configuration, create a new postcss.config.js file with the following code:

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