@codecademy/styleguide 79.1.2 → 79.1.3-alpha.1abfb2.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [79.1.3-alpha.1abfb2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.1abfb2.0) (2026-02-23)
+
+### Bug Fixes
+
+- **CSP:** add better nonce support ([afdff6e](https://github.com/Codecademy/gamut/commit/afdff6e78aa8bed6ce8e051742b3e52822b9ba82))
+
 ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
 
 **Note:** Version bump only for package @codecademy/styleguide

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.1.2",
+  "version": "79.1.3-alpha.1abfb2.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "bbc4cf8da76ebc754ed05b11acd9d2e81bb8683e"
+  "gitHead": "734662ca153eefff96d91dd279195d2232172191"
 }

package/src/lib/Meta/Installation.mdx

@@ -63,6 +63,22 @@ GamutProvider handles a few critical tasks that need to happen in order for comp
 3. Adds Global styles and CSS Variables
 4. Sets the current Color Mode context and variables.
 
+### Content Security Policy (CSP)
+
+If your app uses a strict Content-Security-Policy (e.g. `style-src` without `'unsafe-inline'`), pass a nonce to `GamutProvider` so Emotion and other Gamut-managed style tags are allowed:
+
+```tsx
+<GamutProvider nonce={yourCspNonce}>
+  <App />
+</GamutProvider>
+```
+
+Your nonce should be the same value you use in your CSP header (e.g. `style-src 'self' 'nonce-{value}'`). Gamut uses the [get-nonce](https://www.npmjs.com/package/get-nonce) singleton so that style tags injected by react-style-singleton (e.g. from FocusTrap) also receive this nonce.
+
+**Motion components:** When you pass a nonce to GamutProvider, it also wraps children in framer-motion's MotionConfig so that motion components (Drawer, Alert, List, Toaster, etc.) get the nonce on their injected style tags. No extra wrapper is needed.
+
+**Video (Vidstack):** The Video component uses `@vidstack/react`, which applies styles via inline styles (element.style / CSSOM). CSP nonces apply only to `<style>` and `<script>` elements, not to inline style attributes, so **nonce cannot fix** Vidstack's CSP violations. If you use strict CSP and the Video component, relax CSP for that context (e.g. allow the Video route or sandbox) or avoid using Video where strict CSP is required.
+
 **Note:** For react frameworks like Next and Gatsby this will be slightly different (see the SSR section for further steps for each framework). Your entry points for each framework will be:
 
 - **Next** `_app.tsx`