How to debug CSS optimization errors

You can run your CSS through a W3C CSS validator to make sure it's correct.

If you're rendering CSS with React, make sure to use dangerouslySetInnerHTML:

// don't:
<style>{myCSS}</style>
// do:
<style dangerouslySetInnerHTML={{ __html: myCSS }} />

Otherwise, React will escape characters like ", which can cause invalid CSS, for example:

.my-style::after { content: ""; }

would become:

.my-style::after { content: &quot;&quot;; }