# css-in-js-media

> easy code with css-in-js with mediaquery via css-in-js-media

Latest version **2.0.1** (published 2021-06-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-in-js-media
pnpm add css-in-js-media
yarn add css-in-js-media
bun add css-in-js-media
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-06-16 |
| First published | 2019-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 209.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 140 |
| Author | ideveloper2 |
| Maintainers | ideveloper2 |
| Keywords | emotion.js, emotion, styled-component, styled-components, css-in-js, include-media |

## Links

- npm: https://www.npmjs.com/package/css-in-js-media
- Repository: https://github.com/Brew-Brew/css-in-js-media
- Homepage: https://github.com/Brew-Brew/css-in-js-media#readme
- Issues: https://github.com/Brew-Brew/css-in-js-media/issues
- npm.io page: https://npm.io/package/css-in-js-media

## Dependencies (1)

- [rollup](https://npm.io/package/rollup.md) ^2.0.6

## 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

- 2.0.1 (latest) — 2021-06-16
- 2.0.0 — 2021-02-21
- 1.0.15 — 2020-06-21
- 1.0.14 — 2020-05-09
- 1.0.13 — 2020-05-09
- 1.0.12 — 2020-05-09
- 1.0.11 — 2020-03-17
- 1.0.10 — 2020-03-17
- 1.0.9 — 2020-03-17
- 1.0.8 — 2020-02-09
- 1.0.7 — 2019-05-19
- 1.0.6 — 2019-05-19
- 1.0.5 — 2019-05-19
- 1.0.4 — 2019-05-19
- 1.0.3 — 2019-05-19
- … 3 more at https://npm.io/package/css-in-js-media/versions

## README

# css-in-js-media :art:

**Minified and Simplified include-media with CSS-in-JS**

when you style with css-in-js (emotion, styled-component) you can perfectly and easily deal with responsive design with this `css-in-js-media` which is similar with [include-media](https://include-media.com/) and support type system(ts)

If you think this library is helpful, Support by give :star:

**Migrate to Typescript at version V2 :tada:**

**Introduced at**

- https://styled-components.com/ecosystem helpers section
- https://github.com/emotion-js/emotion#ecosystem

---

### :book: documentation

- https://css-in-js-media.netlify.app/#/

---

### :rocket: install & default usage

```
npm install css-in-js-media
import media from "css-in-js-media";
```

- example in `code-sandbox-link` : https://codesandbox.io/embed/k28q2nv2w7

#### media-query break-point (default breakpoint)

```
smallPhone: 320
phone: 375
tablet: 768
desktop: 1024
largeDesktop: 1440

```

---

### :school_satchel: size

![image](https://user-images.githubusercontent.com/26598542/57980351-92853600-7a65-11e9-8ce0-5e0f5acead4f.png)

---

### :question: how-to-use

with css-in-js library (ex: emotion.js , styled-component)

- example with `emotion.js`

```javascript
import media from "css-in-js-media";

export const exampleClass = css`
  color: red;
  ${media(">desktop")} {
    font-size: 15px;
  }
  ${media("<=desktop", ">tablet")} {
    font-size: 20px;
  }
  ${media("<=tablet", ">phone")} {
    font-size: 25px;
  }
  ${media("<=phone")} {
    font-size: 30px;
  }
`;
```

- example with `styled-component`

```javascript
import media from "css-in-js-media";

const exampleClass = styled.h1`
  color: red;
  ${media(">desktop")} {
    font-size: 15px;
  }
  ${media("<=desktop", ">tablet")} {
    font-size: 20px;
  }
  ${media("<=tablet", ">phone")} {
    font-size: 25px;
  }
  ${media("<=phone")} {
    font-size: 30px;
  }
`;
```

#### set flexible breakpoints (optional)

⚠️ You should set this in entry point file (root file) 

```javascript
import { setBreakPoints } from "css-in-js-media";
setBreakPoints({ desktop: 1440, largeDesktop: 1500 });

// or string size
setBreakPoints({ desktop: "140rem", largeDesktop: "calc(30 * 50px)" });
```

#### get breakpoints (optional)

```javascript
import { getBreakPoints } from "css-in-js-media";
getBreakPoints();
// default breakpoints
// {
//   smallPhone: 320;
//   phone: 375;
//   tablet: 768;
//   desktop: 1024;
//   largeDesktop: 1440;
// }
```

---

### :heart: THANKS

- https://github.com/koansang
- https://github.com/yongdamsh

### :bug: Bug reporting

[Issue](https://github.com/Brew-Brew/css-in-js-media/issues)

### License

[MIT](./LICENSE)

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