postcss-custom-media-generator

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

Install

pnpm add -D postcss-custom-media-generator

This plugin depends on further processing using one of the following methods:

• If you use postcss-preset-env, just make sure this plugin is loaded before postcss-preset-env, and you should be good to go.
• postcss-custom-media and postcss-media-minmax.

Usage

Note: This plugin should be run first in your PostCSS pipeline.

Pass in a configuration of desired global media queries.

You can pass in a key of any arbitrary string, and a value of either a string or a number.

• Strings should be valid CSS media queries
• Numbers will be turned into mobile-first queries.

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-preset-env": {},
  }
};

Becomes:

@custom-media --light (prefers-color-scheme: light);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --sm-only (600px <= width < 800px);
@custom-media --sm (600px <= width);
@custom-media --md-only (800px <= width < 1000px);
@custom-media --md (800px <= width);
@custom-media --lg (1000px <= width);

Write your css like this:

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

/* becomes */

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