# @rhubarb-css/styled-components > Rhubarb CSS - Styled Components is a collection of functions to use with the Styled Components library to write progressively-enhanced CSS. Latest version **1.0.0** (published 2022-07-07) · ISC license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @rhubarb-css/styled-components pnpm add @rhubarb-css/styled-components yarn add @rhubarb-css/styled-components bun add @rhubarb-css/styled-components ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2022-07-07 | | First published | 2022-06-30 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 33.2 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Daniel Yuschick | | Maintainers | yuschick | | Keywords | css, rhubarb, styled components, mixins, logical css, typescript | ## Links - npm: https://www.npmjs.com/package/@rhubarb-css/styled-components - Repository: https://github.com/rhubarb-css/rhubarb-styled-components - Issues: https://github.com/rhubarb-css/rhubarb-styled-components/issues - npm.io page: https://npm.io/package/@rhubarb-css/styled-components ## Dependencies (1) - [esbuild](https://npm.io/package/esbuild.md) ^0.14.48 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 1.0.0 (latest) — 2022-07-07 - 0.4.0 — 2022-07-06 - 0.3.0 — 2022-07-06 - 0.2.0 — 2022-07-04 - 0.1.0 — 2022-07-02 - 0.0.12 — 2022-07-02 - 0.0.11 — 2022-06-30 - 0.0.10 — 2022-06-30 - 0.0.9 — 2022-06-30 - 0.0.8 — 2022-06-30 - 0.0.7 — 2022-06-30 - 0.0.6 — 2022-06-30 - 0.0.5 — 2022-06-30 - 0.0.4 — 2022-06-30 - 0.0.3 — 2022-06-30 - … 1 more at https://npm.io/package/@rhubarb-css/styled-components/versions ## README

Rhubarb CSS jam jar logo

Rhubarb Styled Components

[![npm version](https://badge.fury.io/js/@rhubarb-css%2Fstyled-components.svg)](https://badge.fury.io/js/@rhubarb-css%2Fstyled-components) The Rhubarb Styled Components package provides a collection of TypeScript-ready functions to support writing progressively-enhanced logical CSS with [Styled Components](https://styled-components.com/). 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. ```bash npm i @rhubarb-css/styled-components ``` ```bash 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. ```jsx 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 ```jsx 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 ```jsx import { Margin } from "@rhubarb-css/styled-components"; return ...; const Container = styled.section` ${({ $margin }) => Margin({ all: $margin })}; `; ``` ## :book: Documentation ### Border ```jsx import { Border } from "@rhubarb-css/styled-components"; ``` | Prop | Type | CSS Property (_Fallback_) | | ---------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------- | | border | string \| 0 | border | | borderColor | string | border-color | | borderStyle | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#syntax) | border-inline-start-style (_border-left-style_) | | inlineStartWidth | string \| 0 | border-inline-start-width (_border-left-width_) | ### Border Radius ```jsx 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 ```jsx import { Layout } from "@rhubarb-css/styled-components"; ``` | Prop | Type | CSS Property (_Fallback_) | | ------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | blockSize | string \| 0 | block-size (_height_) | | captionSide | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side#syntax) | caption-side | | clear | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/clear#syntax) | 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](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#syntax) | overflow | | overflowBlock | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#syntax) | overflow-block (_overflow-x_) | | overflowInline | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#syntax) | overflow-inline (_overflow-y_) | | overscrollBehavior | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior#syntax) | overscroll-behavior | | overscrollBehaviorBlock | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior#syntax) | overscroll-behavior-block (_overscroll-behavior-x_) | | overscrollBehaviorInline | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior#syntax) | overscroll-behavior-inline (_overscroll-behavior-y_) | | resize | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/resize#syntax) | resize | | textAlign | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#syntax) | text-align | ### Margin ```jsx 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](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin | | scrollBlock | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin-block-start/end (_scroll-margin-top/bottom_) | | scrollBlockEnd | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin-block-end (_scroll-margin-bottom_) | | scrollBlockStart | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin-block-start (_scroll-margin-top_) | | scrollInline | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin-inline-start/end (_scroll-margin-left/right_) | | scrollInlineEnd | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin-inline-end (_scroll-margin-right_) | | scrollInlineStart | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin#syntax) | scroll-margin-inline-start (_scroll-margin-left_) | ### Padding ```jsx 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](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding | | scrollBlock | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding-block-start/end (_scroll-padding-top/bottom_) | | scrollBlockEnd | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding-block-end (_scroll-padding-bottom_) | | scrollBlockStart | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding-block-start (_scroll-padding-top_) | | scrollInline | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding-inline-start/end (_scroll-padding-left/right_) | | scrollInlineEnd | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding-inline-end (_scroll-padding-right_) | | scrollInlineStart | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding#syntax) | scroll-padding-inline-start (_scroll-padding-left_) | ### Position ```jsx 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](https://developer.mozilla.org/en-US/docs/Web/CSS/float#syntax) | float | | inlineEnd | string \| 0 | inset-inline-end (_right_) | | inlineStart | string \| 0 | inset-inline-start (_left_) | | inset | [See MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/inset#syntax) | inset (_top/right/bottom/left_) | --- _Source: https://npm.io/package/@rhubarb-css/styled-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._