eo-css-tools

🛠 CSS tools that built to simplify CSS-in-JS styling.

![npm bundlephobia minzip
!npm version](https://www.npmjs.com/package/eo-css-tools)

Tools

- Breakpoints

Install

``bash


npm

npm i css-tools

yarn

yarn add css-tools
`

Compatibility

💅 Styled Components
👩‍🎤 Emotion
🌸 Linaria

Tested only with the libraries above. However, it must be compatible with any CSS-in-JS library.

Usage

$3

Generates media query with min/max-width conditions.

| Method name | Breakpoint type | Media query |
|---------------------------|-----------------------------------------|---------------|
| breakpoint([min, max]) | Custom | |
| mobile() | Mobile devices in portrait orientation | 0–479px |
| mobileLandscape() | Mobile devices in landscape orientation | 0–767px |
| tablet() | Tablet devices in portrait orientation | 0–991px |
| tabletLandscape() | Tablet devices in landscape orientation | 0–1199px |
| desktop() | Laptops and larger | 1200–Infinity |


#### Example

`typescript
import { css } from 'YOUR_BELOWED_CSS_IN_JS_FRAMEWORK';
import { breakpoint, brk, mobile } from 'eo-css-tools';

const LARGE_TO_INFINITY = ['2000px', Infinity];

const style = {
root: css
height: 200px;

/ Mobile portrait custom /
${breakpoint([undefined, 400])} {
height: 400px;
}

/ Large screens /
${brk(LARGE_TO_INFINITY)} {
height: 600px;
}

/ Mobile portrait predefined /
${mobile()} {
height: 800px;
}
,
};
`

#### Result

`css
.root_xk292ls {
height: 200px;
}

@media only screen and (max-width: 400px) {
.root_xk292ls {
height: 400px;
}
}

@media only screen and (min-width: 2000px) {
.root_xk292ls {
height: 600px;
}
}

@media only screen and (max-width: 479px) {
.root_xk292ls {
height: 800px;
}
}
``