tss react

Solución dinámica de CSS-in-TS, basada en la emoción

Inicio - Documentación - Playground

Puedes pensar en tss-react como @emotion/jss .
Es, en esencia, un equivalente a tipo seguro de la API JSS pero impulsada por la emoción, al igual que @emotion/styled es la API de componentes con estilo pero impulsada por la emoción.

• Integración perfecta con Mui.
• Funciona en la aplicación Next.js y el enrutador de página.
• ? ‍️ Sin sintaxis de estilo personalizado para aprender, sin taquigrafía, solo CSS.
• ? Generación de estilo dinámico: TSS permite generar estilos basados en los accesorios y los estados internos de los componentes.
  Desafortunadamente, esto nos impide compatir el componente del servidor (RSC) en Next.js.
  Tenemos esperanzas para el apoyo futuro de RSC, dependiendo de la provisión de una solución adecuada de Vercel y React.
  Si necesita soporte de RSC hoy, puede considerar soluciones de tiempo de ejecución cero como Panda-CSS o extracto de vainilla, pero la expresión de estilos complejos es significativamente más difícil en este paradigma.
• Tu JSX sigue siendo legible. A diferencia de otra solución de estilo que tienden a abarrotar el JSX, TSS permite aislar los estilos de la estructura del componente.
  Dicho esto, en algún momento es más fácil en línea los estilos directamente dentro de sus componentes, TSS también habilita esto.
• ? ️ Elimina los conflictos de prioridad de CSS! Con TSS puede determinar la precedencia de múltiples clases aplicadas a un componente y aumentar arbitrariamente la especificidad de algunas reglas.
• ? Ofrece un equivalente a tipo seguro de la sintaxis JSS $ .
• Personaliza libremente el caché subyacente @emotion .
• API withStyles mejorada presentada, para ayudarlo a migrar lejos de @Material-UI V4.
• Construya sobre @emotion/react , tiene muy poco impacto en el tamaño del paquete junto con MUI (~ 5kb minziped).
• ⬆️ 'tss-react' se puede usar como un reemplazo ventajoso para makeStyles @material-ui v4 y 'react-jss' .
• Mantenido en el futuro previsible, los problemas se tratan dentro de buenos retrasos.
• ? Autores de la biblioteca: tss-react no será otra entrada más en sus peerDependencies .

demo.webm

Si bien este módulo está escrito en TypeScript, el uso de TypeScript en su aplicación es opcional (pero se recomienda, ya que viene con beneficios sobresalientes tanto para usted como para su base de código).

Empezar

Cuanto más se obtenga el proyecto, más tiempo paso mejorando y manteniéndolo. Gracias por tu apoyo?

No hace falta mencionar que esta biblioteca está fuertemente inspirada en JSS, la solución OG CSS-in-JS.

Desarrollo

Ejecutando las aplicaciones de demostración:

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 

Información de contacto de seguridad

Para informar una vulnerabilidad de seguridad, utilice el contacto de seguridad de TidElift. TidElift coordinará la solución y la divulgación.