@gaearon Obrigado por ressurgir isso! Incrível que já faz um ano que abri a edição do Radium.

Gosto da ideia de alertar sobre propriedades abreviadas como border , mas não borderBottom . Não deve haver nenhuma surpresa ao mesclar objetos de estilo usando nomes de propriedade mais longos.

Questão. A intenção desta questão é abordar apenas a análise de objetos de estilo individuais ou há também um desejo de analisar e alertar sobre possíveis colisões de propriedades que são aplicadas condicionalmente?

Questão. A intenção desta questão é abordar apenas a análise de objetos de estilo individuais ou há também um desejo de analisar e alertar sobre possíveis colisões de propriedades que são aplicadas condicionalmente?

Não tenho certeza se entendi a pergunta, você pode elaborar?

Certo. Se for inválido ter border e borderColor no mesmo elemento, então faz sentido avisar sobre isso. Na minha experiência, essa combinação é fácil de evitar, mas é mais difícil de prever e depurar quando os estilos estão sendo aplicados dinamicamente (lógica condicional baseada em props ou estado, media queries, Radium, etc.) ou passados ​​como props e mesclados com objetos de estilo de ordem inferior. Se um aviso para o atributo abreviado border ocorrer quando não houver outros atributos que possam afetar a fronteira envolvida, então o aviso parece mais uma regra dogmática do que uma ferramenta de depuração útil, pois o atalho border é ainda tecnicamente válido. No entanto, se houver um atributo em um objeto de estilo separado - como alterar borderColor ao passar o mouse, por exemplo - isso afetaria a borda envolvida e será aplicado em tempo de execução ao nó que já possui a abreviação border a isso, gostaria de ser avisado o mais cedo possível, pois é aqui que as coisas tendem a quebrar para mim.

Ah, bom ponto. Eu provavelmente só avisaria se nós _sabemos_ os estilos se sobrepõem, mas não tenho certeza de como é fácil dizer. Não pensei muito sobre isso e não tenho uma boa solução.

@gaearon Uma solução alternativa que eu gosto mais é usar csstext de acordo com https://github.com/facebook/react/issues/5397 , que o IIRC resolve um superconjunto desses problemas.

E sobre as situações em que um componente de terceiros define estilos e permite substituições? Digamos que um componente defina seu próprio estilo border e eu queira apenas substituir o estilo borderBottom ?

Comecei a trabalhar em funções auxiliares extremamente simples para converter propriedades abreviadas em longas (entre outras coisas): https://github.com/rtsao/lostyle/tree/master/src ( docs )

Isso é super imprevisível e confuso e acabei de me deparar com isso.

Eu sugiro que pelo menos avisemos sobre atualizações quando sabemos que é problemático. Ou seja, se formos de {background: a, backgroundSize: b} para {background: c, backgroundSize: b}, avisaremos que backgroundSize está sendo substituído (mas se backgroundSize mudar ao mesmo tempo, não avise). Podemos fazer isso para todos os atalhos de propriedade e saber se é problemático a partir da ordem de enumeração de propriedade.

Marcando como "boa primeira edição". Vamos adicionar um aviso somente DEV para isso de acordo com meu comentário acima. Acho que um bom lugar para começar a investigar seria aqui:

https://github.com/facebook/react/blob/v16.4.0/packages/react-dom/src/client/ReactDOMFiberComponent.js#L619

Se você quiser fazer isso, comente aqui para que não tenhamos duas pessoas trabalhando nisso.

@sophiebits , estou feliz em trabalhar nisso :)

@supertinou é seu!

Apenas acertei e fiquei realmente surpreso e confuso com isso.

@supertinou Só queria verificar se há algo em que possa ajudá-lo nisso.

@sophiebits Oi, eu não quero pisar em ninguém: D mas eu dei uma olhada neste problema, repliquei-o e adoraria tentar, mas não sei se @supertinou ainda está trabalhando

Fiz um codepen para recapitular / explicar o que está acontecendo https://codepen.io/giuseppegurgone/pen/mjKbmq?editors=0010 @gaearon / @sophiebits me avise se eu esqueci algo.

@mirkojotic Ainda está interessado?

Se não houver ninguém, eu gostaria de fazer este :)

Tudo bem @YongPilMoon , é seu.

Adicionando uma nota aqui: remover uma propriedade também pode desencadear esse bug. https://stackoverflow.com/q/52636618/49485

O aviso é lançado em 16.13.
https://reactjs.org/blog/2020/03/02/react-v16.13.0.html