Skip to content

Commit 4ae8972

Browse files
TheSisbTheSisb
authored
feat(theme): ability to leverage emotion CacheProvider (#2971)
* feat(theme): ability to leverage emotion CacheProvider * feat(styling-library): export CreateCacheOptions * chore: changesets * chore: small fixed, pinned dep * chore: update out of date types lib
1 parent d35903d commit 4ae8972

File tree

6 files changed

+62
-21
lines changed

6 files changed

+62
-21
lines changed

‎.changeset/metal-mayflies-thank.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@twilio-paste/theme': minor
3+
'@twilio-paste/core': minor
4+
---
5+
6+
[Theme] Add `cacheProviderProps` to the ThemeProvider which allows passing a custom `key` and `nonce` into Emotion's CacheProvider to get around CSP limitations.

‎.changeset/wicked-bananas-provide.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@twilio-paste/styling-library': minor
3+
'@twilio-paste/core': minor
4+
---
5+
6+
[Styling-library] Expose EmotionCacheProvider to pass in a key or nonce to help with Emotion + CSP

‎packages/paste-libraries/styling/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,16 @@
2525
"tsc": "tsc"
2626
},
2727
"dependencies": {
28+
"@emotion/cache": "11.7.1",
2829
"@emotion/react": "11.7.1",
2930
"@emotion/styled": "11.6.0",
3031
"@styled-system/css": "5.1.5",
3132
"@styled-system/should-forward-prop": "5.1.5",
3233
"@styled-system/theme-get": "5.1.2",
33-
"@types/styled-system": "^5.1.9",
34-
"@types/styled-system__css": "^5.0.5",
35-
"@types/styled-system__should-forward-prop": "^5.1.2",
36-
"@types/styled-system__theme-get": "^5.0.2",
34+
"@types/styled-system": "5.1.9",
35+
"@types/styled-system__css": "5.0.17",
36+
"@types/styled-system__should-forward-prop": "5.1.2",
37+
"@types/styled-system__theme-get": "5.0.2",
3738
"styled-system": "5.1.5"
3839
},
3940
"peerDependencies": {

‎packages/paste-libraries/styling/src/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Base styling system (emotion)
22
import styled from '@emotion/styled';
3+
import createCache from '@emotion/cache';
4+
import type {Options} from '@emotion/cache';
35

46
/*
57
* Custom styling application (styled-system)
@@ -19,6 +21,7 @@ export {css} from './css-function';
1921
export {themeGet} from '@styled-system/theme-get';
2022
export {createShouldForwardProp, props} from '@styled-system/should-forward-prop';
2123
export * from 'styled-system';
24+
export type CreateCacheOptions = Pick<Options, 'key' | 'nonce'>;
2225

2326
export type {StyledComponent, Interpolation} from '@emotion/styled';
2427
export type {SerializedStyles} from '@emotion/react';
@@ -28,7 +31,8 @@ export {
2831
keyframes,
2932
css as EmotionCSS,
3033
ThemeProvider,
34+
CacheProvider,
3135
withTheme,
3236
} from '@emotion/react';
3337

34-
export {styled};
38+
export {styled, createCache};

‎packages/paste-theme/src/themeProvider.tsx‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import * as React from 'react';
22
import {useReducedMotion, Globals as AnimatedGlobals} from '@twilio-paste/animation-library';
3-
import {styled, StylingGlobals, ThemeProvider as StyledThemeProvider} from '@twilio-paste/styling-library';
3+
import {
4+
styled,
5+
StylingGlobals,
6+
ThemeProvider as EmotionThemeProvider,
7+
createCache,
8+
CacheProvider as EmotionCacheProvider,
9+
} from '@twilio-paste/styling-library';
10+
import type {CreateCacheOptions} from '@twilio-paste/styling-library';
411

512
import {DefaultTheme, SendGridTheme, DarkTheme, TwilioTheme, TwilioDarkTheme} from './themes';
613
import {pasteGlobalStyles} from './styles/global';
@@ -54,14 +61,18 @@ export interface ThemeProviderProps {
5461
customBreakpoints?: string[];
5562
theme?: ThemeVariants;
5663
disableAnimations?: boolean;
64+
cacheProviderProps?: CreateCacheOptions;
5765
}
5866

5967
const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
6068
customBreakpoints,
6169
theme = ThemeVariants.DEFAULT,
6270
disableAnimations = false,
71+
// https://emotion.sh/docs/@emotion/cache#options
72+
cacheProviderProps,
6373
...props
6474
}) => {
75+
const [cache] = React.useState(cacheProviderProps ? createCache(cacheProviderProps) : null);
6576
const prefersReducedMotion = useReducedMotion();
6677
React.useMemo(() => {
6778
AnimatedGlobals.assign({
@@ -71,12 +82,24 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
7182

7283
const providerThemeProps = getProviderThemeProps(theme, customBreakpoints);
7384

85+
if (cache) {
86+
return (
87+
<EmotionCacheProvider value={cache}>
88+
<EmotionThemeProvider theme={providerThemeProps}>
89+
<StylingGlobals styles={pasteGlobalStyles({theme: providerThemeProps})} />
90+
<StylingGlobals styles={pasteFonts} />
91+
<StyledBase className="paste-theme-provider" {...props} />
92+
</EmotionThemeProvider>
93+
</EmotionCacheProvider>
94+
);
95+
}
96+
7497
return (
75-
<StyledThemeProvider theme={providerThemeProps}>
98+
<EmotionThemeProvider theme={providerThemeProps}>
7699
<StylingGlobals styles={pasteGlobalStyles({theme: providerThemeProps})} />
77100
<StylingGlobals styles={pasteFonts} />
78101
<StyledBase className="paste-theme-provider" {...props} />
79-
</StyledThemeProvider>
102+
</EmotionThemeProvider>
80103
);
81104
};
82105

‎yarn.lock‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3941,7 +3941,7 @@ __metadata:
39413941
languageName: node
39423942
linkType: hard
39433943

3944-
"@emotion/cache@npm:^11.7.1":
3944+
"@emotion/cache@npm:11.7.1, @emotion/cache@npm:^11.7.1":
39453945
version: 11.7.1
39463946
resolution: "@emotion/cache@npm:11.7.1"
39473947
dependencies:
@@ -14356,15 +14356,16 @@ __metadata:
1435614356
version: 0.0.0-use.local
1435714357
resolution: "@twilio-paste/styling-library@workspace:packages/paste-libraries/styling"
1435814358
dependencies:
14359+
"@emotion/cache": 11.7.1
1435914360
"@emotion/react": 11.7.1
1436014361
"@emotion/styled": 11.6.0
1436114362
"@styled-system/css": 5.1.5
1436214363
"@styled-system/should-forward-prop": 5.1.5
1436314364
"@styled-system/theme-get": 5.1.2
14364-
"@types/styled-system": ^5.1.9
14365-
"@types/styled-system__css": ^5.0.5
14366-
"@types/styled-system__should-forward-prop": ^5.1.2
14367-
"@types/styled-system__theme-get": ^5.0.2
14365+
"@types/styled-system": 5.1.9
14366+
"@types/styled-system__css": 5.0.17
14367+
"@types/styled-system__should-forward-prop": 5.1.2
14368+
"@types/styled-system__theme-get": 5.0.2
1436814369
react: ^17.0.2
1436914370
react-dom: ^17.0.2
1437014371
styled-system: 5.1.5
@@ -16073,7 +16074,7 @@ __metadata:
1607316074
languageName: node
1607416075
linkType: hard
1607516076

16076-
"@types/styled-system@npm:^5.1.9":
16077+
"@types/styled-system@npm:5.1.9":
1607716078
version: 5.1.9
1607816079
resolution: "@types/styled-system@npm:5.1.9"
1607916080
dependencies:
@@ -16082,23 +16083,23 @@ __metadata:
1608216083
languageName: node
1608316084
linkType: hard
1608416085

16085-
"@types/styled-system__css@npm:^5.0.5":
16086-
version: 5.0.11
16087-
resolution: "@types/styled-system__css@npm:5.0.11"
16086+
"@types/styled-system__css@npm:5.0.17":
16087+
version: 5.0.17
16088+
resolution: "@types/styled-system__css@npm:5.0.17"
1608816089
dependencies:
16089-
csstype: ^2.6.6
16090-
checksum: 6880f366457aad336adaa3fe8db2e1660232cc81aa57112ccbb56dc0bed0905fc817ec748c99460254374e044bd1cc7d44d6a4ac7b2dd715afbf98fba2656bfc
16090+
csstype: ^3.0.2
16091+
checksum: 3e2bf0d57e33df4a22076d5f1445f0337757606b2d09a9597d1438e74877985d32b3ea02036ebbf47ca2beedffaf3146ff74592282c13d23d39fe7c09375d410
1609116092
languageName: node
1609216093
linkType: hard
1609316094

16094-
"@types/styled-system__should-forward-prop@npm:^5.1.2":
16095+
"@types/styled-system__should-forward-prop@npm:5.1.2":
1609516096
version: 5.1.2
1609616097
resolution: "@types/styled-system__should-forward-prop@npm:5.1.2"
1609716098
checksum: ba99b5653136058baa9f4a510a6175da5ada14a4f104340979f93bd82c428ef3f733c51101e4f15a934d473d9041887d213516b99209b641ff4e715d2c5b4b60
1609816099
languageName: node
1609916100
linkType: hard
1610016101

16101-
"@types/styled-system__theme-get@npm:^5.0.2":
16102+
"@types/styled-system__theme-get@npm:5.0.2":
1610216103
version: 5.0.2
1610316104
resolution: "@types/styled-system__theme-get@npm:5.0.2"
1610416105
checksum: 73bfca8d75c3e9985fd8ee63602e9c7b00dda7ff1af563f74c5db84af50a3cd5155c2fdcaa1afd60762f5bcaabdc7bc69cdfa53e94ee64ee875536c575e9088c

0 commit comments

Comments
 (0)