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:

``tsx
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 (

{style}
{animationStyle}


Change style


);
};

render();
`

API

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

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

Backers

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









src="https://avatars2.githubusercontent.com/u/17221813?v=4&s=150"> Tom

Maintainers

st-jss` is brought to you by:

src="https://avatars2.githubusercontent.com/u/12079044?s=150&v=4"> Michael Mannseicher

src="https://avatars3.githubusercontent.com/u/454817?v=4&s=150"> Aron Homberg

Contributing

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