
Security News
NVD Quietly Sweeps 100K+ CVEs Into a “Deferred” Black Hole
NVD now marks all pre-2018 CVEs as "Deferred," signaling it will no longer enrich older vulnerabilities, further eroding trust in its data.
tss-react
Advanced tools
tss-react is a TypeScript-first CSS-in-JS library for React that allows you to write type-safe styles using TypeScript. It provides a simple and efficient way to manage styles in your React applications, leveraging the power of TypeScript for better type safety and developer experience.
Type-safe CSS-in-JS
This feature allows you to create type-safe styles using TypeScript. The `makeStyles` function generates a hook that you can use to apply styles to your components.
```typescript
import { makeStyles } from 'tss-react/makeStyles';
const useStyles = makeStyles()((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
padding: theme.spacing(2),
},
}));
function MyComponent() {
const { classes } = useStyles();
return <div className={classes.root}>Hello, World!</div>;
}
```
Theming support
tss-react supports theming, allowing you to create and use themes in your application. This example demonstrates how to create a theme and apply it to a component using the `ThemeProvider` from Material-UI.
```typescript
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { makeStyles } from 'tss-react/makeStyles';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
},
});
const useStyles = makeStyles()((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
padding: theme.spacing(2),
},
}));
function MyComponent() {
const { classes } = useStyles();
return <div className={classes.root}>Hello, World!</div>;
}
function App() {
return (
<ThemeProvider theme={theme}>
<MyComponent />
</ThemeProvider>
);
}
```
Dynamic styles
This feature allows you to create dynamic styles based on props. The `makeStyles` function can accept a parameter that you can use to generate styles dynamically.
```typescript
import { makeStyles } from 'tss-react/makeStyles';
const useStyles = makeStyles<{ color: string }>()((theme, { color }) => ({
root: {
backgroundColor: color,
padding: theme.spacing(2),
},
}));
function MyComponent({ color }: { color: string }) {
const { classes } = useStyles({ color });
return <div className={classes.root}>Hello, World!</div>;
}
```
Emotion is a popular CSS-in-JS library that allows you to style applications quickly with string or object styles. It provides powerful and flexible styling capabilities, but it does not have built-in TypeScript-first support like tss-react.
Styled-components is another widely-used CSS-in-JS library that uses tagged template literals to style components. It offers a great developer experience and theming support, but it lacks the TypeScript-first approach of tss-react.
JSS is a high-performance JavaScript to CSS compiler that works well with React. It provides a powerful API for dynamic styling and theming, but it does not offer the same level of TypeScript integration as tss-react.
✨ Dynamic CSS-in-TS solution, based on Emotion ✨
Home - Documentation - Playground
You can think of tss-react
as @emotion/jss
.
It's, in essence, a type-safe equivalent of the JSS API but powered by Emotion,
just like @emotion/styled
is the styled-components API but powered by Emotion.
$
syntax.@emotion
cache.withStyles
API featured, to help you migrate away from @material-ui v4.@emotion/react
, it has very little impact on the bundle size alongside mui (~5kB minziped).'tss-react'
can be used as an advantageous replacement for @material-ui v4 makeStyles
and 'react-jss'
.tss-react
won’t be yet another entry in your peerDependencies
.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).
The more ⭐️ the project gets, the more time I spend improving and maintaining it. Thank you for your support 😊
Needless to mention, this library is heavily inspired by JSS, the OG CSS-in-JS solution.
Running the demo apps:
git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
npx tsc -w & npx tsc --module es2015 --outDir dist/esm -w
# Open 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
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
FAQs
Type safe CSS-in-JS API heavily inspired by react-jss
The npm package tss-react receives a total of 217,430 weekly downloads. As such, tss-react popularity was classified as popular.
We found that tss-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NVD now marks all pre-2018 CVEs as "Deferred," signaling it will no longer enrich older vulnerabilities, further eroding trust in its data.
Research
Security News
Lazarus-linked threat actors expand their npm malware campaign with new RAT loaders, hex obfuscation, and over 5,600 downloads across 11 packages.
Security News
Safari 18.4 adds support for Iterator Helpers and two other TC39 JavaScript features, bringing full cross-browser coverage to key parts of the ECMAScript spec.