• Version 2.4.0
  • Published
  • 115 kB
  • 2 dependencies
  • MIT license


npm i typestyle
yarn add typestyle
pnpm add typestyle


TypeSafe CSS



class TypeStyle

class TypeStyle {}
  • Maintains a single stylesheet and keeps it in sync with requested styles


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

    Type Aliases

    type StylesTarget

    type StylesTarget = { textContent: string | null };

      Package Files (1)

      Dependencies (2)

      Dev Dependencies (7)

      Peer Dependencies (0)

      No peer dependencies.


      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/typestyle.

      • Markdown
      • HTML
        <a href="https://www.jsdocs.io/package/typestyle"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>