Styled-Tidy

Tidy is a lightweight set of utilities for writing clean styled-components syntax in React.

Release Version Gzip Size Codecov Report

Styled-Components is a CSS-in-Javascript approach to building components in React. I love the approach and use it in every React project I start. My biggest gripe is how clunky the syntax appears when passing props inline. Tidy simplifies the common prop scenarios to make CSS more legible. It also includes media helpers and mixins, and increases developer happiness.

Matchers

const Example = styled.div`
  ${is('enabled')`
    display: block;
  `}
`;

isnt

const Example = styled.div`
  ${isnt('enabled')`
    display: none;
  `}
`;

isAny

const Example = styled.div`
  ${isAny('size', ['sm', 'md'])`
    display: block;
  `}
`;

isntAny

const Example = styled.div`
  ${isAny('size', ['lg', 'xl'])`
    display: none;
  `}
`;

value

const Example = styled.div`
  width: ${value('size')};
`;

swap

const Example = styled.div`
  opacity: ${swap('on', 1, 0)};
`;

choose

const sizes = {
  sm: 10, md: 20, lg: 30,
};
const Example = styled.div`
  width:
    ${choose('size', sizes)}px;
`;

over

const Example = styled.div`
  ${over('count', 420)`
    color: green;
  `}
`;

under

const Example = styled.div`
  ${under('count', 420)`
    color: red;
  `}
`;

between

const Example = styled.div`
  ${between('count', 5, 10)`
    color: red;
  `}
`;

Mixins

rem

const Example = styled.div`
  width: ${rem(42)};
`;

transparentize

const red = '#FF0000';
const Example = styled.div`
  color:
    ${transparentize(red, 0.5)};
`;

opacify

const red = 'rgba(255,0,0,0.5)';
const Example = styled.div`
  color: ${opacify(red, 0.2)};
`;

flex

// direction, align, justify
const Example = styled.div`
  ${flex('row', 'center', 'left')}
`;

grid

// columns, col-gap, ?row-gap
const Example = styled.div`
  ${grid(4, 10, 20)}
`;

position

// top, ?right, ?bottom, ?left
const Example = styled.div`
  ${position('absolute', 0)}
`;

Media Queries

minWidth

const Example = styled.div`
  ${minWidth(800)`
    font-size: 1.5rem;
  `}
`;

maxWidth

const Example = styled.div`
  ${maxWidth(800)`
    font-size: 1rem;
  `}
`;

minHeight

const Example = styled.div`
  ${minHeight(420)`
    position: sticky;
  `}
`;

maxHeight

const Example = styled.div`
  ${maxHeight(420)`
    position: relative;
  `}
`;