Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jasonraimondi/postcss-custom-media-generator

Generates mobile first `@custom-media` rules from a configuration object.
https://github.com/jasonraimondi/postcss-custom-media-generator

custom-media mobile-first mobile-first-css postcss postcss-custom-media postcss-custom-media-generator postcss-plugin

Last synced: 3 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/jasonraimondi/postcss-custom-media-generator
Owner: jasonraimondi
License: mit
Created: 2023-01-15T05:05:37.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-01-18T03:08:53.000Z (about 2 years ago)
Last Synced: 2024-08-10T23:12:40.087Z (6 months ago)
Topics: custom-media, mobile-first, mobile-first-css, postcss, postcss-custom-media, postcss-custom-media-generator, postcss-plugin
Language: TypeScript
Homepage:
Size: 175 KB
Stars: 9
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # postcss-custom-media-generator

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/allmyfutures/postcss-custom-media-generator/test.yml?branch=main&label=Unit%20Tests&style=flat-square)](https://github.com/allmyfutures/postcss-custom-media-generator)

[![Test Coverage](https://img.shields.io/codeclimate/coverage/allmyfutures/postcss-custom-media-generator?style=flat-square)](https://codeclimate.com/github/allmyfutures/postcss-custom-media-generator/test_coverage)

[![GitHub package.json version](https://img.shields.io/github/package-json/v/allmyfutures/postcss-custom-media-generator?style=flat-square)](https://github.com/allmyfutures/postcss-custom-media-generator/releases/latest)

[![NPM Downloads](https://img.shields.io/npm/dt/postcss-custom-media-generator?label=npm%20downloads&style=flat-square)](https://www.npmjs.com/package/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