# rework-custom-media

> W3C-style custom media queries for Rework

Latest version **0.2.0** (published 2014-09-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install rework-custom-media
pnpm add rework-custom-media
yarn add rework-custom-media
bun add rework-custom-media
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2014-09-05 |
| First published | 2014-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Maintainers | necolas |
| Keywords | css, custom-media, rework, media-queries, media-query, preprocessor, rework-plugin |

## Links

- npm: https://www.npmjs.com/package/rework-custom-media
- Repository: https://github.com/reworkcss/rework-custom-media
- Issues: https://github.com/reworkcss/rework-custom-media/issues
- npm.io page: https://npm.io/package/rework-custom-media

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2014-09-05
- 0.1.1 — 2014-06-22
- 0.1.0 — 2014-06-20

## README

# rework-custom-media [![Build Status](https://travis-ci.org/reworkcss/rework-custom-media.png)](https://travis-ci.org/reworkcss/rework-custom-media)

A [Rework](https://github.com/reworkcss/rework) (`>=1.0.0`) plugin to add support for the
[W3C-style CSS Custom Media Queries](http://dev.w3.org/csswg/mediaqueries/#custom-mq) syntax.

## Installation

```
npm install rework-custom-media
```

## Use

As a Rework plugin:

```js
// dependencies
var fs = require('fs');
var rework = require('rework');
var media = require('rework-custom-media');

// css to be processed
var css = fs.readFileSync('build/build.css', 'utf8').toString();

// process css using rework-custom-media
css = rework(css).use(media()).toString();
```

## Options

### map

Optionally, you may define the `<media-query-list>` for each `<extension-name>`
in a JavaScript object that is passed to the function.

```js
var options = {
  map: {
    '--wide-screen': 'screen and (min-width:900px)'
  }
}

var out = rework(css).use(media(options)).toString();
```

## CSS syntax

A custom media query is defined with the `@custom-media` rule. Its scope is
global.

```css
@custom-media <extension-name> <media-query-list>;
```

This defines that the custom media query named by the `<extension-name>`
represents the given `<media-query-list>`.

The `<extension-name>` can then be used in a media feature. The alias must be
wrapped in parentheses.

```css
@custom-media --narrow-window screen and (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
```

If an undefined `<extension-name>` is used by a media feature, the media
feature will be stripped from the output, and a warning will be logged to the
console.

## License

MIT

---
_Source: https://npm.io/package/rework-custom-media · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._