How to debug CSS optimization errors

CSS optimization errors are usually caused by invalid CSS in your custom HTML or code.

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;; }

Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI