This is an incomplete prototype of an idea I've been mulling about in my head for a while.
Basically, if you are relying on overriding a directional style (borderLeft/Right, paddingLeft/Right, marginLeft/Right, translateX(100)) with a non-directional style (border, padding, margin, translateX(0)), the specificity of the directional style will always win and this will probably cause a bug.
While this solution is incomplete (does not cover recursive styles very well rn), I wanted to get some feedback. The more I think about this, the more it might make sense to just get rid of shared styles entirely. It would fix the specificity problem and while it would bloat the page a little by duplicating some injected styles, it would be a much simpler process of generation and the cost may be recuped there.
This is an incomplete prototype of an idea I've been mulling about in my head for a while.
Basically, if you are relying on overriding a directional style (
borderLeft/Right,paddingLeft/Right,marginLeft/Right,translateX(100))with a non-directional style (border,padding,margin,translateX(0)), the specificity of the directional style will always win and this will probably cause a bug.While this solution is incomplete (does not cover recursive styles very well rn), I wanted to get some feedback. The more I think about this, the more it might make sense to just get rid of shared styles entirely. It would fix the specificity problem and while it would bloat the page a little by duplicating some injected styles, it would be a much simpler process of generation and the cost may be recuped there.
Thoughts?
@yzimet @lencioni @ljharb @garrettberg @jasonkb