@nju33/styled-components

My styled-components helpers

Usage

/**
 * Before, To install this and styled-components
 * ```sh
 * yarn add @nju33/styled-components styled-components @types/styled-components
 * ```
 */
import {Mixin, RequiredAtomProps, createMedia} from '@nju33/styled-components';

Example

const foo = 'foo' as 'foo';
const bar = 'bar' as 'bar';

type MixinName = typeof foo | typeof bar;
type CurrentComponentMixin = Mixin<MixinName>;

const mixin: CurrentComponentMixin = (mixinName => (
  first,
  ...interpolations
) => css`
  &.${mixinName} {
    ${css(first, ...interpolations)}
  }
`) as CurrentComponentMixin;

mixin[foo] = mixin(foo)`
  font-size: 15px;
`;

mixin[bar] = mixin(bar)`
  font-size: 13;
`;

// tslint:disable-next-line:no-unused-expression
styled.div<RequiredAtomProps<MixinName>>`
  ${mixin.foo};
  ${mixin.bar};
`;

interface Sizes {
	desktop: number;
	tablet: number;
	phone: number;
}

const media = createMedia<Sizes>({
	desktop 992,
	tablet: 768,
	phone: 576
});

styled.div`
	color: blue;

	${media.desktop`
		color: orange;
	`};
`;
// color: blue;
// @media screen and (min-width: 992px) {
//   color: orange;
// }