diff --git a/test/integration/css-customization/test/index.test.js b/test/integration/css-customization/test/index.test.js
index 015d5bfd20dcb17..54034b9dd3cd336 100644
--- a/test/integration/css-customization/test/index.test.js
+++ b/test/integration/css-customization/test/index.test.js
@@ -108,6 +108,39 @@ describe('Legacy Next-CSS Customization', () => {
})
})
+describe('Custom CSS Customization via Webpack', () => {
+ const appDir = join(fixturesDir, 'custom-configuration-webpack')
+
+ 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(stdout).toMatch(/Compiled successfully/)
+ expect(stderr).not.toMatch(
+ /Built-in CSS support is being disabled due to custom CSS configuration being detected/
+ )
+ })
+
+ it(`should've compiled and prefixed`, async () => {
+ const cssFolder = join(appDir, '.next/static/css')
+
+ const files = await readdir(cssFolder)
+ const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+ expect(cssFiles.length).toBe(1)
+ const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+ expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
+ `"@media (480px <= width < 768px){::placeholder{color:green}}.video{max-width:400px;max-height:300px}"`
+ )
+ })
+})
+
describe('CSS Customization Array', () => {
const appDir = join(fixturesDir, 'custom-configuration-arr')
diff --git a/test/integration/css-fixtures/custom-configuration-webpack/next.config.js b/test/integration/css-fixtures/custom-configuration-webpack/next.config.js
new file mode 100644
index 000000000000000..567e9738538e0b3
--- /dev/null
+++ b/test/integration/css-fixtures/custom-configuration-webpack/next.config.js
@@ -0,0 +1,36 @@
+module.exports = {
+ onDemandEntries: {
+ maxInactiveAge: 1000 * 60 * 60,
+ },
+ webpack(config) {
+ modifyLoaderConfig(
+ config.module.rules,
+ [/(? {
+ if (!Array.isArray(rule.use)) return
+ rule.use.forEach((u) => {
+ if (u.options.postcssOptions) {
+ u.options.postcssOptions.plugins = [
+ require('postcss-short-size')({
+ // Add a prefix to test that configuration is passed
+ prefix: 'xyz',
+ }),
+ ]
+ }
+ })
+ }
+ )
+
+ return config
+ },
+ future: { strictPostcssConfiguration: true },
+}
+
+function modifyLoaderConfig(rules, regexes, cb) {
+ rules.forEach((rule) => {
+ if (rule.oneOf) return modifyLoaderConfig(rule.oneOf, regexes, cb)
+ regexes.forEach((regex) => {
+ if (rule.test && rule.test.toString() === regex.toString()) cb(rule)
+ })
+ })
+}
diff --git a/test/integration/css-fixtures/custom-configuration-webpack/pages/_app.js b/test/integration/css-fixtures/custom-configuration-webpack/pages/_app.js
new file mode 100644
index 000000000000000..17a2196742e95d7
--- /dev/null
+++ b/test/integration/css-fixtures/custom-configuration-webpack/pages/_app.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+ render() {
+ const { Component, pageProps } = this.props
+ return