Order of CSS injection

Just hit a problem:

const SVG = styled.svg`
  line {
    stroke-width: 1px;
  }
`

const Horizontal = styled.g`
  line {
    shape-rendering:crispEdges;
  }
`

const Vertical = styled.g`
  line {
    stroke-width: 1.5px;
  }
`

export default () => (
  <SVG>
    <Horizontal>
      <line x1={0} y1={0} x2={width} y2={0}/>
    </Horizontal>
    <Vertical>
      <line x1={0} y1={0} x2={width} y2={height}/>
    </Vertical>
  </SVG>
)

Because Horizontal and Vertical get rendered before SVG, and I’m only injecting the styles on render, ._compile_from_Vertical line {} appears before ._compiled_from_SVG line {}. They have the same specificity of course and so SVG wins.

Injected source should be in the same order it is written, not in the order it’s rendered.

[geelen]

Woo, found a manual escape hatch:

const Vertical = styled.g`
  && line {
    stroke-width: 1px;
  }
`

This generates .xxx.xxx line which lifts its specificity above .yyy line (from SVG above), so tbh I think this is “good enough” to consider this option closed.

In fact you can actually use && { some: thing; } to target the element itself (not just descendants). In case you have some greedy rules outside (like html p) which would override a styled.p with a single class name. This is great, since we don’t have to design good JS to cover bad CSS, we can just give folks a way to generate even worse CSS 👍

[geelen]

So this didn’t stay solved for long. I found that server-side rendering wasn’t firing the componentDidMount, so we can’t use that to inject.