Problemas Frequentes e Como Resolver

1. Erros na Instalação e Configuração

Situação: Ao tentar instalar ou configurar o plugin, podem ocorrer falta de dependências ou erros no arquivo de configuração.

Passos para corrigir:

• Instalar as dependências: Certifique-se de que postcss e postcss-pxtorem estão instalados como dependências de desenvolvimento:

npm install postcss postcss-pxtorem --save-dev

8. Criar/editar o arquivo de configuração do PostCSS: No diretório raiz do projeto, crie ou modifique o arquivo postcss.config.js com o seguinte conteúdo (nomes de propriedades alterados para fins de exemplo):

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      baseFontSize: 16,          // Tamanho base da fonte (root)
      decimalPlaces: 5,          // Precisão decimal
      propertiesToConvert: ['*'], // Propriedades a serem convertidas
      selectorBlacklist: [],     // Seletores ignorados
      replaceOriginal: true,     // Substituir valor original
      convertInMediaQueries: false, // Converter px em media queries
      minPixelValue: 0           // Valor mínimo para conversão
    }
  }
};

10. Verificar a integração: Confirme que o arquivo postcss.config.js está sendo lido corretamente pelo seu empacotador (Webpack, Vite, etc.) e que o PostCSS está habilitado.

2. Conversão Não Ocorre

Situação: Após configurar o plugin, os pixels no CSS não são convertidos para rem.

Passos para resolver:

• Verificar a ordem dos plugins: O postcss-pxtorem deve ser executado após outros plugins que possam modificar propriedades CSS (como prefixos automáticos).
• Conferir a lista de propriedades: Na configuração, a opção propertiesToConvert (originalmente propList) deve incluir as propriedades desejadas. Para todas, use ['*'].
• Ativar logs de depuração: Ative o modo verbose do PostCSS para ver se o plugin está processando os arquivos e quais conversões está realizando.

3. Problemas de Compatibilidade com Navegadores Antigos

Situação: Navegadores legados não suportam a unidade rem, causando quebras no layout.

Soluções:

• Usar Autoprefixer: Adicione o plugin Autoprefixer ao pipeline do PostCSS para incluir prefíxios de navegador automaticamente.
• Fornecer fallback em px: Escreva regras CSS com ambos os valores, primeiro o px e depois o rem:

.exemplo {
  font-size: 16px;
  font-size: 1rem;
}

20. Testar em navegadores alvo: Execute testes em navegadores antigos para garantir que a página se comporte adequadamente com os fallbacks.