[docs] Guide on supporting npm packages with css imports

[brijeshb42]

This guide lists down any configuration change required for several bundlers to support npm packages that have css imports in their code.
This'll serve as a reference to packages like @mui/x-data-grid and any other similar packages that may have css imports in their code.

Preview Link - https://deploy-preview-46315--material-ui.netlify.app/material-ui/guides/configuring-bundlers-for-css-imports/

To be added -

• Config required for testing frameworks like Vitest and Jest
• Changes required to run code with css importing directly from runtimes like Node.js, Bun etc.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/guides/packages-with-css-imports/configuring-bundlers-for-css-imports.md

Bundle size report

@mui/material parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/system parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/utils parsed: 0B^(0.00%) gzip: 0B^(0.00%)

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

@mui/lab/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/CalendarPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/CalendarPickerSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/ClockPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/LoadingButton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/Masonry parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MonthPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/PickersDay parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TabContext parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TabList parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TabPanel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/Timeline parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineConnector parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineDot parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineItem parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineOppositeContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineSeparator parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TreeItem parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TreeView parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/useAutocomplete parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/YearPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Accordion parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AccordionActions parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AccordionDetails parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AccordionSummary parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Alert parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AlertTitle parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AppBar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Autocomplete parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AvatarGroup parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Backdrop parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Badge parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/BottomNavigation parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/BottomNavigationAction parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Box parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Breadcrumbs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Button parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ButtonBase parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ButtonGroup parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Card parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardActionArea parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardActions parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardMedia parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Chip parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CircularProgress parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ClickAwayListener parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Collapse parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Container parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CssBaseline parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DefaultPropsProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogActions parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogContentText parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogTitle parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Divider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Drawer parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Fab parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Fade parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FilledInput parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormControl parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormControlLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormGroup parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormHelperText parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/GlobalStyles parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Grid parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/GridLegacy parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Grow parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Icon parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/IconButton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ImageList parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ImageListItem parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ImageListItemBar parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against a5b3002