Package Exports

stylistic

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylistic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Stylistic

A small library to extract style and CSS transform declarations from a React props object into a style object, with some helpful conversions along the way. See stylistic-elements for the higher-level application of this.

For example:

import {extract} from 'stylistic';

extract({
  id: 'myElement',
  onClick: onClickHandler,
  marginTop: 12,
  translateY: 24,
});

// Returns:

{
  id: 'myElement',
  onClick: onClickHandler,
  style: {
    marginTop: 12,
    transform: 'translate(0, 24px)',
  }
}

Note: this is a work-in-progress. Support for browser prefixing is coming.

Supported CSS properties

All CSS properties should be supported. If I missed any, file a bug.

A few properties have special behaviors:

Colors can be provided as [r, g, b, a] arrays as well as standard CSS strings (this can be useful for animating).
backgroundImage takes a path/URL directly, no need to wrap it in url().
letterSpacing and lineHeight assume pixels if you supply a number, no need to add px.

Supported transform properties

translateX
translateY
translateZ
scaleX
scaleY
rotateX
rotateY
rotateZ