@gaearon ¡ Gracias por resurgir esto! Es una locura que haya pasado un año desde que abrí la edición de Radium.

Me gusta la idea de advertir sobre propiedades abreviadas como border , pero no borderBottom . No debería haber sorpresas al fusionar objetos de estilo utilizando los nombres de propiedad más largos.

Pregunta. ¿La intención de este número es abordar solo el análisis de objetos de estilo individuales o también existe el deseo de analizar y advertir sobre posibles colisiones de propiedades que se aplican condicionalmente?

Pregunta. ¿La intención de este número es abordar solo el análisis de objetos de estilo individuales o también existe el deseo de analizar y advertir sobre posibles colisiones de propiedades que se aplican condicionalmente?

No estoy seguro de entender la pregunta, ¿puede darnos más detalles?

Por supuesto. Si no es válido tener border y borderColor en el mismo elemento, entonces tiene sentido advertir sobre esto. En mi experiencia, esta combinación es fácil de evitar, pero es más difícil de anticipar y depurar cuando los estilos se aplican dinámicamente (lógica condicional basada en accesorios o estado, consultas de medios, Radium, etc.) o se transmiten como accesorios y se fusionan con objetos de estilo de orden inferior. Si aparece una advertencia para el atributo abreviado border cuando no hay otros atributos que puedan afectar el borde involucrado, entonces la advertencia parece más una regla dogmática que una útil herramienta de depuración, ya que la abreviatura border es sigue siendo técnicamente válido. Sin embargo, si hay un atributo en un objeto de estilo separado, como cambiar borderColor al pasar el mouse, por ejemplo, eso afectaría el borde involucrado y se aplicará en tiempo de ejecución al nodo que ya tiene la abreviatura border , me gustaría que me avisen lo antes posible, ya que aquí es donde las cosas tienden a romperse para mí.

Ah, buen punto. Probablemente solo advertiría si sabemos que los estilos se superponen, pero no estoy seguro de lo fácil que es decirlo. No lo he pensado mucho y no tengo una buena solución.

@gaearon Una solución alternativa que me gusta más es usar csstext según https://github.com/facebook/react/issues/5397 , que IIRC resuelve limpiamente un superconjunto de estos problemas.

¿Qué ocurre con las situaciones en las que un componente de terceros define estilos y permite anulaciones? Digamos que un componente define su propio estilo border y yo quiero simplemente anular el estilo borderBottom .

Empecé a trabajar en funciones auxiliares muy simples para convertir propiedades abreviadas a formato largo (entre otras cosas): https://github.com/rtsao/lostyle/tree/master/src ( docs )

Esto es súper impredecible y confuso y me encontré con esto.

Sugeriría que al menos avisemos sobre las actualizaciones cuando sepamos que es problemático. Es decir, si vamos de {background: a, backgroundSize: b} a {background: c, backgroundSize: b}, advertimos que backgroundSize está siendo anulado (pero si backgroundSize cambia al mismo tiempo, no avise). Podemos hacer esto para todas las propiedades abreviadas y saber si es problemático a partir del orden de enumeración de propiedades.

Marcando como "buen primer número". Agreguemos una advertencia solo para DEV para esto según mi comentario anterior. Creo que un buen lugar para comenzar a investigar sería aquí:

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

Si desea abordar esto, comente aquí para que no tengamos dos personas trabajando en esto.

@sophiebits , estoy feliz de trabajar en este :)

@supertinou ¡ Es tuyo!

Simplemente golpeó esto y de hecho me sorprendió y confundió.

@supertinou Solo quería comprobar si hay algo en lo que pueda ayudarte con esto.

@sophiebits Hola, no quiero pisar los dedos de los pies de nadie: D, pero he echado un vistazo a este problema, lo he replicado y me encantaría intentarlo , pero no sé si

Hice un codepen para recapitular / explicar lo que está pasando https://codepen.io/giuseppegurgone/pen/mjKbmq?editors=0010 @gaearon / @sophiebits, avíseme si olvidé algo.

@mirkojotic ¿ Todavía

Si no hay nadie, me gustaría tomar este :)

Está bien @YongPilMoon , es tuyo.

Agregar una nota aquí: eliminar una propiedad también puede desencadenar este error. https://stackoverflow.com/q/52636618/49485

La advertencia está disponible en 16.13.
https://reactjs.org/blog/2020/03/02/react-v16.13.0.html