@rhubarb-css/styled-components v1.0.0

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.

:robot: 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

:rocket: 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 })};
`;

:book: Documentation

Border

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

Border Radius

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

Layout

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

Margin

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

Padding

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

Position

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