Editor, prévia e página publicada passam a mostrar a mesma coisa
O editor visual mostrava títulos menores e cores diferentes das da página publicada. A causa eram os estilos da própria interface do editor vazando para o conteúdo.
Quem editava uma página via um título de 24 px onde o visitante via 72 px. O editor, a prévia e a página pública eram três ambientes com três resultados.
As duas causas
A interface do editor usa o Fomantic UI, e a folha dele entrava no mesmo documento do conteúdo:
- Regras sem camada vencem regras em camada. As regras do Fomantic ganhavam das utilities do Tailwind: título de 72 para 24 px, peso de 900 para 700.
- O tamanho base da fonte mudava. O Fomantic define 14 px na raiz; o Tailwind mede tudo em
rem. A página inteira encolhia na proporção 14/16.
A folha não podia simplesmente sair: os modais do editor dependem dela.
A correção
Os estilos da interface do editor foram para uma camada própria, que perde das utilities, e o tamanho base voltou a 16 px. Editor e prévia declaram a mesma ordem de camadas. Medida em quinze pontos, a diferença entre os três ambientes zerou.
A assinatura de procedência do CSS passou a incluir a versão do compilador: um CSS gerado por uma versão anterior do Tailwind deixa de passar por atual.
Origem: Core · req-158 · BATCH-158