@mozaic-ds/postcss-media-queries-packer-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.