st-jss

SpringType: st-jss

Nano library to work with CSS in TS

Purpose

This is an exremely tiny, yet powerful library for generation of CSS in TypeScript. st-jss does include all special types like font-face, keyframes, @media queries and :pseudo-selectors.

Features

• ✅ Implements a JSS-like API to work with CSS in TS
• ✅ Comes with namespace support
• ✅ Tiny: 591 bytes (best, brotli) - 781 bytes (worst, umd, gz)
• ✅ Zero dependencies
• ✅ First class TypeScript support
• ✅ 99% Unit Test coverage

How to

This is how using st-jss looks like:

import {Props, tsx, render} from "springtype";
import { jss } from 'st-jss';

export const MyStyledCmp = ({ children }: Props) => {
  const [animationName, animationStyle] = jss.makeAnimation('myAnimation', {
    '0%': { top: 0, left: 0, background: 'red' },
    '25%': { top: 0, left: 100, background: 'blue' },
    '50%': { top: 100, left: 100, background: 'yellow' },
    '75%': { top: 100, left: 0, background: 'green' },
    '100%': { top: 0, left: 0, background: 'red' },
  });

  const [classes, style] = jss.makeStyles({
    container: {
      // Normal jss
      fontFamily: 'Nonito',
      '@media (min-device-width: 800px)': {
        paddingTop: 50,
        flex: 1,
        ':hover': {
          backgroundColor: 'red',
        },
      },
    },
    animation: {
      paddingTop: 50,
      animationName,
      animationIterationCount: 'infinite',
      animationDuration: '4s',
    },
  });

  const onChangeStyleClick = () => {
    console.log('ref?', style);
  };

  return (
    <fragment>
      {style}
      {animationStyle}
      <div className={classes.container}>{children}</div>
      <div className={classes.animation} />
      <button type="button" onClick={onChangeStyleClick}>
        Change style
      </button>
    </fragment>
  );
};

render(<MyStyledCmp />);

API

The following contract is made between the webapp and st-jss:

export interface API {
  classNamePrefix: string;
  instanceCounter: number;
  makeFont: (style: FontFaceProperties) => IVirtualNode;
  makeAnimation: (animationName: string, style: KeyFrameProperties) => [string, IVirtualNode];
  makeStyles: <T extends string = string>(classProperty: ClassProperty<T>) => [Record<T, string>, IVirtualNode];
}

Backers

Thank you so much for supporting us financially! 🙏🏻😎🥳👍

Tom

Maintainers

st-jss is brought to you by:

Michael Mannseicher

Aron Homberg

Contributing

Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md 🎉