Single-file components in React, using Constructable Stylesheets

css.js

// https://github.com/calebdwilliams/construct-style-sheets
import "construct-style-sheets-polyfill";

export default strings => {
  if (document.readyState === "loading") {
    window.addEventListener("DOMContentLoaded", () => adopt(strings));
  } else {
    adopt(strings);
  }
};

const adopt = strings => {
  const sheet = new CSSStyleSheet();
  sheet.replace(strings.join(""));
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
};

example.js

import React from "react";
import css from "./css.js";

export default ({ red, children }) => (
  <div className={`example ${red ? "red" : ""}`}>
    {children}
  </div>
);

css`
  .example {
    color: blue;
  }

  .example.red {
    color: red;
  }
`;