Nonstop Progressive Marxism

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    OrganiCSS standard logo with icon and name

    Styled Components

    npm version

    The OrganiCSS 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 OrganiCSS Styled Components, first install the package into a Styled Components project.

    npm i @organicss/styled-components
    yarn add @organicss/styled-components

    🚀 Getting Started

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

    import { Margin, Padding } from '@organicss/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 '@organicss/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 '@organicss/styled-components';
    return <Container $margin="var(--space-lg)">...</Container>;
    const Container = styled.section`
        ${({ $margin }) => Margin({ all: $margin })};

    📖 Documentation


    import { Border } from '@organicss/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 '@organicss/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)


    import { Layout } from '@organicss/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
    textAlignLast See MDN Docs text-align-last


    import { Margin } from '@organicss/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)


    import { Padding } from '@organicss/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)


    import { Position } from '@organicss/styled-components';
    Prop Type CSS Property (Fallback)
    block See MDN Docs inset-block (top/bottom)
    blockEnd - inset-block-end (bottom)
    blockStart - inset-block-start (top)
    float See MDN Docs float
    inline See MDN Docs inset-inline (left/right)
    inlineEnd - inset-inline-end (right)
    inlineStart - inset-inline-start (left)
    inset See MDN Docs inset (top/right/bottom/left)


    npm i @organicss/styled-components

    DownloadsWeekly Downloads






    Unpacked Size

    39.1 kB

    Total Files


    Last publish


    • yuschick