v1.0.0 – The First Release 🎉

The First Release 🎉

Generates mobile first @custom-media rules from a configuration object.

Install

pnpm add -D postcss-custom-media-generator

Usage

Pass in a configuration of desired global media queries. You can pass in any arbitrary key, and any valid CSS media query value. Strings will be passed directly, and numbers will be turned into mobile-first queries.

A configuration object like this:

module.exports = {
  plugins: {
    "postcss-custom-media-generator": {
      // you can pass in any arbitrary key, and any valid CSS media query value
      "--light": "prefers-color-scheme: light",
      "--dark": "prefers-color-scheme: dark",
      sm: 600,
      md: 800,
      lg: 1000
    },
    "postcss-custom-media": {}
  }
};

Becomes:

@custom-media --light (prefers-color-scheme: light);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --sm-only (min-width: 600px) and (max-width: 799px);
@custom-media --sm (min-width: 600px);
@custom-media --md-only (min-width: 800px) and (max-width: 999px);
@custom-media --md (min-width: 800px);
@custom-media --lg (min-width: 1000px);
@custom-media --lg-only (min-width: 1000px);

When combined with the postcss-custom-media plugin:

@custom-media --md (min-width: 800px);

@media (--md) {
  /* styles for medium viewport */
}

/* becomes */

@media (min-width: 800px) {
  /* styles for medium viewport */
}