Wp-rocket: Arquivos CSS com consultas de mídia não são excluídos durante a combinação CSS
Antes de enviar um problema, verifique se você concluiu as seguintes etapas:
- Verifique se você está usando a versão mais recente ✅
- Usei o recurso de pesquisa para garantir que o bug não foi relatado antes ✅
Descreva o bug
Atualmente, ao combinar arquivos CSS, verificamos se há consultas de mídia aqui:
https://github.com/wp-media/wp-rocket/blob/443f2e1b902c592bd517cbaa641571bb2ddce1a5/inc/Engine/Optimization/Minify/CSS/AbstractCSSOptimization.php#L124
Não excluímos link elementos contendo consultas de mídia como:
max-widthmin-width
Por exemplo, o seguinte arquivo será combinado:
<link rel='stylesheet' media='screen and (max-width: 900px)' href='css/medium.css' />
Quando isso acontece, não envolvemos o conteúdo do arquivo em torno da consulta de mídia, o que seria a solução ideal.
Em vez disso, o adicionamos diretamente ao arquivo combinado.
As regras aí contidas podem ser aplicadas aos elementos, independentemente do que a consulta de mídia original determinou.
Reproduzir
Passos para reproduzir o comportamento:
- Adicione um arquivo CSS usando uma consulta de mídia, por exemplo,
max-width. Nesse caso, mude, por exemplo, a cor deh1. - Habilite a combinação CSS.
- Visite o site. A regra da etapa 1 será aplicada independentemente da largura da janela de visualização.
Comportamento esperado
Os arquivos que contêm essas consultas de mídia devem ser excluídos automaticamente ou combinados ao serem agrupados na consulta de mídia original.
Contexto adicional
Tíquete relacionado: https://secure.helpscout.net/conversation/1305858288/201378?folderId=2135277
Backlog Grooming (para uso da equipe de desenvolvimento WP Media apenas)
- [x] Reproduza o problema
- [x] Identifique a causa raiz
- [x] Escopo de uma solução
- [x] Estime o esforço
vmanthos
Todos 3 comentários
Obrigado pelos detalhes Vasilis. Acho que a solução mais fácil seria excluir esses arquivos da combinação de CSS, ou talvez pudéssemos fazer a solução ideal conforme sugerido.
Como veremos mudanças relacionadas ao CSS no 3.8, vamos manter isso pendente até então. Podemos mudar isso e consertar se tivermos muitos tickets relacionados a isso. Se não, vamos ver como o 3.8 acaba para decidir sobre o futuro desse recurso.
arunbasillal
em 20 out. 2020
@arunbasillal Apenas uma nota rápida.
Podemos mudar isso e consertar se tivermos muitos tickets relacionados a isso.
Pode ser que uma boa porcentagem dos tíquetes relacionados ao recurso Combinar arquivos CSS seja devido ao problema específico.
Algo que vale a pena levar em consideração. 🙏
vmanthos
em 20 out. 2020
@arunbasillal & @vmanthos 3.8 com CSS Tree Shaker serão capazes de lidar com esta situação muito bem.
Defina uma solução ✅
A solução aqui é a proposta por @vmanthos :
- identifique o atributo link de mídia e se é diferente de
allpara simplesmente incluir o conteúdo do CSS na tag de mídia adequada.
Com um regex, podemos identificar o atributo de mídia e, então, haverá uma mudança simples semelhante a esta:
sprintf( '<strong i="15">@media</strong> %1$s { %2$s }', $media, $css_content );
Faça uma estimativa do esforço ✅
[S]
crystinutzaa
em 9 nov. 2020
Questões relacionadas
vmanthos
·
5Comentários
maximejobin
·
4Comentários
Screenfeed
·
5Comentários
vmanthos
·
5Comentários
vmanthos
·
5Comentários
Comentários muito úteis
@arunbasillal & @vmanthos 3.8 com CSS Tree Shaker serão capazes de lidar com esta situação muito bem.
Defina uma solução ✅
A solução aqui é a proposta por @vmanthos :
allpara simplesmente incluir o conteúdo do CSS na tag de mídia adequada.Com um regex, podemos identificar o atributo de mídia e, então, haverá uma mudança simples semelhante a esta:
sprintf( '<strong i="15">@media</strong> %1$s { %2$s }', $media, $css_content );Faça uma estimativa do esforço ✅
[S]