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
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";