postcss-custom-media-generator

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

Install

1pnpm 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.

1module.exports = {
2  plugins: {
3    "postcss-custom-media-generator": {
4      // you can pass in any arbitrary key, and any valid CSS media query value
5      "--light": "prefers-color-scheme: light",
6      "--dark": "prefers-color-scheme: dark",
7      sm: 600,
8      md: 800,
9      lg: 1000
10    },
11    "postcss-preset-env": {},
12  }
13};

Becomes:

1@custom-media --light (prefers-color-scheme: light);
2@custom-media --dark (prefers-color-scheme: dark);
3@custom-media --sm-only (600px <= width < 800px);
4@custom-media --sm (600px <= width);
5@custom-media --md-only (800px <= width < 1000px);
6@custom-media --md (800px <= width);
7@custom-media --lg (1000px <= width);

Write your css like this:

1@media (--md) {
2  /* styles for medium viewport */
3}
4
5/* becomes */
6
7@media (min-width: 800px) {
8  /* styles for medium viewport */
9}