# Como corrigir o conflito de CSS otimizado entre Astra Pro e WP Rocket

O conflito de CSS otimizado entre Astra Pro e WP Rocket acontece quando o Remove Unused CSS ou a combinacao de CSS do WP Rocket descarta o estilo dinâmico do Astra, e o site carrega sem layout: fontes erradas, cores fora do lugar e botões sem formatacao. Aparece so na primeira visita de cada URL, porque o CSS usado e gerado por página.

## O que é o conflito de CSS entre Astra e WP Rocket?

O Astra Pro injeta boa parte do visual via CSS dinâmico, gerado pelo Customizer e enfileirado em handles como astra-theme-css. O WP Rocket, na aba File Optimization, oferece o Remove Unused CSS (que mantem so o CSS usado por página), além de minificar e combinar CSS. Quando essas otimizacoes leem o estilo do Astra como não usado, ou alteram a ordem de carga, o tema perde regras essenciais. O resultado e uma página que aparece sem estilo, com o conteúdo empilhado e os componentes do Astra Pro sem formatacao, mesmo que tudo esteja correto no editor.

## Como identificar

- A página abre 'sem estilo' (texto cru, sem fontes, cores ou espacamento) so na primeira visita de cada URL, e ao recarregar volta ao normal.
- Cabeçalho, mega menu, botões ou sticky header do Astra Pro aparecem desformatados ou somem depois de ativar o Remove Unused CSS.
- No código-fonte da página o estilo inline do Astra (id 'astra-theme-css-inline-css') esta ausente ou movido para o rodape.
- O layout quebra so para visitantes deslogados, porque o CSS usado e servido do cache do WP Rocket e não para o admin logado.

## Como prevenir

- Sempre que mexer no Customizer do Astra, limpe o Used CSS do WP Rocket logo em seguida para evitar estilo desatualizado em cache
- Mantenha os handles essenciais do Astra Pro fixos na CSS safelist do WP Rocket antes de subir mudancas grandes de layout
- Teste cada nova otimização do WP Rocket em staging e em aba anonima antes de ativar em producao, conferindo desktop e mobile

Erros relacionados

- [Como corrigir o erro de CSS no Customizer do Astra Pro](https://full.services/wp-fixer/corrigir-css-customizer-astra-pro/)
- [Como corrigir o Customizer que não salva alterações no Astra Pro](https://full.services/wp-fixer/corrigir-customizer-nao-salva-astra-pro/)
- [Como corrigir o erro de Header/Footer no Astra Pro após atualização](https://full.services/wp-fixer/corrigir-header-footer-astra-pro/)

## Causa

- A opção 'Remove Unused CSS' (aba File Optimization, Optimize CSS Delivery) descarta o handle astra-theme-css por considerar regras dinâmicas do Astra como não usadas naquela página.
- As opções 'Minify CSS files' e 'Combine CSS files' alteram a ordem de carga e fazem o CSS do Astra Pro perder para regras de outro arquivo combinado.
- O CSS crítico gerado pelo WP Rocket não inclui seletores de elementos dinâmicos do Astra, como mega menu, sticky header e off-canvas, que aparecem so após interacao.
- O cache do 'Used CSS' do WP Rocket ficou desatualizado depois de uma mudanca no Customizer do Astra e nunca foi regenerado.
- A opção do Astra 'Cache Dynamic CSS' (em Appearance -> Customize -> Performance) gerou um arquivo estático antigo que diverge do CSS que o WP Rocket otimizou.

## Como resolver

1. Confirme que o culpado e o Remove Unused CSS: abra uma URL afetada em aba anonima para reproduzir a quebra como visitante. Depois desligue temporariamente o Remove Unused CSS e limpe o cache para isolar a causa antes de aplicar a correção definitiva. A opção fica na aba indicada abaixo.

```
Settings -> WP Rocket -> File Optimization -> Optimize CSS Delivery -> Remove Unused CSS
```

2. Adicione os handles do Astra na CSS safelist: mantenha o Remove Unused CSS ligado, mas proteja o estilo do tema. Na área de texto CSS safelist, inclua os identificadores do Astra (um por linha) para o WP Rocket nunca remove-los. Use os valores abaixo.

```
#astra-theme-css-inline-css
.ast-container
.main-header-menu
.ast-builder-layout-element
```

3. Exclua o CSS do Astra da combinacao, se ainda quebrar: se o problema vier da combinacao e não do Remove Unused CSS, va ao campo Excluded CSS Files, na mesma aba File Optimization, e informe o caminho do estilo do tema para que ele carregue isolado. Use o padrão abaixo.

```
/wp-content/themes/astra/assets/css/minified/style.min.css
```

4. Regenere o CSS do Astra e o Used CSS do WP Rocket: force os dois lados a recriar o estilo. No Astra, regenere o CSS dinâmico salvando o Customizer; no WP Rocket, limpe o Used CSS e o cache pela barra de administracao. Os caminhos estão abaixo.

```
Appearance -> Customize -> Publish (regenera o CSS dinâmico do Astra)
Admin bar -> WP Rocket -> Clear Used CSS
Admin bar -> WP Rocket -> Clear and preload cache
```

5. Valide em aba anonima e em mobile: abra de novo a URL corrigida em aba anonima e também no celular, já que o WP Rocket gera CSS usado separado para desktop e mobile. Se o layout do Astra voltar ao normal nas duas versões, a correção esta concluida.

## Código

```php
// functions.php do tema filho do Astra
// Garante que o estilo do tema seja sempre enfileirado e dificil de
// ser tratado como 'nao usado' por plugins de otimizacao de CSS.
add_action( 'wp_enqueue_scripts', function () {
    if ( ! wp_style_is( 'astra-theme-css', 'enqueued' ) ) {
        wp_enqueue_style(
            'astra-theme-css',
            get_template_directory_uri() . '/assets/css/minified/style.min.css',
            array(),
            ASTRA_THEME_VERSION
        );
    }
}, 1 );
```

## Perguntas frequentes

### Por que o site do Astra so quebra na primeira visita de cada página?

O Remove Unused CSS do WP Rocket gera o CSS usado por URL na primeira visita e so aplica na visita seguinte. Se ele descarta o estilo do Astra, a primeira carga sai sem layout e o recarregamento já vem corrigido do cache. Por isso o problema parece intermitente.

### Preciso desligar o Remove Unused CSS para resolver?

Não precisa. Na maioria dos casos basta adicionar os identificadores do Astra na CSS safelist do WP Rocket e regenerar o Used CSS. Desligar a opção resolve, mas você perde o ganho de performance que motivou ativar o recurso.

### O que coloco na CSS safelist do WP Rocket para o Astra?

Inclua o estilo inline do tema e os seletores dos componentes dinâmicos, um por linha, como o id do CSS inline do Astra e classes do cabeçalho e do builder. Assim o WP Rocket mantem essas regras mesmo achando que não são usadas na página.

### A combinacao de CSS também quebra o Astra Pro?

Pode quebrar. Combinar CSS junta arquivos e muda a ordem de carga, e o estilo do Astra pode perder para regras de outro arquivo. Se a quebra continuar com o Remove Unused CSS protegido, exclua o CSS do tema do campo Excluded CSS Files.

### Mexi no Customizer e o site quebrou de novo. O que aconteceu?

Mudar o Customizer do Astra gera um CSS novo, mas o WP Rocket ainda serve o Used CSS antigo do cache. Limpe o Used CSS pela barra de administracao do WP Rocket depois de toda alteração de layout para forcar a regeneracao com o estilo atualizado.

### O layout esta certo para mim, mas o cliente ve quebrado. Por que?

Você esta logado como admin e recebe o CSS completo, enquanto o visitante recebe a versão otimizada do cache. Teste sempre em aba anonima e em mobile, já que o WP Rocket gera CSS usado separado para cada contexto.

### O mega menu e o sticky header somem com o WP Rocket. Como resolver?

Esses elementos do Astra Pro aparecem após interacao, entao o WP Rocket muitas vezes não captura suas regras no CSS crítico. Adicione os seletores desses componentes na CSS safelist para garantir que o estilo deles nunca seja removido.

**Fonte:** [WP Rocket — Remove Unused CSS](https://docs.wp-rocket.me/article/1529-remove-unused-css/)