add tests

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')
 

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,
+      [/(?<!\.module)\.css$/, /\.module\.css$/],
+      (rule) => {
+        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)
+    })
+  })
+}

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 <Component {...pageProps} />
+  }
+}
+
+export default MyApp

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

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div />
+}

test/integration/css-fixtures/custom-configuration-webpack/styles/global.css

@@ -0,0 +1,11 @@
+/* this should pass through untransformed */
+@media (480px <= width < 768px) {
+  ::placeholder {
+    color: green;
+  }
+}
+
+/* this should be transformed to width/height */
+.video {
+  -xyz-max-size: 400px 300px;
+}