styled-components-gaps v1.0.5

Styled Components Gaps 💅 ✳

Minuscule 2kb with zero dependencies.

npm install styled-components-gaps

A helper function that lets you use a shorthand syntax like postcss-short-spacing in your Styled Components. But it can probably work just as well with Emotion because it outputs plain CSS.

It lets you use the shorthand margin and padding syntax of CSS while omitting certain sides you don’t want to affect. For this it uses the gap character: *. Actually, it’s easiest just to show you...

Input:

import styled from "styled-components";
import { margin } from "styled-components-gaps";

export const MarginTopBottom = styled.div`
    ${margin("1em *")}
`

Output:

import styled from "styled-components";
import { margin } from "styled-components-gaps";

export const MarginTopBottom = styled.div`
    margin-top: 1em;
    margin-bottom: 1em;
`

Furthermore,

Input:

import styled from "styled-components";
import { padding } from "styled-components-gaps";

export const PaddingsExceptRight = styled.div`
    ${padding("1em * 3em 4em")}
`

Output:

import styled from "styled-components";
import { padding } from "styled-components-gaps";

export const PaddingsExceptRight = styled.div`
    padding-top: 1em;
    padding-bottom: 3em;
    padding-left: 4em;
`

It takes a string of 2, 3 or 4 properties/gaps separated by spaces.

Also, it exports a function called spacing that lets you set the CSS property yourself, like this: spacing("margin-inline", "5px *").

This allows you to use alternative spacing properties such as margin-block, margin-inline, margin-start, margin-end, padding-block, padding-inline, padding-start, padding-end and so on.