Fix IE11 incompatibility due to string litterals (#23784)

Fixes #22270

## Bug

- [X] Related issues linked using `fixes #number`
- [  ] Integration tests added

azure-pipelines.yml

@@ -69,7 +69,7 @@ stages:
   - stage: Test
     dependsOn: Build
     jobs:
-      - job: test_ie11_production
+      - job: test_ie11
         pool:
           vmImage: 'windows-2019'
         steps:
@@ -86,7 +86,7 @@ stages:
               path: $(System.DefaultWorkingDirectory)
             displayName: Cache Build
           - script: |
-              yarn testie --forceExit test/integration/production/
+              yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/
             displayName: 'Run tests'
 
       - job: test_unit

packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js

@@ -67,7 +67,7 @@ function modulesToDom(list, options) {
     const item = list[i]
     const id = options.base ? item[0] + options.base : item[0]
     const count = idCountMap[id] || 0
-    const identifier = `${id} ${count}`
+    const identifier = id + ' ' + count.toString()
 
     idCountMap[id] = count + 1
 
@@ -83,7 +83,7 @@ function modulesToDom(list, options) {
       stylesInDom[index].updater(obj)
     } else {
       stylesInDom.push({
-        identifier,
+        identifier: identifier,
         updater: addStyle(obj, options),
         references: 1,
       })
@@ -109,7 +109,7 @@ function insertStyleElement(options) {
     }
   }
 
-  Object.keys(attributes).forEach((key) => {
+  Object.keys(attributes).forEach(function (key) {
     style.setAttribute(key, attributes[key])
   })
 
@@ -154,7 +154,7 @@ function applyToSingletonTag(style, index, remove, obj) {
   const css = remove
     ? ''
     : obj.media
-    ? `@media ${obj.media} {${obj.css}}`
+    ? '@media ' + obj.media + ' {' + obj.css + '}'
     : obj.css
 
   // For old IE
@@ -189,9 +189,10 @@ function applyToTag(style, options, obj) {
   }
 
   if (sourceMap && typeof btoa !== 'undefined') {
-    css += `\n/*# sourceMappingURL=data:application/json;base64,${btoa(
-      unescape(encodeURIComponent(JSON.stringify(sourceMap)))
-    )} */`
+    css +=
+      '\n/*# sourceMappingURL=data:application/json;base64,' +
+      btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) +
+      ' */'
   }
 
   // For old IE
@@ -226,7 +227,7 @@ function addStyle(obj, options) {
     style = insertStyleElement(options)
 
     update = applyToTag.bind(null, style, options)
-    remove = () => {
+    remove = function () {
       removeStyleElement(style)
     }
   }
@@ -250,7 +251,7 @@ function addStyle(obj, options) {
   }
 }
 
-module.exports = (list, options) => {
+module.exports = function (list, options) {
   options = options || {}
 
   // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>

test/integration/css-client-nav/test/index.test.js

@@ -5,6 +5,7 @@ import { remove } from 'fs-extra'
 import {
   findPort,
   killApp,
+  launchApp,
   nextBuild,
   nextStart,
   renderViaHTTP,
@@ -15,25 +16,12 @@ import { join } from 'path'
 jest.setTimeout(1000 * 60 * 1)
 
 const fixturesDir = join(__dirname, '../../css-fixtures')
-
-describe('CSS Module client-side navigation in Production', () => {
 const appDir = join(fixturesDir, 'multi-module')
 
-  beforeAll(async () => {
-    await remove(join(appDir, '.next'))
-  })
-
 let appPort
 let app
-  beforeAll(async () => {
-    await nextBuild(appDir)
-    appPort = await findPort()
-    app = await nextStart(appDir, appPort)
-  })
-  afterAll(async () => {
-    await killApp(app)
-  })
 
+function runTests(dev) {
   it('should be able to client-side navigate from red to blue', async () => {
     let browser
     try {
@@ -69,16 +57,19 @@ describe('CSS Module client-side navigation in Production', () => {
     const content = await renderViaHTTP(appPort, '/blue')
     const $ = cheerio.load(content)
 
+    if (!dev) {
       // Ensure only `/blue` page's CSS is preloaded
       const serverCssPreloads = $('link[rel="preload"][as="style"]')
       expect(serverCssPreloads.length).toBe(1)
 
       const serverCssPrefetches = $('link[rel="prefetch"][as="style"]')
       expect(serverCssPrefetches.length).toBe(0)
+    }
 
     let browser
     try {
       browser = await webdriver(appPort, '/blue')
+
       await browser.eval(`window.__did_not_ssr = 'make sure this is set'`)
 
       const redColor = await browser.eval(
@@ -154,4 +145,31 @@ describe('CSS Module client-side navigation in Production', () => {
       }
     }
   })
+}
+
+describe('CSS Module client-side navigation', () => {
+  describe('production', () => {
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+    runTests()
+  })
+
+  describe('dev', () => {
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+    runTests(true)
+  })
 })