From 2238bcf020d953cd3f48dc81ebf54cff9583d592 Mon Sep 17 00:00:00 2001
From: gpbl <io@gpbl.dev>
Date: Thu, 8 Sep 2022 08:51:34 -0500
Subject: [PATCH] fix: CSS module doesn't include the root class (#1548)

---
 packages/react-day-picker/rollup.config.js | 12 ++++++++++--
 website/src/components/RenderExample.tsx   | 21 ++++++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/react-day-picker/rollup.config.js b/packages/react-day-picker/rollup.config.js
index 5e28c47d82..cc7ee37838 100644
--- a/packages/react-day-picker/rollup.config.js
+++ b/packages/react-day-picker/rollup.config.js
@@ -67,13 +67,21 @@ const buildConfig = {
           src: './src/style.css',
           dest: './dist',
           rename: 'style.module.css',
-          transform: (contents) => contents.toString().replace(/\.rdp-/g, '.')
+          transform: (contents) =>
+            contents
+              .toString()
+              .replace(/\.rdp-/g, '.')
+              .replace(/\.rdp/g, '.root')
         },
         {
           src: './src/style.css.d.ts',
           dest: './dist',
           rename: 'style.module.css.d.ts',
-          transform: (contents) => contents.toString().replace(/rdp-/g, '')
+          transform: (contents) =>
+            contents
+              .toString()
+              .replace(/\.rdp-/g, '.')
+              .replace(/\.rdp/g, '.root')
         }
       ]
     })
diff --git a/website/src/components/RenderExample.tsx b/website/src/components/RenderExample.tsx
index 599004b70d..23f5e84e81 100644
--- a/website/src/components/RenderExample.tsx
+++ b/website/src/components/RenderExample.tsx
@@ -5,6 +5,21 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import { useColorMode } from '@docusaurus/theme-common';
 import root from 'react-shadow';
 
+const style: string = require(`!raw-loader!./shadow-dom-styles.css`).default;
+const styleDark: string =
+  require(`!raw-loader!./shadow-dom-styles-dark.css`).default;
+const libStyle: string =
+  require(`!raw-loader!react-day-picker/dist/style.css`).default;
+const libStyleModule =
+  require(`react-day-picker/dist/style.module.css`).default;
+
+let libStyleModuleRaw: string =
+  require(`!raw-loader!react-day-picker/dist/style.module.css`).default;
+Object.entries(libStyleModule).map(([key, value]) => {
+  const regExp = new RegExp(`\\.${key}([,: .])+`, 'g');
+  libStyleModuleRaw = libStyleModuleRaw.replace(regExp, `.${value}$1`);
+});
+
 export function RenderExample(props: {
   name: string;
   rootStyle?: React.CSSProperties;
@@ -19,15 +34,11 @@ export function RenderExample(props: {
           return <pre>{e.message}</pre>;
         }
         const Component = require(`@site/examples/${props.name}`).default;
-        const libStyle =
-          require(`!raw-loader!react-day-picker/dist/style.css`).default;
-        const style = require(`!raw-loader!./shadow-dom-styles.css`).default;
-        const styleDark =
-          require(`!raw-loader!./shadow-dom-styles-dark.css`).default;
 
         return (
           <root.div style={props.rootStyle}>
             <style type="text/css">{libStyle}</style>
+            <style type="text/css">{libStyleModuleRaw}</style>
             <style type="text/css">{style}</style>
             <style type="text/css">{isDarkTheme && styleDark}</style>
             <Component />