Rhubarb Styled Components

The Rhubarb Styled Components package provides a collection of TypeScript-ready functions to support writing progressively-enhanced logical CSS with Styled Components. The mixins will generate logical CSS properties first, with fallbacks to catch when not supported.

Installation

To use Rhubarb Styled Components, first install the package into a Styled Components project.

npm i @rhubarb-css/styled-components

yarn add @rhubarb-css/styled-components

Getting Started

Get started using Rhubarb Styled Components by importing a mixin and calling it from inside of a Styled Components style block.

import { Margin, Padding } from "@rhubarb-css/styled-components";

const Container = styled.section`
  ${Margin({ inline: "auto" })};
  ${Padding({ block: "var(--custom-property-value)" })};
  // ...any addition styles
`;

Using with CSS Custom Properties

import { Margin } from "@rhubarb-css/styled-components";

const Container = styled.section`
  ${Margin({ block: "var(--space-lg)", inline: "calc(var(--space-lg) * 2)" })};
`;

Using with Styled Components Props

import { Margin } from "@rhubarb-css/styled-components";

return <Container $margin="var(--space-lg)">...</Container>;

const Container = styled.section`
  ${({ $margin }) => Margin({ all: $margin })};
`;

Documentation

Border

import { Border } from "@rhubarb-css/styled-components";

Prop	Type	CSS Property (Fallback)
border	string | 0	border
borderColor	string	border-color
borderStyle	See MDN Docs	border-style
borderWidth	string | 0	border-width
block	string | 0	border-block-start/end (border-top/bottom)
blockColor	string	border-block-start/end-color (border-top/bottom-color)
blockStyle	See MDN Docs	border-block-start/end-style (border-top/bottom-style)
blockWidth	string | 0	border-block-start/end-width (border-top/bottom-width)
blockEnd	string | 0	border-block-end (border-bottom)
blockEndColor	string	border-block-end-color (border-bottom-color)
blockEndStyle	See MDN Docs	border-block-end-style (border-bottom-style)
blockEndWidth	string | 0	border-block-end-width (border-bottom-width)
blockStart	string | 0	border-block-start (border-top)
blockStartColor	string	border-block-start-color (border-top-color)
blockStartStyle	See MDN Docs	border-block-start-style (border-top-style)
blockStartWidth	string | 0	border-block-start-width (border-top-width)
inline	string | 0	border-inline-start/end (border-left/right)
inlineColor	string	border-inline-start/end-color (border-left/right-color)
inlineStyle	See MDN Docs	border-inline-start/end-style (border-left/right-style)
inlineWidth	string | 0	border-inline-start/end-width (border-left/right-width)
inlineEnd	string | 0	border-inline-end (border-right)
inlineEndColor	string	border-inline-end-color (border-right-color)
inlineEndStyle	See MDN Docs	border-inline-end-style (border-right-style)
inlineEndWidth	string | 0	border-inline-end-width (border-right-width)
inlineStart	string | 0	border-inline-start (border-left)
inlineStartColor	string	border-inline-start-color (border-left-color)
inlineStartStyle	See MDN Docs	border-inline-start-style (border-left-style)
inlineStartWidth	string | 0	border-inline-start-width (border-left-width)

Border Radius

import { BorderRadius } from "@rhubarb-css/styled-components";

Prop	Type	CSS Property (Fallback)
bottomLeft	string | 0	border-end-start-radius (border-bottom-left-radius)
bottomRight	string | 0	border-end-end-radius (border-bottom-right-radius)
radius	string | 0	border-radius
topLeft	string | 0	border-start-start-radius (border-top-left-radius)
topRight	string | 0	border-start-end-radius (border-top-right-radius)

Layout

import { Layout } from "@rhubarb-css/styled-components";

Prop	Type	CSS Property (Fallback)
blockSize	string | 0	block-size (height)
captionSide	See MDN Docs	caption-side
clear	See MDN Docs	clear
maxBlockSize	string | 0	max-block-size (max-height)
minBlockSize	string | 0	min-block-size (min-height)
inlineSize	string | 0	inline-size (width)
maxInlineSize	string | 0	max-inline-size (max-width)
minInlineSize	string | 0	min-inline-size (min-width)
overflow	See MDN Docs	overflow
overflowBlock	See MDN Docs	overflow-block (overflow-x)
overflowInline	See MDN Docs	overflow-inline (overflow-y)
overscrollBehavior	See MDN Docs	overscroll-behavior
overscrollBehaviorBlock	See MDN Docs	overscroll-behavior-block (overscroll-behavior-x)
overscrollBehaviorInline	See MDN Docs	overscroll-behavior-inline (overscroll-behavior-y)
resize	See MDN Docs	resize
textAlign	See MDN Docs	text-align

Margin

import { Margin } from "@rhubarb-css/styled-components";

Prop	Type	CSS Property (Fallback)
block	string | 0	margin-block-start/end (margin-bottom/top)
blockEnd	string | 0	margin-block-end (margin-bottom)
blockStart	string | 0	margin-block-start (margin-top)
inline	string | 0	margin-inline-start/end (margin-left/right)
inlineEnd	string | 0	margin-inline-end (margin-right)
inlineStart	string | 0	margin-inline-start (margin-left)
margin	string | 0	margin
scroll	See MDN Docs	scroll-margin
scrollBlock	See MDN Docs	scroll-margin-block-start/end (scroll-margin-top/bottom)
scrollBlockEnd	See MDN Docs	scroll-margin-block-end (scroll-margin-bottom)
scrollBlockStart	See MDN Docs	scroll-margin-block-start (scroll-margin-top)
scrollInline	See MDN Docs	scroll-margin-inline-start/end (scroll-margin-left/right)
scrollInlineEnd	See MDN Docs	scroll-margin-inline-end (scroll-margin-right)
scrollInlineStart	See MDN Docs	scroll-margin-inline-start (scroll-margin-left)

Padding

import { Padding } from "@rhubarb-css/styled-components";

Prop	Type	CSS Property (Fallback)
block	string | 0	padding-block-start/end (padding-top/bottom)
blockEnd	string | 0	padding-block-end (padding-bottom)
blockStart	string | 0	padding-block-start (padding-top)
inline	string | 0	padding-inline-start/end (padding-left/right)
inlineEnd	string | 0	padding-inline-end (padding-right)
inlineStart	string | 0	padding-inline-start (padding-left)
padding	string | 0	padding
scroll	See MDN Docs	scroll-padding
scrollBlock	See MDN Docs	scroll-padding-block-start/end (scroll-padding-top/bottom)
scrollBlockEnd	See MDN Docs	scroll-padding-block-end (scroll-padding-bottom)
scrollBlockStart	See MDN Docs	scroll-padding-block-start (scroll-padding-top)
scrollInline	See MDN Docs	scroll-padding-inline-start/end (scroll-padding-left/right)
scrollInlineEnd	See MDN Docs	scroll-padding-inline-end (scroll-padding-right)
scrollInlineStart	See MDN Docs	scroll-padding-inline-start (scroll-padding-left)

Position

import { Position } from "@rhubarb-css/styled-components";

Prop	Type	CSS Property (Fallback)
blockEnd	string | 0	inset-block-end (bottom)
blockStart	string | 0	inset-block-start (top)
float	See MDN Docs	float
inlineEnd	string | 0	inset-inline-end (right)
inlineStart	string | 0	inset-inline-start (left)
inset	See MDN Docs	inset (top/right/bottom/left)