Fix CSS Identifier Cleaning (#12239)

vercel · Apr 27, 2020 · 937884b · 937884b
1 parent 04f3d94
commit 937884b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/packages/next/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts b/packages/next/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts
@@ -43,11 +43,11 @@ export function getCssModuleLocalIdent(
         /\.module_/,
         '_'
       )
-      // Replace any characters not in the below set to prevent invalid
-      // CSS characters
+      // Replace invalid symbols with underscores instead of escaping
+      // https://mathiasbynens.be/notes/css-escapes#identifiers-strings
       .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|__)/, '')
+      // "they cannot start with a digit, two hyphens, or a hyphen followed by a digit [sic]"
+      // https://www.w3.org/TR/CSS21/syndata.html#characters
+      .replace(/^(\d|--|-\d)/, '__$1')
   )
 }
diff --git a/test/integration/css-fixtures/catch-all-module/pages/[...post]/55css.module.css b/test/integration/css-fixtures/catch-all-module/pages/[...post]/55css.module.css
@@ -0,0 +1,3 @@
+.home {
+  color: green;
+}
diff --git a/test/integration/css-fixtures/catch-all-module/pages/[...post]/index.js b/test/integration/css-fixtures/catch-all-module/pages/[...post]/index.js
@@ -1,7 +1,8 @@
-import styles from './index.module.css'
+import styles1 from './index.module.css'
+import styles2 from './55css.module.css'
 
 export default () => (
-  <div className={styles.home} id="my-div">
+  <div className={styles1.home + ' ' + styles2.home} id="my-div">
     hello world
   </div>
 )
diff --git a/test/integration/css-modules/test/index.test.js b/test/integration/css-modules/test/index.test.js
@@ -524,11 +524,13 @@ describe('Catch-all Route CSS Module Usage', () => {
   it('should apply styles correctly', async () => {
     const browser = await webdriver(appPort, '/post-1')
 
-    const background = await browser
+    const bg = await browser
       .elementByCss('#my-div')
       .getComputedCss('background-color')
+    expect(bg).toMatch(/rgb(a|)\(255, 0, 0/)
 
-    expect(background).toMatch(/rgb(a|)\(255, 0, 0/)
+    const fg = await browser.elementByCss('#my-div').getComputedCss('color')
+    expect(fg).toMatch(/rgb(a|)\(0, 128, 0/)
   })
 
   it(`should've emitted a single CSS file`, async () => {
@@ -541,7 +543,7 @@ describe('Catch-all Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"._post__home__38gR-{background:red}"`
+      `".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"`
     )
   })
 })
diff --git a/test/integration/scss-modules/test/index.test.js b/test/integration/scss-modules/test/index.test.js
@@ -540,7 +540,7 @@ describe('Catch-all Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"._post__home__psZf9{background:red}"`
+      `".___post__home__psZf9{background:red}"`
     )
   })
 })