tss react

Solução dinâmica de CSS-in-Ts, com base na emoção

Home - Documentação - Playground

Você pode pensar em tss-react como @emotion/jss .
É, em essência, um equivalente à segurança do tipo da API JSS, mas alimentado pela emoção, assim como @emotion/styled é a API de componentes com estilo, mas alimentada pela emoção.

• Integração perfeita com MUI.
• Funciona no App e roteador de página do próximo.js.
• ? ‍♂️ Sem sintaxe de estilo personalizado para aprender, sem abreviação, apenas CSS.
• ? Geração de estilo dinâmico: o TSS permite gerar estilos com base nos adereços e nos estados internos dos componentes.
  Infelizmente, isso nos impede de suportar o componente do servidor (RSC) no próximo.js.
  Continuamos esperançosos para o apoio futuro ao RSC, dependente do fornecimento de uma solução adequada pela Vercel e React.
  Se você precisar de suporte ao RSC hoje, pode considerar soluções de tempo de execução zero como Panda-CSS ou Extrato de Vanilla, mas a expressão de estilos complexos é significativamente mais difícil nesse paradigma.
• Seu JSX permanece legível. Ao contrário de outra solução de estilo que tende a desordem o JSX, o TSS permite o isolamento dos estilos da estrutura do componente.
  Dizem que, em algum momento, é mais fácil incluir os estilos diretamente em seus componentes, o TSS também permite isso.
• ? Aste Eliminar conflitos prioritários do CSS! Com o TSS, você pode determinar a precedência de várias classes aplicadas a um componente e aumentar arbitrariamente a especificidade de algumas regras.
• ? Oferece um equivalente à segurança do tipo da sintaxe JSS $ .
• Personalize livremente o cache @emotion subjacente.
• API aprimorada withStyles , para ajudá-lo a migrar para longe de @material-ui v4.
• Construa no topo de @emotion/react , ele tem muito pouco impacto no tamanho do pacote ao lado do MUI (~ 5kb minziped).
• ⬆️ 'tss-react' pode ser usado como um substituto vantajoso para @material-ui v4 makeStyles e 'react-jss' .
• Mantidos no futuro próximo, as questões são tratadas em bons atrasos.
• ? Autores da biblioteca: tss-react não será mais uma entrada em suas peerDependencies .

Demo.Webm

Embora este módulo esteja escrito no TypeScript, o uso do TypeScript em seu aplicativo é opcional (mas recomendado, pois vem com benefícios excelentes para você e sua base de código).

Comece

Quanto mais ️ o projeto fica, mais tempo gasto melhorando e mantendo -o. Obrigado pelo seu apoio?

Escusado será mencionar, esta biblioteca é fortemente inspirada no JSS, a solução OG CSS-In-JS.

Desenvolvimento

Executando os aplicativos de demonstração:

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 

Informações de contato de segurança

Para relatar uma vulnerabilidade de segurança, use o contato de segurança Tidelift. O Tidelift coordenará a correção e a divulgação.