Seamstress

Notice

This is an in-progress branch of Seamstress -- most documentation is currently out of date/missing.

A powerful styling layer for reusable React components.

Take a look at some examples or view the API reference for details.

Features

Conditional styles (inspired by [attr])

<Toggler
  toggled={...}
  styles={{
    '[toggled]': {
      color: 'black',
    },
  }}
/>

Nestable component selectors (inspired by ::psuedo-elements)

<Toggler
  styles={{
    '::indicator': {
      color: 'black',
    },
  }}
/>

Developer-friendly warnings

::check is not a valid sub-component of `Toggler`.

Valid sub-components are:

::checkmark
::label

Malformed selector: ":indicator"

Here are some examples of valid selectors:
  ::subComponent
  ::subComponent, ::subComponent2
  [prop]
  [prop=false]
  [prop=42]
  [prop="string"], [prop2=42]
  [prop]::subComponent
  [prop1][prop2="string"]::subComponent

Compatibility

Seamstress works with any styling solutions for React that use className or style props.

Seamstress lets you author your component with one styling solution, while allowing your component's users use a different solution.

There are already some complete examples using popular styling solutions:

• React Native
• CSS Modules
• Radium
• Aphrodite
• Vanilla CSS / Inline Styles

Prior Art/Acknowledgements

• Modularise CSS the React Way - article with some ideas that influenced this library
• JedWatson/classNames - conditionally compose classNames
• casesandberg/ReactCSS - declaratively style components
• pluralsight/react-styleable - theme components with CSS modules
• markdalgleish/react-themeable - theme components with inline styles or CSS classes