# css-managed-media

> CSS managed media runtime

Latest version **0.0.2-alpha.3** (published 2018-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-managed-media
pnpm add css-managed-media
yarn add css-managed-media
bun add css-managed-media
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2-alpha.3 |
| Published | 2018-05-11 |
| First published | 2018-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marina Miyaoka |
| Maintainers | miyaokamarina |

## Links

- npm: https://www.npmjs.com/package/css-managed-media
- Repository: https://github.com/miyamarisubs/css-managed-media
- npm.io page: https://npm.io/package/css-managed-media

## Dependencies (1)

- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.0.0-beta.46

## Recent versions

- 0.0.2-alpha.3 (latest) — 2018-05-11
- 0.0.2-alpha.2 — 2018-05-10
- 0.0.2-alpha.1 — 2018-05-10
- 0.0.2-alpha.0 — 2018-05-10
- 0.0.1 — 2018-05-07

## README

# css-managed-media

> Really custom media in CSS

CSS managed media runtime API.

## Install

```bash
$ yarn add -D postcss-managed-media
$ yarn add css-managed-media
```

## Usage

### `postcss.config.js`

```javascript
const managedMedia = require('postcss-managed-media').default;

module.exports = {
    plugins: [managedMedia],
};
```

### `styles.less`

```less
// Assuming you use both `less-loader` and `postcss-loader`.
// Also assuming you transpile LESS vars to CSS vars.

@managed-media --light;

@bg: #000;
@fg: #fff;

.page {
    background-color: @bg;
    color: @fg;
}

@media (--light) {
    @bg: #fff;
    @fg: #000;
}
```

### `media.js`

```javascript
import { setMedia } from 'css-managed-media';
import { store } from './store';

let { theme: current } = store.getState();
const setLight = setMedia('light', current === 'light');

setLight();

store.subscribe(() => {
    const { theme: next } = store.getState();

    if (current !== next) {
        current = next;
        setLight();
    }
});
```

## API

### `setMedia`

Signature: `setMedia(media: string, value: boolean = false): void`.

Arguments:

*   `media: string` — feature name.
*   `value?: boolean` — `true` to switch feature on, `false` or nothing — to switch it off.

## Roadmap

*   Discrete features (`--theme: light`, `--theme: dark`).
*   Integration with `postcss-custom-media`.
    *   Discrete custom media:
        ```css
        @custom-media --size {
            s: (max-width: 599px);
            m: (min-width: 600px) and (max-width: 1199px);
            l: (min-width: 1200px);
        }
        ```
*   `matchMedia` support.
*   Future-proof `setMedia` API. (E.g. on `CSS` global.)
*   Parametrized managed media (`--min-scrollbar-width: 10px`).

# License

MIT

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