Fix disabling of built-in CSS support if there is a custom loader

packages/next/build/webpack-config.ts

@@ -1869,13 +1869,22 @@ export default async function getBaseWebpackConfig(
 
     if (webpackConfig.module?.rules.length) {
       // Remove default CSS Loader
-      webpackConfig.module.rules = webpackConfig.module.rules.filter(
-        (r) =>
-          !(
-            typeof r.oneOf?.[0]?.options === 'object' &&
-            r.oneOf[0].options.__next_css_remove === true
-          )
-      )
+      webpackConfig.module.rules.forEach((r) => {
+        if (Array.isArray(r.oneOf)) {
+          let i = 0
+          while (i < r.oneOf.length) {
+            let o: any = r.oneOf[i]?.options
+            if (
+              typeof o === 'object' &&
+              typeof o.__next_css_remove === 'number'
+            ) {
+              // Remove all CSS-related entries
+              r.oneOf.splice(i, o.__next_css_remove)
+            }
+            i++
+          }
+        }
+      })
     }
     if (webpackConfig.plugins?.length) {
       // Disable CSS Extraction Plugin

packages/next/build/webpack/config/blocks/css/index.ts

@@ -124,18 +124,7 @@ export const css = curry(async function css(
     },
   ]
 
-  const fns: ConfigurationFn[] = [
-    loader({
-      oneOf: [
-        {
-          // Impossible regex expression
-          test: /a^/,
-          loader: 'noop-loader',
-          options: { __next_css_remove: true },
-        },
-      ],
-    }),
-  ]
+  const fns: ConfigurationFn[] = []
 
   const postCssPlugins = await getPostCssPlugins(
     ctx.rootDirectory,
@@ -395,6 +384,21 @@ export const css = curry(async function css(
     )
   }
 
+  fns.unshift(
+    loader({
+      oneOf: [
+        {
+          // Impossible regex expression
+          test: /a^/,
+          loader: 'noop-loader',
+          // Record the number of entries we need to remove if built-in CSS
+          // support is disabled
+          options: { __next_css_remove: fns.length + 1 },
+        },
+      ],
+    })
+  )
+
   const fn = pipe(...fns)
   return fn(config)
 })

test/integration/css-customization/test/index.test.js

@@ -142,6 +142,38 @@ describe('CSS Customization Array', () => {
   })
 })
 
+describe('CSS Customization custom loader', () => {
+  const appDir = join(fixturesDir, 'custom-configuration-loader')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+  })
+
+  it('should compile successfully', async () => {
+    const { code, stdout, stderr } = await nextBuild(appDir, [], {
+      stdout: true,
+      stderr: true,
+    })
+    expect(code).toBe(0)
+    expect(stderr).toMatch(/Built-in CSS support is being disabled/)
+    expect(stdout).toMatch(/Compiled successfully/)
+  })
+
+  it(`should've applied style`, async () => {
+    const pagesFolder = join(appDir, '.next/static/chunks/pages')
+
+    const files = await readdir(pagesFolder)
+    const indexFiles = files.filter((f) => /^index.+\.js$/.test(f))
+
+    expect(indexFiles.length).toBe(1)
+    const indexContent = await readFile(
+      join(pagesFolder, indexFiles[0]),
+      'utf8'
+    )
+    expect(indexContent).toMatch(/\.my-text\.jsx-[0-9a-z]+ {color:red}/)
+  })
+})
+
 describe('Bad CSS Customization', () => {
   const appDir = join(fixturesDir, 'bad-custom-configuration')
 

test/integration/css-fixtures/custom-configuration-loader/next.config.js

@@ -0,0 +1,20 @@
+const config = {
+  webpack: (config, { defaultLoaders }) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        defaultLoaders.babel,
+        {
+          loader: require('styled-jsx/webpack').loader,
+          options: {
+            type: (fileName, options) => options.query.type || 'scoped',
+          },
+        },
+      ],
+    })
+
+    return config
+  },
+}
+
+module.exports = config

test/integration/css-fixtures/custom-configuration-loader/pages/index.js

@@ -0,0 +1,10 @@
+import styles from '../styles/index.css'
+
+export default function Home() {
+  return (
+    <>
+      <div className="my-text">This text should be red.</div>
+      <style jsx>{styles}</style>
+    </>
+  )
+}

test/integration/css-fixtures/custom-configuration-loader/styles/index.css

@@ -0,0 +1,3 @@
+.my-text {
+  color: red;
+}