Provide a flexible, highly-expressive styling API for your complex React Components.
JavaScript Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
examples
git_hooks
src
test
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.remarkignore
.remarkrc
LICENSE
README.md
install_git_hooks.sh
package.json

README.md

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:

Prior Art/Acknowledgements