css-in-js-styles-utils

Utils for Styled Components (packages: styled-components, @emotion, linaria etc.).

Table of content

1. Installation and usage
   • css-in-js normalize and reset
   • css-in-js mixins
   • React components utils
2. Licence
3. Contributing

Installation and usage

Step 1:

npm i css-in-js-styles-utils

Step 2:

Import whatever function you need. See description below.

css-in-js normalize and reset

Normalize

This normalizes styles for styled components packages, to use it you need to install one of the styled-components packages like: @emotion. This is a function witch has some default arguments. You can change it.

Name	Default value	Description
fontSize	'1.4rem'	font on body
lineHeight	1.5	line-height on body
baseFontSize	'62.5%'	font on html (this do 1rem to be 10px)

1import { css } from '@emotion/react';
2import { NormalizeStyles } from 'css-in-js-styles-utils';
3
4// @emotion
5const GlobalStyles = css`
6  ${NormalizeStyles(
7    fontSize,
8    lineHeight,
9    baseFontSize
10  )};
11`;
12
13export {
14  GlobalStyles
15};

Reset [WIP]

1import { css } from '@emotion/react';
2import { ResetStyles } from 'css-in-js-styles-utils';
3
4// @emotion
5const GlobalStyles = css`
6  ${ResetStyles(
7    fontSize,
8    lineHeight,
9    baseFontSize
10  )};
11`;
12
13export {
14  GlobalStyles
15};

css-in-js mixins

List of mixins

breakpoint's mixins and default breakpoints

• breakpoints - list of default breakpoints
• breakpointMinWidthMixin - Responsive web design - min-width mixin
• breakpointMaxWidthMixin - Responsive web design - max-width mixin

1import { breakpoints } from 'css-in-js-styles-utils';

Default breakpoints values:

Breakpoint name	Value
smallPhone	320px
portraitPhone	360px
landscapePhone	480px
smallTablet	600px
portraitTablet	768px
landscapeTablet	840px
smallLaptop	1024px
laptop	1280px
desktop	1366px
hdDesktop	1440px
fhdDesktop	1920px

Default breakpoints height values:

Breakpoint name	Value
smallPhone	320px
landscapePhone	360px
portraitPhone	480px
smallLaptop	600px
laptop	768px
desktop	840px
hdDesktop	920px
fhdDesktop	1280px

Use with mixins

1. Create style mixin:

   1// styles/breakpointMixin.js
   2
   3import { breakpoints, breakpointMinWidthMixin } from 'css-in-js-styles-utils';
   4
   5export const breakpointMixin = Object
   6  .keys(breakpoints)
   7  .reduce(
   8    (acc, current) => breakpointMinWidthMixin(acc, current, breakpoints), {}
   9  );

   And then you can use it like this:

   1// some component e.g.: Button.styles.js
   2// import breakpointMixin from previesly created file
   3
   4const ButtonWrapper = styled.div`
   5  color: yellow; // mobile styles
   6  
   7  ${breakpointMixin.smallTablet(css`
   8    color: red; // style for 600px width or more
   9  `)};
   10`;

   * with other breakpoint's mixins do the same.

2. Import every time

   @TODO

OPTIONS:

1. You can use your own breakpoint's object:

1// 1. Create style mixin
2
3// styles/breakpointMixin.js
4import { breakpointMinWidthMixin } from 'css-in-js-styles-utils';
5
6const breakpoints = {
7  phone: '360px',
8  tablet: '600px',
9  laptop: '1280px',
10  desktop: '1366px'
11};
12
13export const breakpointMixin = Object
14  .keys(breakpoints)
15  .reduce(
16    (acc, current) => breakpointMinWidthMixin(acc, current, breakpoints), {}
17  );
18
19// some component e.g.: Button.styles.js
20// import breakpointMixin from previesly created file
21
22const ButtonWrapper = styled.div`
23  color: yellow; // mobile styles
24  
25  // Use names that exist in yor own breakpoints variable
26  ${breakpointMixin.phone(css`
27    color: red; // style for 600px width or more
28  `)};
29`;
30
31// 2. Import every time
32
33@TODO

Change HEX color to RGB (with transparency)

Arguments:

• hex - is required, e.g. #000000 (you need to provide a 6 digit hex color)
• alpha - is optional - use if you want to have hex color with opacity

1import { hexToRgbMixin } from 'css-in-js-styles-utils';
2
3const ButtonWrapper = styled.div`
4  color: hexToRgbMixin('#000000', .3);
5`;

FontFace mixin

Arguments:

• familyName
• src - object with woff, ttf and svg paths
• weight - default: 'normal'
• fontStyle - default: 'normal'

1import { fontFaceMixin } from 'css-in-js-styles-utils';
2
3import myFontWoff from './assets/fonts/myFont.woff';
4import myFontTtf from './assets/fonts/myFont.ttf';
5import myFontSvg from './assets/fonts/myFont.svg';
6
7const src = {
8  woff: myFontWoff,
9  ttf: myFontTtf,
10  svg: myFontSvg,
11};
12
13const GlobalStyles = css`
14  // Normal
15  ${fontFaceMixin('myFontName', src)};
16  // Bold
17  ${fontFaceMixin('myFontName', src, 400)};
18  // Italic
19  ${fontFaceMixin('myFontName', src, 'normal', 'italic')};
20
21  body {
22    font-family: 'myFontName';
23  }
24`;

React components utils

Breakpoint hooks for React

If you don't want to render some component when in mobile use useBreakpoint (checking window's innerWidth) or useBreakpointHeight (checking window's innerHeight) hook.

1import { useBreakpoint, breakpoints }  from 'css-in-js-styles-utils';
2
3const SomeComponent = (props) => {
4  // return true if window inner width is smaller or equle of provided breakpoint
5  const isMobile = useBreakpoint(breakpoints.phone);
6  
7  return (
8    <React.Fragment>
9      <div>This I want to show alway.</div>
10      {
11        isMobile ? (
12          <div>But this ony on mobile.</div>
13        ) : null
14      }
15    </React.Fragment>
16  );
17};

Licence

This project uses MIT Licence

Contributing

If you want to contribute read the contributing guidelines before opening an issue or pull request [WIP].

Style guide

This project uses Kamisama style guidelines: IF.Kamisama.