@mozaic-ds/postcss-media-queries-packer-on-demand

PostCSS Media Queries Packer On Demand

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.

Learn more about the vision and guidelines by visiting the main documentation website.

📦 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.

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.

// 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:

/* 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:

.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.
Access to the Changelog to find out about the detailed changes to each release.

📣 Stay in touch

• Join the #mozaic-support channel on Slack
• Join our Workplace group

🐞 Bugs and feature requests

Have a bug or a feature request?
Please open an issue and use the template associated with your request.

🧑‍💻 Contributors

Owners

ADEO Design System Team

Author

• Gaël Boyenval

Maintainers

• David Martin
• Mohamed Mokhtari
• Trésor Iloyi

📄 Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.