eo-css-tools

eo-css-tools

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

Utils

• breakpoint

Install

# 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

breakpoint

Example

import { css } from 'YOUR_BELOWED_CSS_IN_JS_FRAMEWORK';
import { breakpoint } from 'eo-css-tools';

const style = {
  root: css`
    height: 400px;

    // Mobile portrait breakpoint
    ${breakpoint([0, 400]).css`
      height: 200px;
    `}

    // Tablet breakpoint
    ${breakpoint({ min: '401px', max: '1024px' }).css`
      height: 300px;
    `}
  `,
};

Result

.root_xk292ls {
  height: 400px;
}

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

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