Flora & Stiches GAMBIARRA

PATCH.md

O pacote Stitches que o Flora utiliza possui diversas correções e melhorias não lançadas, apenas buildadas, inclusive compatbilidade com a versão do TypeScript mais recente. As issues relacionadas ao problema do TS aqui e aqui.

Nesse passo a passo ensino como você pode aproveitar essas melhorias e também corrigir o problema do TypeScript The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized, que acontece quando queremos usar o TypeScript 4.8+ e exportar um componente de um arquivo, como pode ser visto na imagem a seguir.

Algumas threads já foram levantadas no Slack sobre a incopatibilidade

• https://grupoboticario-corp.slack.com/archives/C0199HR0543/p1689711403684349
• https://grupoboticario-corp.slack.com/archives/C0199HR0543/p1693941933740659

Usando a última versão do Stitches

No seu package.json adicione a seguinte configuração. A versão 1.3.1-1 é o último build feito. O Flora atualmente utiliza a versão 1.2.8 que não é compatível com TypeScript 4.8+.

  "overrides": {
    "@stitches/react": "1.3.1-1"
  },

Agora você pode usar o TypeScript 4.8+ e exportar os componentes com styled normalmente.

Alternativa que não atualiza o Stitches

Da pra contornar de certa forma o problema se criarmos um type gambiarra combinando alguns types do React, e usando a keyword as do TypeScript. A solução pode ser vista no arquivo abaixo StyledHtmlTable.tsx

Melhorando a performance do build

Algumas questões atrapalham na etapa de build quando usamos a função styled do Stitches, e uma pequena alteração no código interno da biblioteca pode melhorar bastante o desempenho.

Em um projeto que trabalho o tempo de build estava em torno de 120s, e depois do patch aplicado caiu para 30s. Essa correção é uma cortesia do usuário jasonaden que compartilhou a solução em uma issue no repositório do stitches

Vou utilizar o pacote patch-package neste caso - mais info https://github.com/ds300/patch-package

Para fazer o patch do Stitches para a últma versão disponível e resolver problemas de performance com build, execute os seguintes passos:

No package.json adicione o seguinte comando:

"scripts": {
+  "postinstall": "patch-package"
}

Logo após, instale o pacote pelo terminal

npm i -D patch-package

Agora procure pelo arquivo node_modules/@stitches/react/types/css-util.d.ts. Já com o arquivo aberto, procure pela linha 98 e comente

[K: string]: (
    | number
    | string
    // | CSS<Media, Theme, ThemeMap, Utils>
    | {}
    | undefined
)

Após a linha 100, adicione any

[K: string]: (
    | number
    | string
    // | CSS<Media, Theme, ThemeMap, Utils>
    | {}
    | undefined
    | any
)

Por fim, rode o seguinte comando no terminal

npx patch-package @stitches/react

Pronto, agora o build de um projeto com Flora/Stitches deve ficar mais rápido 💡

StyledHtmlTable.tsx

import type { FC, DetailedHTMLProps, TableHTMLAttributes } from 'react';
import { styled } from '@grupoboticario/flora-react';

type StitchesTableGambiarra = FC<DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>>;

export const StyledTable = styled('table', {
  width: '100%',
  marginTop: '$4',
}) as StitchesTableGambiarra;

StyledTextComponent.tsx

import { Text, styled } from '@grupoboticario/flora-react';

export const StyledPercentage = styled(Text, {
  display: 'block',
  fontSize: '$sm',
  color: '$medium-light-1',
  opacity: 0.7,
  marginTop: '$1',
}) as typeof Text;

@danielnass incrível 🎉