Add strict CSP mode with opt-in inline style removal

[ndbroadbent]

• Fixes #138

It also required this PR for goober which was merged and is now available in 2.1.17: https://github.com/cristianbote/goober/pull/612

---

This PR adds optional strict Content Security Policy (CSP) support to react-hot-toast, making it compatible with CSP policies that disallow inline styles.

Changes

• New strictCSP prop: Opt-in mode that removes all inline styles for CSP compliance
• Backward compatible: Default behavior unchanged - existing code works without modifications
• CSS variable theming: Added CSS variables for styling toast types in strict CSP mode
• Static CSS animations: Replaced dynamic keyframes() calls with static @keyframes CSS - cleaner, more performant, and CSP-compatible. NOTE: This change applies to both mode since it works either way.
• Nonce support: Leverages goober's CSP nonce support released in 2.1.17

API

// Default mode (unchanged behavior)
<Toaster
  toastOptions={{
    style: { background: 'red' }, // inline styles work
  }}
/>

// Strict CSP mode (opt-in)
<Toaster
  strictCSP={true}
  toastOptions={{
    className: 'my-toast', // use CSS classes instead
  }}
/>

CSS Variables (Strict CSP Mode)

:root {
  --rht-success-bg: #ecfdf5;
  --rht-success-fg: #065f46;
  --rht-error-bg: #fef2f2;
  --rht-error-fg: #991b1b;
  --rht-loading-bg: #eff6ff;
  --rht-loading-fg: #1e40af;
  --rht-blank-bg: #fff;
  --rht-blank-fg: #363636;
}

Why?

Inline style attributes cannot be secured with CSP nonces - they require 'unsafe-inline' which defeats the purpose of CSP. This PR provides a path for applications with strict CSP requirements while maintaining full backward compatibility.

Implementation

• Default mode: Uses inline styles for positioning and theming (original behavior)
• Strict CSP mode: Uses CSS flexbox for positioning, CSS variables for theming, and CSS classes for all styling

Documentation

• Updated README with CSP section
• Updated docs site with strict CSP mode examples
• Added migration guide for users who need CSP compliance

Backward Compatibility

✅ Fully backward compatible - no breaking changes. Strict CSP mode is opt-in via strictCSP={true} prop.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-hot-toast	Error			Oct 2, 2025 2:17pm

[vercel[bot]]

@ndbroadbent is attempting to deploy a commit to the timo's Team Team on Vercel.

A member of the Team first needs to authorize it.