eo-css-tools

css-tools

Simple data comparsion and composition library

Install

# npm
npm i css-tools

# yarn
yarn add css-tools

Usage

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)`
      height: 200px;
    `}

    // Tablet breakpoint
    ${breakpoint('400px', '1024px')`
      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;
  }
}