Estou com uma dúvida/problema na utilização do CSS Handles. Montei um componente em um Store theme base, dentro do componente faço a utilização do handle conforme disponibilizado na documentação da VTEX:
Porém estou enfrentando um problema durante o carregamento do meu componente, pois o CSS parece que é removido e inserido novamente, assim fazendo com que o componente salte e tenha uma quebra visual. Analisando o network, entendi que ele remove no início do carregamento dos meus styles e insere novamente quando finaliza o domcontentload, alguém já passou por isso?
Opa @guijsposito tranquilo? Eu estou “enferrujado” com o desenvolvimento, mas você tentou usar o data-css-handle?
Uma possível solução para corrigir o problema de remoção e inserção do CSS é usar a propriedade data-css-handles no seu componente. Isso informa ao VTEX IO que os handles CSS devem ser carregados e mantidos no DOM.
Para usar CSS em apps personalizados, sugiro algumas dicas:
Usar um pré-processador de CSS: Pré-processadores como Sass ou Less permitem que você escreva CSS mais modular e reutilizável. Você pode então compilar o CSS pré-processado em CSS normal antes de adicioná-lo ao seu aplicativo.
Usar um gerenciador de pacotes: Gerenciadores de pacotes como o npm ou Yarn permitem que você gerencie dependências de terceiros, incluindo bibliotecas CSS. Você pode instalar bibliotecas CSS e importá-las em seu aplicativo.
Observação: outra coisa que pode estar acontecendo é conflito do seu CSS com o do tema. Verifique se não há conflitos entre os seus estilos CSS e o principal do Tema.
Veja se estas informações podem ajudar de certa forma.
Estou no início da minha caminhada com vtex io. Você teria algum exemplo da utilização do data-css-handle?
Já costumo utilizar o Sass, obrigado pelas recomendações. Quanto ao CSS do tema, estou utilizando um store-theme do 0, então creio que o data-css poderia estar me ajudando caso se mantenha no DOM.
Quanto ao estilo que “pisca” durante o carregamento, como o @estevao_santos comentou, geralmente está relacionado a conflitos de CSS do tema com o teu custom app.
Mas olhando para o código do @guijsposito acredito que até mesmo a ausência da propriedade key na tua listagem <li> pode fazer com que o React perca a referência dos itens resultando em problemas de performance, renderização e até acessibilidade.
Caso o problema esteja acontecendo na Home eu também tentaria habilitar ou desabilitar a otimização de CSS crítico para testes como sugere esta documentação de otimização de performance da VTEX.
E @guijsposito com relação a solicitação de exemplo, preparei um exemplo completo da implementação do CSS Handles no post abaixo: