Spiking Static CSS Extraction for Styled Components (The Babel Plugin)

before.js

const Nested = styled.div`
  width: 100%;

  &:hover {
    color: papayawhip;
    background: ${p => p.bg};
  }

  transform: rotate(180deg);
`;

output.md

Logging dynamic and static rule sets

static CSS: __TEMPORARY_CLASSNAME__ {width: 100%}
dynamic CSS: __TEMPORARY_CLASSNAME__ {}
static CSS: __TEMPORARY_CLASSNAME__:hover {color: papayawhip}
dynamic CSS: __TEMPORARY_CLASSNAME__:hover {background: __PLACEHOLDER_0__}
static CSS: __TEMPORARY_CLASSNAME__ {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg)}
dynamic CSS: __TEMPORARY_CLASSNAME__ {}

Result

const Nested = styled.div.withConfig({
  displayName: "before__Nested",
  componentId: "s1hfhnvg-0"
})([[":hover {background: ", p => p.bg, "}"]]);

Result after componentId refactor

{ '.s1hfhnvg-0': 'width: 100%-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg)',
  '.s1hfhnvg-0:hover': 'color: papayawhip' }
const Nested = styled.div.withConfig({
  displayName: "before__Nested",
  componentId: "s1hfhnvg-0"
})([[":hover {background: ", p => p.bg, "}"]]);