@mozaic-ds/postcss-media-queries-packer-on-demand/README.md

PostCSS plugin that group media queries on demand.

<h1 align="center">
  PostCSS Media Queries Packer On Demand
</h1>

<p align="center">
  <a href="https://mozaic.adeo.cloud/">
    <img src="https://mozaic.adeo.cloud/images/badge-adeo-design-system.svg" alt="Adeo Design System (Badge)" />
  </a>
</p>

<p align="center">
  <strong>PostCSS Media Queries Packer On Demand</strong> is a <a href="https://postcss.org/">PostCSS</a> plugin built for <strong>Adeo's Design System</strong> needs that allows to group CSS media queries on demand.
</p>

## 🎨 Getting started

**ADEO Design System** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of [Adeo](https://www.adeo.com/).

Learn more about the vision and guidelines by visiting the [main documentation website](https://mozaic.adeo.cloud/).

## 📦 Install

To install the `postcss-media-queries-packer-on-demand` in your project, you will need to run the following command using `npm`:

```
npm install --save-dev @mozaic-ds/postcss-media-queries-packer-on-demand
```

If you prefer `Yarn`, use the following command instead:

```
yarn add -D @mozaic-ds/postcss-media-queries-packer-on-demand
```

## 📝 Usage

The `postcss-media-queries-packer-on-demand` plugin is used in the same way as all [PostCSS plugins](https://github.com/postcss/postcss#usage).

Simply import it into your `postcss.config.js` configuration file at the root of your project, and then add it to the `plugins` key in your **PostCSS** configuration object.

```diff
// postcss.config.js

module.exports = {
  plugins: [
+   require('postcss-media-queries-packer-on-demand'),
  ]
}
```

Next, choose a file in your CSS code base where you want to group media queries.

Once you've determined this location, you can indicate it to the plugin by wrapping the relevant media queries in the comments `/* mqp:start */` and `/* mqp:end */`.

**Example:**

Your CSS file at the start:

```css
/* mqp:start */
.foo {
  ...;
}
@media (min-width: 320px) {
  .foo {
    ...;
  }
}
.bar {
  ...;
}
@media (min-width: 680px) {
  .bar {
    ...;
  }
}
@media (min-width: 320px) {
  .bar {
    ...;
  }
}
@media (min-width: 1024px) {
  .bar {
    ...;
  }
}
/* mqp:end */
```


Your CSS file at output:

```css
.foo {
  ...;
}
.bar {
  ...;
}
@media (min-width: 320px) {
  .foo {
    ...;
  }
  .bar {
    ...;
  }
}
@media (min-width: 680px) {
  .bar {
    ...;
  }
}
@media (min-width: 1024px) {
  .bar {
    ...;
  }
}
```

## 📰 Changelog

Releases are managed with **GitHub Releases**, including the changelog for each one.<br/>
Access to the [Changelog](/CHANGELOG.md) to find out about the detailed changes to each release.

## 📣 Stay in touch

- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
- Join our [Workplace group](https://adeo.workplace.com/groups/427492661454646/)

## 🐞 Bugs and feature requests

Have a bug or a feature request?<br/>
Please [open an issue](https://github.com/adeo/postcss-prepend/issues/new/choose) and use the template associated with your request.

## 🧑‍💻 Contributors

**Owners**

**[ADEO Design System Team](https://github.com/orgs/adeo/teams/adeo-design-system)**

**Author**

- **[Gaël Boyenval](https://github.com/gael-boyenval)**

**Maintainers**

- **[David Martin](https://github.com/dmartinds)**
- **[Mohamed Mokhtari](https://github.com/mohamedMok)**
- **[Trésor Iloyi](https://github.com/tiloyi)**

## 📄 Licensing

This project is licensed under the **Apache V2** License. See [LICENSE](LICENSE) for more information.