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.
🤝 License
🧱 Credits and Useful Resources
Based on:
🙆🏼♂️ Author Information
This repository was created in 2023 by lotyp / wayofdev.
🙌 Want to Contribute?
Thank you for considering contributing to the wayofdev community! We are open to all kinds of contributions. If you want to:
- 🤔 Suggest a feature
- 🐛 Report an issue
- 📖 Improve documentation
- 👨💻 Contribute to the code
You are more than welcome. Before contributing, kindly check our guidelines.