diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 59727946003be..a3a6218e75f5b 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -1880,7 +1880,8 @@ export default async function getBaseWebpackConfig(
         new NextFontManifestPlugin({
           appDir,
         }),
-      isClient &&
+      !dev &&
+        isClient &&
         new CssChunkingPlugin(config.experimental.cssChunking === 'strict'),
       !dev &&
         isClient &&
diff --git a/test/e2e/app-dir/css-order/css-order.test.ts b/test/e2e/app-dir/css-order/css-order.test.ts
index 24d88e60cc90f..c8cdf95bc92a2 100644
--- a/test/e2e/app-dir/css-order/css-order.test.ts
+++ b/test/e2e/app-dir/css-order/css-order.test.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { createNextDescribe, FileRef } from 'e2e-utils'
+import { nextTestSetup, FileRef } from 'e2e-utils'
 
 function getPairs(all: string[]): (readonly [string, string])[] {
   const result: (readonly [string, string])[] = []
@@ -187,141 +187,150 @@ const PAGES: Record<
 
 const allPairs = getPairs(Object.keys(PAGES))
 
-for (const mode of process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])
-  createNextDescribe(
-    `css-order ${mode}`,
-    {
-      files: {
-        app: new FileRef(path.join(__dirname, 'app')),
-        pages: new FileRef(path.join(__dirname, 'pages')),
-        'next.config.js': process.env.TURBOPACK
-          ? `
+const options = (mode) => ({
+  files: {
+    app: new FileRef(path.join(__dirname, 'app')),
+    pages: new FileRef(path.join(__dirname, 'pages')),
+    'next.config.js': process.env.TURBOPACK
+      ? `
             module.exports = {}`
-          : `
+      : `
             module.exports = {
               experimental: {
                 cssChunking: ${JSON.stringify(mode)}
               }
             }`,
-      },
-      dependencies: {
-        sass: 'latest',
-      },
-    },
-    ({ next, isNextDev }) => {
-      for (const ordering of allPairs) {
-        const name = `should load correct styles navigating back again ${ordering.join(
-          ' -> '
-        )} -> ${ordering.join(' -> ')}`
+  },
+  dependencies: {
+    sass: 'latest',
+  },
+})
+describe.each(process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])(
+  'css-order %s',
+  (mode: string) => {
+    const { next, isNextDev } = nextTestSetup(options(mode))
+    for (const ordering of allPairs) {
+      const name = `should load correct styles navigating back again ${ordering.join(
+        ' -> '
+      )} -> ${ordering.join(' -> ')}`
+      if (ordering.some((page) => PAGES[page].conflict)) {
+        // Conflict scenarios won't support that case
+        continue
+      }
+      // TODO fix this case
+      const broken =
+        isNextDev || ordering.some((page) => PAGES[page].brokenLoading)
+      if (broken) {
+        it.todo(name)
+        continue
+      }
+      it(name, async () => {
+        const start = PAGES[ordering[0]]
+        const browser = await next.browser(start.url)
+        const check = async (pageInfo) => {
+          expect(
+            await browser
+              .waitForElementByCss(pageInfo.selector)
+              .getComputedCss('color')
+          ).toBe(pageInfo.color)
+          if (pageInfo.background) {
+            expect(
+              await browser
+                .waitForElementByCss(pageInfo.selector)
+                .getComputedCss('background-color')
+            ).toBe(pageInfo.background)
+          }
+        }
+        const navigate = async (page) => {
+          await browser.waitForElementByCss('#' + page).click()
+        }
+        await check(start)
+        for (const page of ordering.slice(1)) {
+          await navigate(page)
+          await check(PAGES[page])
+        }
+        for (const page of ordering) {
+          await navigate(page)
+          await check(PAGES[page])
+        }
+        await browser.close()
+      })
+    }
+  }
+)
+describe.each(process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])(
+  'css-order %s',
+  (mode: string) => {
+    const { next, isNextDev } = nextTestSetup(options(mode))
+    for (const ordering of allPairs) {
+      const name = `should load correct styles navigating ${ordering.join(
+        ' -> '
+      )}`
+      if (mode !== 'turbo') {
         if (ordering.some((page) => PAGES[page].conflict)) {
           // Conflict scenarios won't support that case
           continue
         }
         // TODO fix this case
-        const broken =
-          mode === 'turbo'
-            ? isNextDev
-            : ordering.some(
-                (page) =>
-                  PAGES[page].brokenLoading ||
-                  (isNextDev && PAGES[page].brokenLoadingDev)
-              )
+        const broken = ordering.some(
+          (page) =>
+            PAGES[page].brokenLoading ||
+            (isNextDev && PAGES[page].brokenLoadingDev)
+        )
         if (broken) {
           it.todo(name)
           continue
         }
-        it(name, async () => {
-          const start = PAGES[ordering[0]]
-          const browser = await next.browser(start.url)
-          const check = async (pageInfo) => {
-            expect(
-              await browser
-                .waitForElementByCss(pageInfo.selector)
-                .getComputedCss('color')
-            ).toBe(pageInfo.color)
-            if (pageInfo.background) {
-              expect(
-                await browser
-                  .waitForElementByCss(pageInfo.selector)
-                  .getComputedCss('background-color')
-              ).toBe(pageInfo.background)
-            }
-          }
-          const navigate = async (page) => {
-            await browser.waitForElementByCss('#' + page).click()
-          }
-          await check(start)
-          for (const page of ordering.slice(1)) {
-            await navigate(page)
-            await check(PAGES[page])
-          }
-          for (const page of ordering) {
-            await navigate(page)
-            await check(PAGES[page])
-          }
-        })
-      }
-      for (const ordering of allPairs) {
-        const name = `should load correct styles navigating ${ordering.join(
-          ' -> '
-        )}`
-        if (mode !== 'turbo') {
-          if (ordering.some((page) => PAGES[page].conflict)) {
-            // Conflict scenarios won't support that case
-            continue
-          }
-          // TODO fix this case
-          const broken = ordering.some(
-            (page) =>
-              PAGES[page].brokenLoading ||
-              (isNextDev && PAGES[page].brokenLoadingDev)
-          )
-          if (broken) {
-            it.todo(name)
-            continue
-          }
-        } else {
-          // TODO fix this case
-          const broken = ordering.some((page) => PAGES[page].brokenLoadingTurbo)
-          if (broken) {
-            it.todo(name)
-            continue
-          }
-        }
-        it(name, async () => {
-          const start = PAGES[ordering[0]]
-          const browser = await next.browser(start.url)
-          const check = async (pageInfo) => {
-            expect(
-              await browser
-                .waitForElementByCss(pageInfo.selector)
-                .getComputedCss('color')
-            ).toBe(pageInfo.color)
-          }
-          const navigate = async (page) => {
-            await browser.waitForElementByCss('#' + page).click()
-          }
-          await check(start)
-          for (const page of ordering.slice(1)) {
-            await navigate(page)
-            await check(PAGES[page])
-          }
-        })
-      }
-      for (const [page, pageInfo] of Object.entries(PAGES)) {
-        const name = `should load correct styles on ${page}`
-        if (mode === 'loose' && pageInfo.conflict) {
-          // Conflict scenarios won't support that case
+      } else {
+        // TODO fix this case
+        const broken = ordering.some((page) => PAGES[page].brokenLoadingTurbo)
+        if (broken) {
+          it.todo(name)
           continue
         }
-        it(name, async () => {
-          const browser = await next.browser(pageInfo.url)
+      }
+      it(name, async () => {
+        const start = PAGES[ordering[0]]
+        const browser = await next.browser(start.url)
+        const check = async (pageInfo) => {
           expect(
             await browser
               .waitForElementByCss(pageInfo.selector)
               .getComputedCss('color')
           ).toBe(pageInfo.color)
-        })
+        }
+        const navigate = async (page) => {
+          await browser.waitForElementByCss('#' + page).click()
+        }
+        await check(start)
+        for (const page of ordering.slice(1)) {
+          await navigate(page)
+          await check(PAGES[page])
+        }
+        await browser.close()
+      })
+    }
+  }
+)
+describe.each(process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])(
+  'css-order %s',
+  (mode: string) => {
+    const { next } = nextTestSetup(options(mode))
+    for (const [page, pageInfo] of Object.entries(PAGES)) {
+      const name = `should load correct styles on ${page}`
+      if (mode === 'loose' && pageInfo.conflict) {
+        // Conflict scenarios won't support that case
+        continue
       }
+      it(name, async () => {
+        const browser = await next.browser(pageInfo.url)
+        expect(
+          await browser
+            .waitForElementByCss(pageInfo.selector)
+            .getComputedCss('color')
+        ).toBe(pageInfo.color)
+        await browser.close()
+      })
     }
-  )
+  }
+)