[core] Setup testing to work with CSS imports

.circleci/config.yml

@@ -43,7 +43,7 @@ default-job: &default-job
     COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
   working_directory: /tmp/mui
   docker:
-    - image: cimg/node:20.19
+    - image: cimg/node:23.11
 # CircleCI has disabled the cache across forks for security reasons.
 # Following their official statement, it was a quick solution, they
 # are working on providing this feature back with appropriate security measures.
@@ -60,36 +60,27 @@ default-context: &default-context
 commands:
   install_js:
     parameters:
-      browsers:
+      playwright:
+        description: If playwright should be installed.
         type: boolean
         default: false
-        description: 'Set to true if you intend to any browser (for example with playwright).'
       react-version:
+        description: The version of React to use.
         type: string
         default: << pipeline.parameters.react-version >>
-        description: The version of React to use.
 
     steps:
-      - when:
-          condition: << parameters.browsers >>
-          steps:
-            - run:
-                name: Install pnpm package manager
-                command: corepack enable
-      - when:
-          condition:
-            not: << parameters.browsers >>
-          steps:
-            - run:
-                name: Install pnpm package manager
-                # See https://stackoverflow.com/a/73411601
-                command: corepack enable --install-directory ~/bin
+      - run:
+          name: Install pnpm package manager
+          # See https://stackoverflow.com/a/73411601
+          command: corepack enable --install-directory ~/bin
 
       - run:
           name: View install environment
           command: |
             node --version
             pnpm --version
+
       - when:
           condition:
             equal: [stable, << parameters.react-version >>]
@@ -118,6 +109,12 @@ commands:
             - run:
                 name: Install @mui/material v6
                 command: pnpm use-material-ui-v6
+      - when:
+          condition: << parameters.playwright >>
+          steps:
+            - run:
+                name: Install playwright
+                command: pnpx [email protected] install --with-deps
 
 jobs:
   checkout:
@@ -240,12 +237,10 @@ jobs:
 
   test_browser:
     <<: *default-job
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.51.1-noble
     steps:
       - checkout
       - install_js:
-          browsers: true
+          playwright: true
           react-version: << parameters.react-version >>
       - run:
           name: Tests real browsers
@@ -272,41 +267,35 @@ jobs:
             NODE_OPTIONS: --max-old-space-size=3584
   test_e2e:
     <<: *default-job
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.51.1-noble
     steps:
       - checkout
       - install_js:
-          browsers: true
+          playwright: true
           react-version: << parameters.react-version >>
       - run:
           name: Run e2e tests
           command: pnpm test:e2e
   test_e2e_website:
     <<: *default-job
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.51.1-noble
     steps:
       - checkout
       - install_js:
-          browsers: true
+          playwright: true
       - run:
           name: pnpm test:e2e-website
           command: pnpm test:e2e-website
           environment:
             PLAYWRIGHT_TEST_BASE_URL: << parameters.e2e-base-url >>
   test_regressions:
     <<: *default-job
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.51.1-noble
     steps:
       - checkout
       - install_js:
-          browsers: true
+          playwright: true
           react-version: << parameters.react-version >>
       - run:
           name: Install ffmpeg
-          command: apt update && apt upgrade -y && apt install ffmpeg -y
+          command: sudo apt update && sudo apt upgrade -y && sudo apt install ffmpeg -y
       - run:
           name: Run visual regression tests
           command: xvfb-run pnpm test:regressions

.mocharc.js

@@ -8,11 +8,14 @@ module.exports = {
     // We're leaving this to make sure.
     'docs/.next/**',
   ],
-  'node-option': ['no-experimental-detect-module'],
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
+  require: [
+    require.resolve('./test/utils/ignoreCSS'),
+    require.resolve('./test/utils/setupBabel'),
+    require.resolve('./test/utils/setupJSDOM'),
+  ],
   'watch-ignore': [
     // default
     '.git',

babel.config.js

@@ -131,7 +131,7 @@ module.exports = function getBabelConfig(api) {
   }
 
   if (process.env.NODE_ENV === 'production') {
-    if (!process.env.E2E_BUILD) {
+    if (!process.env.TEST_BUILD) {
       plugins.push(['babel-plugin-react-remove-properties', { properties: ['data-testid'] }]);
     }
 

docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {

docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {

docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {

docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {

docs/data/tree-view/rich-tree-view/selection/ApiMethodSetItemSelection.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {

docs/data/tree-view/rich-tree-view/selection/ApiMethodSetItemSelection.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {

docs/data/tree-view/rich-tree-view/selection/ApiMethodSetItemSelectionKeepExistingSelection.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {

docs/data/tree-view/rich-tree-view/selection/ApiMethodSetItemSelectionKeepExistingSelection.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {

docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodFocusItem() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodFocusItem() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/items/ApiMethodGetItemDOMElement.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodGetItemDOMElement() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/items/ApiMethodGetItemDOMElement.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodGetItemDOMElement() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/selection/ApiMethodSetItemSelection.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodSetItemSelection() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/selection/ApiMethodSetItemSelection.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodSetItemSelection() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/selection/ApiMethodSetItemSelectionKeepExistingSelection.js

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodSetItemSelectionKeepExistingSelection() {
   const apiRef = useTreeViewApiRef();

docs/data/tree-view/simple-tree-view/selection/ApiMethodSetItemSelectionKeepExistingSelection.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodSetItemSelectionKeepExistingSelection() {
   const apiRef = useTreeViewApiRef();

docs/next.config.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
-import * as url from 'url';
 import * as fs from 'fs';
+import * as url from 'url';
 import { createRequire } from 'module';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 // @ts-expect-error This expected error should be gone once we update the monorepo
@@ -10,7 +10,10 @@ import { findPages } from './src/modules/utils/find';
 import { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
 import { SOURCE_CODE_REPO, SOURCE_GITHUB_BRANCH } from './constants';
 
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
+
 const require = createRequire(import.meta.url);
 
 const WORKSPACE_ROOT = path.resolve(currentDirectory, '../');
@@ -20,24 +23,6 @@ const MONOREPO_ALIASES = {
   '@mui/internal-markdown': path.resolve(MONOREPO_PATH, './packages/markdown'),
 };
 
-const WORKSPACE_ALIASES = {
-  '@mui/x-data-grid': path.resolve(WORKSPACE_ROOT, './packages/x-data-grid/src'),
-  '@mui/x-data-grid-generator': path.resolve(
-    WORKSPACE_ROOT,
-    './packages/x-data-grid-generator/src',
-  ),
-  '@mui/x-data-grid-pro': path.resolve(WORKSPACE_ROOT, './packages/x-data-grid-pro/src'),
-  '@mui/x-data-grid-premium': path.resolve(WORKSPACE_ROOT, './packages/x-data-grid-premium/src'),
-  '@mui/x-date-pickers': path.resolve(WORKSPACE_ROOT, './packages/x-date-pickers/src'),
-  '@mui/x-date-pickers-pro': path.resolve(WORKSPACE_ROOT, './packages/x-date-pickers-pro/src'),
-  '@mui/x-charts': path.resolve(WORKSPACE_ROOT, './packages/x-charts/src'),
-  '@mui/x-charts-pro': path.resolve(WORKSPACE_ROOT, './packages/x-charts-pro/src'),
-  '@mui/x-charts-vendor': path.resolve(WORKSPACE_ROOT, './packages/x-charts-vendor'),
-  '@mui/x-tree-view': path.resolve(WORKSPACE_ROOT, './packages/x-tree-view/src'),
-  '@mui/x-tree-view-pro': path.resolve(WORKSPACE_ROOT, './packages/x-tree-view-pro/src'),
-  '@mui/x-license': path.resolve(WORKSPACE_ROOT, './packages/x-license/src'),
-};
-
 function loadPkg(pkgPath: string): { version: string } {
   const pkgContent = fs.readFileSync(path.resolve(WORKSPACE_ROOT, pkgPath, 'package.json'), 'utf8');
   return JSON.parse(pkgContent);
@@ -58,6 +43,10 @@ try {
 }
 
 export default withDocsInfra({
+  typescript: {
+    // The tsconfig also contains path aliases that are used by next.js.
+    tsconfigPath: IS_PRODUCTION ? '../tsconfig.prod.json' : '../tsconfig.dev.json',
+  },
   experimental: {
     esmExternals: undefined,
   },
@@ -105,7 +94,6 @@ export default withDocsInfra({
         alias: {
           ...config.resolve.alias,
           ...MONOREPO_ALIASES,
-          ...WORKSPACE_ALIASES,
           // TODO: get rid of this, replace with @mui/docs
           docs: path.resolve(MONOREPO_PATH, './docs'),
           docsx: path.resolve(currentDirectory, '../docs'),
@@ -204,7 +192,7 @@ export default withDocsInfra({
     return map;
   },
   // Used to signal we run build
-  ...(process.env.NODE_ENV === 'production'
+  ...(IS_PRODUCTION
     ? {
         output: 'export',
       }

docs/package.json

@@ -36,6 +36,7 @@
     "@mui/system": "^7.0.1",
     "@mui/utils": "^7.0.1",
     "@mui/x-charts": "workspace:*",
+    "@mui/x-charts-pro": "workspace:*",
     "@mui/x-charts-vendor": "workspace:*",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-data-grid-generator": "workspace:*",
@@ -44,6 +45,7 @@
     "@mui/x-date-pickers": "workspace:*",
     "@mui/x-date-pickers-pro": "workspace:*",
     "@mui/x-tree-view": "workspace:*",
+    "@mui/x-tree-view-pro": "workspace:*",
     "@react-spring/web": "^9.7.5",
     "@tanstack/query-core": "^5.71.10",
     "@tanstack/react-query": "^5.71.10",

netlify.toml

@@ -8,7 +8,7 @@
   command = "pnpm docs:build"
 
 [build.environment]
-  NODE_VERSION = "20"
+  NODE_VERSION = "23"
   NODE_OPTIONS = "--max_old_space_size=4096"
 
 [[plugins]]