JSPM

  • Created
  • Published
  • Downloads 38503
  • Score
    100M100P100Q151594F
  • License MIT

Standard interfaces for Styletron

Package Exports

  • styletron-standard
  • styletron-standard/dist/browser.es5.es.js
  • styletron-standard/dist/browser.es5.js
  • styletron-standard/dist/index.es.js
  • styletron-standard/dist/index.js

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 (styletron-standard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

styletron-standard

npm version dependencies status

Opinionated, standard interfaces for Styletron.

Installation

yarn add styletron-standard

API

Style object interface

import type {styleT} from "styletron-standard";

styletron-standard defines a specific style object interface (along with corresponding Flow type definitions).

Camel case properties

CSS property names are camel cased.

const style: styleT = {
  textAlign: "center"
};

Pseudo classes

Nesting is used for psuedo selectors.

const style: styleT = {
  textAlign: "center"
  ":hover": {
    color: "red"
  }
};

Media queries

To define styles that correspond to media queries, use nested style object.

const style: styleT = {
  textAlign: "center"
  "@media (max-width: 800px)": {
    color: "red"
  }
};

Declarative @keyframes

The animationName property takes a string, but declarative animation is also supported.

import type {animationT} from "styletron-standard";

const animation: animationT = {
  to: {},
  from: {}
};

const style: styleT = {
  animationName: animation
};

Declarative @font-face

The fontFamily property takes a string, fonts can also be used declaratively.

import type {fontT} from "styletron-standard";

const font: fontT = {
  src: "..."
};

const style: styleT = {
  fontFamily: font
};

Engine interface

import type {StandardEngine} from "styletron-standard";

styletron-standard also defines a standard engine interface.

interface StandardEngine {
  renderStyle,
  renderKeyframes,
  renderFontFace,
};

Driver

import type {StandardEngine} from "styletron-standard";