tss-react-mara
v4.8.6TypeScript
Type safe CSS-in-JS API heavily inspired by react-jss
0/weekUpdated 2 years agoMITUnpacked: 337.0 KB
Published by u/garronej
npm install tss-react-mara
✨ Dynamic CSS-in-TS styles engine, based on Emotion ✨
> 🆕 tss-react supports Next.js 13 App Router 🥳.
> 🗳️ I've opened a pool about introducing a new API.
'tss-react' is intended to be the replacement for
@material-ui v4 makeStyles and 'react-jss'.
- ✅ Seamless integration with MUI.
- ✅ withStyles API support.
- ✅ Server side rendering support (e.g: Next.js, Gatsby).
- ✅ Offers a type-safe equivalent of the JSS $ syntax.
- ✅ Custom @emotion cache support.
- ✅ Build on top of @emotion/react, it has very little impact on the bundle size alongside mui (~5kB minziped).
- ✅ Maintained for the foreseeable future, issues are dealt with within good delays.
- ✅ As fast as emotion (see the difference
with mui's makeStyles)
- ✅ Library authors: tss-react won’t be yet another entry in your peerDependencies.
- ✅ Support MUI's theme global styles overrides
The more ⭐️ the project gets, the more time I spend improving and maintaining it. Thank you for your support 😊
``bash`
$ yarn add tss-react @emotion/react
> While this module is written in TypeScript, using TypeScript in your application is optional
> (but recommended as it comes with outstanding benefits to both you and your codebase).
https://user-images.githubusercontent.com/6702424/166390575-0530e16b-4aff-4914-a8fa-20b02da829cc.mov
Playground:
In SSR everything should work with JavaScript disabled!
Changelog highlights
Click to expand
v4.7.0
- Reduce bundle size when using Next.js Pages dir setup, fixes #147
The \_app bundle sent to the client is down from ~160Kb to ~11Kb
v4.5.0
- Provide support for Next 13 appDir.
v4.3.0
- Provide an alternative setup for peoples
experiencing styles inconsistencies after upgrading to MUI v5 using TSS.
- Better Next.js integration API.
v4.2.0
v4.1.0
- Publish an ESM distribution. Many thanks to @jiby-aurum for he's help.
This fixes many bug when working in Vite.
v4.0.0
- No need to provide an emotion cache explicitly, MUI and TSS can share the same emotion cache.
No special instruction to make TSS work with SSR.
v3.7.1
- Retrocompatibility with React 16. Ref
v3.3.1
- I.E is almost supported out of the box (See note at the end of this sections)
Breaking changes in v3
- New API for nested selectors. We no longer use createRef().label
- have been renamed name for helping the migration from the old mui API.
Development
Running the demo apps:
`bash`
git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
npx tsc -w & npx tsc --module es2015 --outDir dist/esm -wOpen another Terminal
yarn start_spa # For testing in in a Create React App setup
yarn start_ssr # For testing in a Next.js setup
yarn start_appdir # Next.js 13 setup in App directory mode
FAQ
Click to expand
Why this instead of the hook API of Material UI v4?
First of all because makeStyle is deprecated in @material-ui v5 but also
because it has some major flaws. Let's consider this example:
`tsx
import { makeStyles, createStyles } from "@material-ui/core/styles";
type Props = {
color: "red" | "blue";
};
const useStyles = makeStyles(theme =>
createStyles<"root" | "label", { color: "red" | "blue" }>({
"root": {
"backgroundColor": theme.palette.primary.main
},
"label": ({ color }) => ({
color
})
})
);
function MyComponent(props: Props) {
const classes = useStyles(props);
return (
Hello World
);
}
`
Two pain points:
- Because TypeScript doesn't support partial argument inference,
we have to explicitly enumerate the classes name as an union type
.
- We shouldn't have to import createStyles to get correct typings.Let's now compare with
tss-reacttsx
import { makeStyles } from "./makeStyles";type Props = {
color: "red" | "blue";
};
const { useStyles } = makeStyles<{ color: "red" | "blue" }>()(
(theme, { color }) => ({
"root": {
"backgroundColor": theme.palette.primary.main
},
"label": { color }
})
);
function MyComponent(props: Props) {
const { classes } = useStyles(props);
return (
Hello World
);
}
`Benefits:
- Less verbose, same type safety.
- You don't need to remember how things are supposed to be named, just let intellisense guide you.
Besides, the hook api of
, have other problems:- One major bug: see issue
-
JSS has poor performances compared to emotion sourceWhy this instead of Styled component ?
See this issue
Compile error
TS1023If you get this error:
log
node_modules/tss-react/index.d.ts:18:10 - error TS1023: An index signature parameter type must be either 'string' or 'number'.18 [mediaQuery:
@media${string}]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; };
~~~~~~~~~~
`it means that you need to update TypeScript to a version >= 4.4.
If you can't use
instead of import { } from "tss-react".
Only withStyles()` will have slightly inferior type inference.