PostCSS Media Queries Packer On Demand is a PostCSS plugin built for Adeo's Design System needs that allows to group CSS media queries on demand.
## π¨ 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.