Gatsby/React - Compartilhar styles e usar variações entre mùltiplos sites.

[lucashfreitas]

Fala pessoal, beleza?

Estou desenvolvendo um projeto onde tenho cerca de 5 sites (o numero pode aumentar) e estou utilizando gatsby. 90% da estrutura do layout + paginas dos sites sao iguais, por isso criei um shared theme e ele contem 90% dos componentes, styles. Tudo està funcionando legal, bem modularizado.

Os 10% de diferença desses sites vao ser referente a cores, alguns pequenos detalhes no layout, imagens , etc. Estou agora implementando uma forma de fazer esses shared modules usarem diferentes variaçoes de css com base no site que esta utilizando. O que estou fazendo no momento è escrevendo variacoes do css e utilizando essa variacao nos componentes, seria algo do tipo:

export const Header = (props) => {
return (
<div className=`header header--myClass--${props.VARIATION}`/>
)
}

A questao è que preciso pegar essa variation de algum lugar, utilizando gatsby tenho algumas opcoes em mente:

• Passar a variation pro shared theme atravès do plugin options.
• Passar isso como .env variable de cada site que està utilizando o shared module (me pareceu mais eficiente, porque eu nao vou ter que ficar pegando esse dado toda hora atravès de graphQL queries nos components e nem ficar passando as props de pai pra filho toda hora).
• Alguma outra opcao?

Estou começando a implementar isso hoje e ainda estou pesquisando algumas soluçoes que sejam simples e faceis de manter.

Alguem jà pegou algum projeto onde teve que utilizar a maioria dos componentes, styles compartilhados atraves de um shared module (gatsby theme, monorepo, etc) e ainda teve que adicionar algumas variacoes especificas para cada site e tem uma idea de como posso implementar essas variacoes?

Muito obrigado desde jà.

[ninetails]

Não cheguei a utilizar temas para Gatsby, mas lendo a documentação tenho alguns insights para sharear.

Por experiências anteriores, o que c está falando de configurar uma variação, talvez prejudique a manutenção lá na frente quando sair de 5 sites e virarem 30. Pelo que entendi, c sempre está só aumentando o css base para ter variações, e falando em termos práticos, esse css não está sendo base, já que agrega todas as variações.

Gatsby pelo que conheço é bem maleável, pela documentação que vc mandou tem umas coisas legais como composição de temas. Isso quer dizer que vc consegue fazer um tema base e outros temas que se estenderiam deste tema básico. Ex: você tem um tema chamado gatsby-theme-mycompany-base, este terá as 90% de estrutura que vc disse que tem em comum nos 5 sites. Aí para cada site vc cria um tema derivado como por exemplo `gatsby-theme-mycompany-clientone``. Nisso vc pode tentar simplificar seus componentes para serem mais utilizáveis e vc muda o css direto do componente que só será utilizado nesse site (afinal, compor CSS é tranquilo, só sobrescrever a classe no css desse tema filho que não vai influir nos outros) sem mudar o Markup (HTML dos componentes) só pra ficar incluindo essa "variação" como uma variável a mais em classes.

Inclusive daria para ver se dá pra reaproveitar algum tema já existente do Gatsby e simplificar teu tema base, estendendo dele.

E sobre o tema em relação a cores, se vc estiver dando suporte somente a navegadores atuais e utilizando css puro, também dá pra usar CSS variables e ficar gerenciando o :root em cada site.