fix: CSS module doesn't include the root class (#1548)

gpbl · Sep 8, 2022 · 2238bcf · 2238bcf
1 parent 54f5425
commit 2238bcf
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git 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
@@ -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 />