[DataGrid][docs-infra] Fixing TailwindDemoContainer behaviour #18742

sinore69 · 2025-07-08T21:13:12Z

Steps to reproduce:

visit https://mui.com/x/react-data-grid/components/toolbar/#custom-elements
click on show code under custom elements
click anywhere inside the code

Result:

All the css for the page gets removed

Potential code area related to this issue:

https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/internals/demo/TailwindDemoContainer.tsx

  React.useEffect(() => {
    const body = documentBody ?? document.body;

    const script = document.createElement('script');
    script.src = 'https://unpkg.com/@tailwindcss/browser@4';

    let mounted = true;
    const cleanup = () => {
      mounted = false;
      script.remove();

      const head = body?.ownerDocument?.head;
      if (!head) {
        return;
      }

      const styles = head.querySelectorAll('style:not([data-emotion])');
      styles.forEach((style) => {
        const styleText = style.textContent?.substring(0, 100);
        const isTailwindStylesheet = styleText?.includes('tailwind');
        if (isTailwindStylesheet) {
          style.remove();
        }
      });
    };

The TailwindDemoContainer component dynamically loads Tailwind CSS by injecting a <script> tag. However, The script and styles were not being cleaned up on component unmount. While mounting/unmounting the component multiple times, Tailwind CSS remained in the DOM. This lead to unintended style bleed, memory leaks, or conflicts with other styles.

Solution logic:

Refactored the TailwindDemoContainer component to use global cache for loading the Tailwind CSS browser script.
Instead of injecting the script on every mount, the solution introduces shared global flags to track the loading state and reuse a single script load across all instances.
This ensures that the Tailwind script is only added once, avoids redundant requests, and eliminates performance issues caused by repeated injections.
The component now checks if the script is already loaded or in the process of loading, and uses a shared promise to coordinate multiple mounts.
This simplifies the component logic and makes the Tailwind loading mechanism more efficient and reliable.

Feedback on this PR is appreciated. Let me know if any changes or improvements are needed, happy to make updates if required!

mui-bot · 2025-07-08T21:15:03Z

Deploy preview: https://deploy-preview-18742--material-ui-x.netlify.app/

Bundle size report

Total Size Change: 0B^(0.00%) - Total Gzip Change: 0B^(0.00%)
Files: 122 total (0 added, 0 removed, 0 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-charts parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/BarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/ChartsToolbarPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/ChartZoomSlider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/FunnelChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/Heatmap parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/LineChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/PieChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/RadarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts-pro/ScatterChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/BarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartContainer parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartDataProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsAxisHighlight parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsClipPath parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsLegend parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsLocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsOverlay parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsReferenceLine parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsSurface parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsText parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsTooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsXAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ChartsYAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/Gauge parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/LineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/PieChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/RadarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/ScatterChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/SparkLineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-charts/Toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-data-grid parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-data-grid-premium parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-data-grid-premium/DataGridPremium parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-data-grid-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-data-grid/DataGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterDateFnsBase parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DateCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DateField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DateTimeField parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DayCalendarSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/DigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/MonthCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/PickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/PickersActionBar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/x-date-pickers/PickersCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 9b6ca52

sinore69 · 2025-07-16T16:58:15Z

Hey @KenanYusuf ,
I'm seeing this error during the CI run:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/root/mui-x/prettier.config.js' imported from /root/mui-x/node_modules/.pnpm/prettier@3.6.2/node_modules/prettier/index.mjs
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at resolveBase (file:///root/mui-x/node_modules/.pnpm/tsx@4.20.3/node_modules/tsx/dist/esm/index.mjs?1752684665969:2:3811)
    at async resolveDirectory (file:///root/mui-x/node_modules/.pnpm/tsx@4.20.3/node_modules/tsx/dist/esm/index.mjs?1752684665969:2:4304)
    at async resolve (file:///root/mui-x/node_modules/.pnpm/tsx@4.20.3/node_modules/tsx/dist/esm/index.mjs?1752684665969:2:5422)
    at async nextResolve (node:internal/modules/esm/hooks:748:22)
    at async Hooks.resolve (node:internal/modules/esm/hooks:240:24)
    at async handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///root/mui-x/prettier.config.js'
}

It looks like this error may be related to 0ef47e1
Reverting the file name to prettier.config.js fixes it.
Should i include that in this PR?

KenanYusuf · 2025-07-21T09:15:22Z

Hi @sinore69 — I'm not sure this solution is working as expected, as it's created 100+ diffs in Argos.

After digging into it a little, this line seems to be the issue. When the demo enters edit mode, documentBody is undefined. documentBody comes from here. The window function in this file comes from the monorepo demo renderer, and returns the window object of the iframe rather than the parent document. documentBody being undefined means means the tailwind reset is applied to the entire docs page.

I took a look to see if we fix the window function whilst in edit mode and came across this note:

A limitation from https://github.com/nihgwu/react-runner, we can't inject the window of the iframe so we need a disableLiveEdit option.

I'm ok with disabling the live edit feature for this demo. At least users would be able to select the demo code without the page breaking.

Looping in @cherniavskii since he helped with the implementation of this.

fix:tailwindDemoContainer

7dd4de0

sinore69 changed the title ~~fix:tailwindDemoContainer~~ [DataGrid][docs-infra] Fixing TailwindDemoContainer behaviour Jul 9, 2025

Merge branch 'master' into fix/tailwind-cleanup

758a574

zannager added scope: data grid Changes or issues related to the data grid product scope: docs-infra Specific to the docs-infra product labels Jul 9, 2025

arminmeh requested a review from KenanYusuf July 10, 2025 08:15

KenanYusuf and others added 2 commits July 16, 2025 15:14

Merge branch 'master' into fix/tailwind-cleanup

b430552

Merge branch 'master' into fix/tailwind-cleanup

8fd46fe

KenanYusuf added 2 commits July 17, 2025 11:24

Merge branch 'master' into fix/tailwind-cleanup

c4d8bc1

Merge branch 'master' into fix/tailwind-cleanup

9b6ca52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[DataGrid][docs-infra] Fixing TailwindDemoContainer behaviour #18742

[DataGrid][docs-infra] Fixing TailwindDemoContainer behaviour #18742

sinore69 commented Jul 8, 2025

Uh oh!

mui-bot commented Jul 8, 2025 •

edited

Loading

Uh oh!

sinore69 commented Jul 16, 2025

Uh oh!

KenanYusuf commented Jul 21, 2025

Uh oh!

Uh oh!

Uh oh!

[DataGrid][docs-infra] Fixing TailwindDemoContainer behaviour #18742

Are you sure you want to change the base?

[DataGrid][docs-infra] Fixing TailwindDemoContainer behaviour #18742

Conversation

sinore69 commented Jul 8, 2025

Uh oh!

mui-bot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

sinore69 commented Jul 16, 2025

Uh oh!

KenanYusuf commented Jul 21, 2025

Uh oh!

Uh oh!

mui-bot commented Jul 8, 2025 •

edited

Loading