typestyle

constructor

constructor({ autoGenerateTag }: { autoGenerateTag: boolean });

property cssRaw

cssRaw: (mustBeValidCSS: string) => void;

• Insert raw CSS as a string. This is useful for e.g. - third party CSS that you are customizing with template strings - generating raw CSS in JavaScript - reset libraries like normalize.css that you can use without loaders

property cssRule

cssRule: (selector: string, ...objects: types.NestedCSSProperties[]) => void;

• Takes CSSProperties and registers it to a global selector (body, html, etc.)

property fontFace

fontFace: (...fontFace: types.FontFace[]) => void;

• Utility function to register an @font-face

property forceRenderStyles

forceRenderStyles: () => void;

• Renders styles to the singleton tag imediately NOTE: You should only call it on initial render to prevent any non CSS flash. After that it is kept sync using requestAnimationFrame and we haven't noticed any bad flashes.

property getStyles

getStyles: () => string;

• Allows use to use the stylesheet in a node.js environment

property keyframes

keyframes: (frames: types.KeyFrames) => string;

• Takes keyframes and returns a generated animationName

property reinit

reinit: () => void;

• Helps with testing. Reinitializes FreeStyle + raw

property setStylesTarget

setStylesTarget: (tag: StylesTarget) => void;

• Sets the target tag where we write the css on style updates

property stylesheet

stylesheet: <Classes extends string>(
    classes: types.CSSClasses<Classes>
) => { [ClassName in Classes]: string };

• Takes an object where property names are ideal class names and property values are CSSProperties, and returns an object where property names are the same ideal class names and the property values are the actual generated class names using the ideal class name as the $debugName

method style

style: {
    (...objects: types.NestedCSSProperties[]): string;
    (...objects: (false | types.NestedCSSProperties)[]): string;
};

• Takes CSSProperties and return a generated className you can use on your component