# fela-plugin-named-media-query

> Fela plugin to support named media query syntax

Latest version **5.0.13** (published 2017-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install fela-plugin-named-media-query
pnpm add fela-plugin-named-media-query
yarn add fela-plugin-named-media-query
bun add fela-plugin-named-media-query
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.13 |
| Published | 2017-11-14 |
| First published | 2017-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2280 |
| Author | Robin Frischmann |
| Maintainers | rofrischmann |
| Keywords | fela, fela-plugin, media query, cssinjs |

## Links

- npm: https://www.npmjs.com/package/fela-plugin-named-media-query
- Repository: https://github.com/rofrischmann/fela
- Homepage: https://github.com/rofrischmann/fela#readme
- Issues: https://github.com/rofrischmann/fela/issues
- npm.io page: https://npm.io/package/fela-plugin-named-media-query

## Dependencies (1)

- [fela-utils](https://npm.io/package/fela-utils.md) ^7.0.5

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 5.0.13 (latest) — 2017-11-14
- 5.0.11 — 2017-10-20
- 5.0.10 — 2017-10-11
- 5.0.9 — 2017-10-09
- 5.0.8 — 2017-09-22
- 5.0.7 — 2017-09-01
- 5.0.6 — 2017-08-22
- 5.0.5 — 2017-08-03
- 5.0.4 — 2017-07-18
- 5.0.3 — 2017-07-14
- 5.0.2 — 2017-06-26
- 5.0.1 — 2017-06-13
- 5.0.0 — 2017-06-07
- 4.3.5 — 2017-04-28
- 4.3.4 — 2017-04-28
- … 11 more at https://npm.io/package/fela-plugin-named-media-query/versions

## README

# fela-plugin-named-media-query

<img alt="npm version" src="https://badge.fury.io/js/fela-plugin-named-media-query.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-plugin-named-media-query.svg">

This plugin is basically a convenient plugin for more readable code and better maintenance.<br>
It enables the use of named media query keys.

## Installation
```sh
yarn add fela-plugin-named-media-query
```
You may alternatively use `npm i --save fela-plugin-named-media-query`.


## Usage
Make sure to read the documentation on [how to use plugins](http://fela.js.org/docs/advanced/Plugins.html).

```javascript
import { createRenderer } from 'fela'
import namedMediaQuery from 'fela-plugin-named-media-query'

const renderer = createRenderer({
  plugins: [ namedMediaQuery() ]
})
```

### Configuration
##### Parameters
| Parameter | Value | Default | Description |
| --- | --- | --- | --- |
| mediaQueryMap | *(Object)* | `{}` | An object with shorthand-mediaQuery pairs |

##### Example
```javascript
import { createRenderer } from 'fela'
import namedMediaQuery from 'fela-plugin-named-media-query'

const namedMediaQueryPlugin = namedMediaQuery({
  desktop: '@media (min-width: 1024px)',
  tablet: '@media (min-width: 768px)'
})

const renderer = createRenderer({
  plugins: [ namedMediaQueryPlugin ]
})
```

## Example
Using the above example code:

#### Input
```javascript
{
  color: 'red',
  desktop: {
    color: 'blue'
  }
}
```
#### Output
```javascript
{
  color: 'red',
  '@media (min-width: 1024px)': {
    color: 'blue'
  }
}
```

## License
Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
Created with ♥ by [@rofrischmann](http://rofrischmann.de) and all the great contributors.

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