Handle more invalid CSS class characters (#11809)

* Handle more invalid CSS class characters

* Remove old comment

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

@@ -43,8 +43,11 @@ export function getCssModuleLocalIdent(
         /\.module_/,
         '_'
       )
-      // replace `[` and `]` from dynamic routes as they aren't valid
-      // characters for CSS names
-      .replace(/(\[|\])/g, '_')
+      // Replace any characters not in the below set to prevent invalid
+      // CSS characters
+      .replace(/[^a-zA-Z0-9-_]/g, '_')
+      // CSS classes can also not start with a digit or a hyphen and then a
+      //digit https://www.w3.org/TR/CSS21/syndata.html#characters
+      .replace(/^(\d|_\d|__)/, '')
   )
 }

test/integration/css-fixtures/catch-all-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/catch-all-module/pages/[...post]/index.module.css

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

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

@@ -451,7 +451,6 @@ 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
@@ -498,3 +497,51 @@ describe('Dynamic Route CSS Module Usage', () => {
     )
   })
 })
+
+describe('Catch-all Route CSS Module Usage', () => {
+  const appDir = join(fixturesDir, 'catch-all-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__38gR-{background:red}"`
+    )
+  })
+})

test/integration/scss-fixtures/catch-all-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/catch-all-module/pages/[...post]/index.module.scss

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

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

@@ -450,7 +450,6 @@ 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
@@ -497,3 +496,51 @@ describe('Dynamic Route CSS Module Usage', () => {
     expect(background).toMatch(/rgb(a|)\(255, 0, 0/)
   })
 })
+
+describe('Catch-all Route CSS Module Usage', () => {
+  const appDir = join(fixturesDir, 'catch-all-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__psZf9{background:red}"`
+    )
+  })
+})