css-in-js-helper

A utility library to enhance CSS-in-JS with extra functionalities. Integrate seamlessly with libraries like styled-components, emotion, and leverage utilities from polished, classnames, and lodash.

Installation

npm install css2js-helper

Usage

Extend Styled Component

Extend a styled component with additional styles.

import { extendStyled } from 'css-in-js-helper';
import styled from 'styled-components';

const Button = styled.button``;
const ExtendedButton = extendStyled(Button, `color: blue;`);

Apply Emotion CSS

Apply emotion css with utility functions.

import { applyEmotionCss } from 'css2js-helper';

const className = applyEmotionCss`color: red;`;

Lighten and Darken Color

Lighten or darken a color.

import { lightenColor, darkenColor } from 'css-in-js-helper';

const lightenedColor = lightenColor('#000', 0.2);
const darkenedColor = darkenColor('#fff', 0.2);

Combine Class Names

Combine class names conditionally.

import { combineClassNames } from 'css2js-helper';

const className = combineClassNames('base-class', { 'optional-class': true });

Merge Styles

Merge styles with lodash.

import { mergeStyles } from 'css2js-helper';

const style = mergeStyles({ color: 'red' }, { backgroundColor: 'blue' });

License

MIT