@codecademy/styleguide 79.1.3-alpha.5aed17.0 → 79.1.3-alpha.b92369.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,6 +12,9 @@ import {
|
|
|
12
12
|
} from '@codecademy/gamut-styles/src';
|
|
13
13
|
import { Theme } from '@emotion/react';
|
|
14
14
|
|
|
15
|
+
/** Nonce passed to GamutProvider so Storybook works behind strict CSP (e.g. style-src 'nonce-{value}'). This is a test and will be removed*/
|
|
16
|
+
const STORYBOOK_CSP_NONCE = 'storybook-csp-nonce';
|
|
17
|
+
|
|
15
18
|
/**
|
|
16
19
|
* Story functions must be called as a regular function to avoid full-remounts
|
|
17
20
|
* See: https://github.com/storybookjs/storybook/issues/12255
|
|
@@ -55,6 +58,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
|
|
|
55
58
|
if (process.env.NODE_ENV === 'test') {
|
|
56
59
|
return (
|
|
57
60
|
<GamutProvider
|
|
61
|
+
nonce={STORYBOOK_CSP_NONCE}
|
|
58
62
|
useCache={false}
|
|
59
63
|
useGlobals={false}
|
|
60
64
|
theme={currentTheme as unknown as Theme}
|
|
@@ -72,7 +76,10 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
|
|
|
72
76
|
|
|
73
77
|
// Wrap all stories in minimal provider
|
|
74
78
|
return (
|
|
75
|
-
<GamutProvider
|
|
79
|
+
<GamutProvider
|
|
80
|
+
nonce={STORYBOOK_CSP_NONCE}
|
|
81
|
+
theme={currentTheme as unknown as Theme}
|
|
82
|
+
>
|
|
76
83
|
<Background
|
|
77
84
|
alwaysSetVariables
|
|
78
85
|
bg={themeBackground[colorMode]}
|
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
### [79.1.3-alpha.
|
|
6
|
+
### [79.1.3-alpha.b92369.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.b92369.0) (2026-02-24)
|
|
7
7
|
|
|
8
8
|
### Bug Fixes
|
|
9
9
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/styleguide",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "79.1.3-alpha.
|
|
4
|
+
"version": "79.1.3-alpha.b92369.0",
|
|
5
5
|
"author": "Codecademy Engineering",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"repository": "git@github.com:Codecademy/gamut.git",
|
|
11
|
-
"gitHead": "
|
|
11
|
+
"gitHead": "2207f7b1af7bdf71068a30db60e3b56b4aa174e9"
|
|
12
12
|
}
|
|
@@ -79,9 +79,6 @@ Your nonce should be the same value you use in your CSP header (e.g. `style-src
|
|
|
79
79
|
|
|
80
80
|
**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.
|
|
81
81
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
82
|
**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:
|
|
86
83
|
|
|
87
84
|
- **Next** `_app.tsx`
|