Because inline style can also be cool!

Explanations (must-read)

GOALS

Styleshape allows you to create stylized components using inline css (style prop). Unlike styled-components, styleshape does not parse/compile css and does not manage classes, that's why styleshape have only 180 bytes and 0 dependencies. On the other hand you lose almost all the benefits of css like pseudo styles, autoprefixing, etc.

TRADEOFFS

Is Styleshape useful? It depends, there are tradeoffs to consider.
If you want to build complex UI, so no. You can not do simple things like putting a hover or nesting.
If you want to create simple UI to your lib without placing heavy dependency on it, so yes, it's super useful.

Usage & Examples

import shape from "styleshape";

Simple styles:

const InputX = shape("input")({
  padding: "5px 10px",
  border: `1px solid #999`,
  borderRadius: "3px"
});

<InputX />

Passing props:

const InputY = shape("input")(props => ({
  padding: "5px 10px",
  border: `1px solid ${props.error ? "#e11" : "#999"}`,
  borderRadius: "3px"
}));

<InputY error />

Stylizing other components:

// *Note: passed component must accept `style` prop*
const LargeInputY = shape(InputY)({
  padding: "10px 15px",
  fontSize: "20px"
});

<LargeInputY error />

See at codesandbox

Contribute

You can help improving this project sending PRs and helping with issues.
Also you can ping me at Twitter