postcss-custom-media-generator


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

Install

``shell
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.

`js
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:

`postcss
@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:

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

/ becomes /

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

[postcss-media-minmax]: https://github.com/postcss/postcss-media-minmax
[postcss-custom-media]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
[postcss-preset-env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env