@wayofdev/postcss-config

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:

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('@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:

• shareable-configs from waldronmatt

🙆🏼‍♂️ 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.