st-jss

    1.0.5 • Public • Published

    SpringType: st-jss

    Nano library to work with CSS in TS

    Gitter

    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 🎉

    Install

    npm i st-jss

    DownloadsWeekly Downloads

    0

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    56

    Last publish

    Collaborators

    • springtype-org