Firefox and SVG fill for CSS | Matt Crouch

I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out Firefox has implemented an overly literal interpretation of part of the (I believe) SVG spec, causing it to add additional child <svg> elements in certain circumstances (which are hidden from dev tools by virtue of reasons). Matt does a better job of explaining the why, but the fix is to do something like this:

.class-name,
.class-name use > svg {
   fill: #FFFFFF;
}

Or, based on our existing patches when I looked that already including overrides for g > svg and some other variations, perhaps simply:

.class-name,
svg.class-name * {
   fill: #FFFFFF;
}