Replace brackets in CSS classes for dynamic routes (#11795)

packages/next/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts

@@ -29,17 +29,22 @@ export function getCssModuleLocalIdent(
   )
 
   // Have webpack interpolate the `[folder]` or `[name]` to its real value.
-  return loaderUtils
-    .interpolateName(
-      context,
-      fileNameOrFolder + '_' + exportName + '__' + hash,
-      options
-    )
-    .replace(
-      // Webpack name interpolation returns `about.module_root__2oFM9` for
-      // `.root {}` inside a file named `about.module.css`. Let's simplify
-      // this.
-      /\.module_/,
-      '_'
-    )
+  return (
+    loaderUtils
+      .interpolateName(
+        context,
+        fileNameOrFolder + '_' + exportName + '__' + hash,
+        options
+      )
+      .replace(
+        // Webpack name interpolation returns `about.module_root__2oFM9` for
+        // `.root {}` inside a file named `about.module.css`. Let's simplify
+        // this.
+        /\.module_/,
+        '_'
+      )
+      // replace `[` and `]` from dynamic routes as they aren't valid
+      // characters for CSS names
+      .replace(/(\[|\])/g, '_')
+  )
 }

test/integration/css-fixtures/dynamic-route-module/pages/[post]/index.js

@@ -0,0 +1,7 @@
+import styles from './index.module.css'
+
+export default () => (
+  <div className={styles.home} id="my-div">
+    hello world
+  </div>
+)

test/integration/css-fixtures/dynamic-route-module/pages/[post]/index.module.css

@@ -0,0 +1,3 @@
+.home {
+  background: #f00;
+}

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

@@ -449,3 +449,52 @@ describe('CSS Module Composes Usage (External)', () => {
     )
   })
 })
+
+describe('Dynamic Route CSS Module Usage', () => {
+  // This is a very bad feature. Do not use it.
+  const appDir = join(fixturesDir, 'dynamic-route-module')
+
+  let stdout
+  let code
+  let app
+  let appPort
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    ;({ code, stdout } = await nextBuild(appDir, [], {
+      stdout: true,
+    }))
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+
+  it('should have compiled successfully', () => {
+    expect(code).toBe(0)
+    expect(stdout).toMatch(/Compiled successfully/)
+  })
+
+  it('should apply styles correctly', async () => {
+    const browser = await webdriver(appPort, '/post-1')
+
+    const background = await browser
+      .elementByCss('#my-div')
+      .getComputedCss('background-color')
+
+    expect(background).toMatch(/rgb(a|)\(255, 0, 0/)
+  })
+
+  it(`should've emitted a single CSS file`, 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(
+      `"._post__home__2Cy-L{background:red}"`
+    )
+  })
+})

test/integration/scss-fixtures/dynamic-route-module/pages/[post]/index.js

@@ -0,0 +1,7 @@
+import styles from './index.module.scss'
+
+export default () => (
+  <div className={styles.home} id="my-div">
+    hello world
+  </div>
+)

test/integration/scss-fixtures/dynamic-route-module/pages/[post]/index.module.scss

@@ -0,0 +1,3 @@
+.home {
+  background: #f00;
+}

test/integration/scss-modules/test/index.test.js

@@ -448,3 +448,52 @@ describe('CSS Module Composes Usage (External)', () => {
     )
   })
 })
+
+describe('Dynamic Route CSS Module Usage', () => {
+  // This is a very bad feature. Do not use it.
+  const appDir = join(fixturesDir, 'dynamic-route-module')
+
+  let stdout
+  let code
+  let app
+  let appPort
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    ;({ code, stdout } = await nextBuild(appDir, [], {
+      stdout: true,
+    }))
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+
+  it('should have compiled successfully', () => {
+    expect(code).toBe(0)
+    expect(stdout).toMatch(/Compiled successfully/)
+  })
+
+  it(`should've emitted a single CSS file`, 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(
+      `"._post__home__3F5yW{background:red}"`
+    )
+  })
+
+  it('should apply styles correctly', async () => {
+    const browser = await webdriver(appPort, '/post-1')
+
+    const background = await browser
+      .elementByCss('#my-div')
+      .getComputedCss('background-color')
+
+    expect(background).toMatch(/rgb(a|)\(255, 0, 0/)
+  })
+})