Fix emotion import in size calculation

Bojagi · Dec 21, 2024 · 7c06791 · 7c06791
1 parent 3013936
commit 7c06791
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@emotion/cache": "^11.13.5",
+    "stylis": "4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/rollup.config.js b/rollup.config.js
@@ -10,7 +10,7 @@ export default [
   // browser-friendly UMD build
   {
     input: 'src/index.ts',
-    external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
+    external: ['react', 'react-dom', '@emotion/react', '@emotion/styled', '@emotion/cache', '@emotion/sheet', 'stylis'],
     output: {
       name: 'pablo',
       file: 'build/pablo.min.js',
@@ -20,6 +20,9 @@ export default [
         'react-dom': 'ReactDom',
         '@emotion/react': '@emotion/react',
         '@emotion/styled': '@emotion/styled',
+        '@emotion/cache': '@emotion/cache',
+        '@emotion/sheet': '@emotion/sheet',
+        'stylis': 'stylis',
       },
     },
     plugins: [

diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx
@@ -13,9 +13,10 @@ export const Portal = forwardRef<unknown, PortalProps>(({ children, name }, ref)
   const rootElement = useContext(rootContext);
   useEffect(() => setMountPoint(document.createElement('div')), []);
   useEffect(() => {
-    if (mountPoint && rootElement) {
+    const root = rootElement || document;
+    if (mountPoint) {
       mountPoint.setAttribute('data-testid', `pbl-${name}-mountpoint`);
-      const mountPointParent = rootElement instanceof ShadowRoot ? rootElement : rootElement.body;
+      const mountPointParent = root instanceof ShadowRoot ? root : root.body;
       mountPointParent.appendChild(mountPoint);
       setRef(ref, mountPoint);
       return () => {

diff --git a/src/theme/PabloThemeProvider.tsx b/src/theme/PabloThemeProvider.tsx
@@ -39,7 +39,7 @@ const EmotionCache = ({ root, children }: EmotionCacheProps) => {
     () =>
       doc &&
       createCache({
-        key: 'app',
+        key: 'pbl',
         container: doc instanceof Document ? doc.head : doc,
         stylisPlugins: [prefixer],
       }),