This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@rhubarb-css/styled-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Rhubarb CSS jam jar logo

Rhubarb Styled Components

npm version

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)

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Published

Version History

  • Version
    Downloads (Last 7 Days)
    • Published

Package Sidebar

Install

npm i @rhubarb-css/styled-components

Weekly Downloads

16

Version

1.0.0

License

ISC

Unpacked Size

34 kB

Total Files

23

Last publish

Collaborators

  • yuschick