Fix IE11 incompatibility due to string litterals (#23784)
Fixes #22270 ## Bug - [X] Related issues linked using `fixes #number` - [ ] Integration tests added
This commit is contained in:
parent
35258650ac
commit
b2ee0a93fe
3 changed files with 52 additions and 33 deletions
|
@ -69,7 +69,7 @@ stages:
|
||||||
- stage: Test
|
- stage: Test
|
||||||
dependsOn: Build
|
dependsOn: Build
|
||||||
jobs:
|
jobs:
|
||||||
- job: test_ie11_production
|
- job: test_ie11
|
||||||
pool:
|
pool:
|
||||||
vmImage: 'windows-2019'
|
vmImage: 'windows-2019'
|
||||||
steps:
|
steps:
|
||||||
|
@ -86,7 +86,7 @@ stages:
|
||||||
path: $(System.DefaultWorkingDirectory)
|
path: $(System.DefaultWorkingDirectory)
|
||||||
displayName: Cache Build
|
displayName: Cache Build
|
||||||
- script: |
|
- script: |
|
||||||
yarn testie --forceExit test/integration/production/
|
yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/
|
||||||
displayName: 'Run tests'
|
displayName: 'Run tests'
|
||||||
|
|
||||||
- job: test_unit
|
- job: test_unit
|
||||||
|
|
|
@ -67,7 +67,7 @@ function modulesToDom(list, options) {
|
||||||
const item = list[i]
|
const item = list[i]
|
||||||
const id = options.base ? item[0] + options.base : item[0]
|
const id = options.base ? item[0] + options.base : item[0]
|
||||||
const count = idCountMap[id] || 0
|
const count = idCountMap[id] || 0
|
||||||
const identifier = `${id} ${count}`
|
const identifier = id + ' ' + count.toString()
|
||||||
|
|
||||||
idCountMap[id] = count + 1
|
idCountMap[id] = count + 1
|
||||||
|
|
||||||
|
@ -83,7 +83,7 @@ function modulesToDom(list, options) {
|
||||||
stylesInDom[index].updater(obj)
|
stylesInDom[index].updater(obj)
|
||||||
} else {
|
} else {
|
||||||
stylesInDom.push({
|
stylesInDom.push({
|
||||||
identifier,
|
identifier: identifier,
|
||||||
updater: addStyle(obj, options),
|
updater: addStyle(obj, options),
|
||||||
references: 1,
|
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])
|
style.setAttribute(key, attributes[key])
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -154,7 +154,7 @@ function applyToSingletonTag(style, index, remove, obj) {
|
||||||
const css = remove
|
const css = remove
|
||||||
? ''
|
? ''
|
||||||
: obj.media
|
: obj.media
|
||||||
? `@media ${obj.media} {${obj.css}}`
|
? '@media ' + obj.media + ' {' + obj.css + '}'
|
||||||
: obj.css
|
: obj.css
|
||||||
|
|
||||||
// For old IE
|
// For old IE
|
||||||
|
@ -189,9 +189,10 @@ function applyToTag(style, options, obj) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (sourceMap && typeof btoa !== 'undefined') {
|
if (sourceMap && typeof btoa !== 'undefined') {
|
||||||
css += `\n/*# sourceMappingURL=data:application/json;base64,${btoa(
|
css +=
|
||||||
unescape(encodeURIComponent(JSON.stringify(sourceMap)))
|
'\n/*# sourceMappingURL=data:application/json;base64,' +
|
||||||
)} */`
|
btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) +
|
||||||
|
' */'
|
||||||
}
|
}
|
||||||
|
|
||||||
// For old IE
|
// For old IE
|
||||||
|
@ -226,7 +227,7 @@ function addStyle(obj, options) {
|
||||||
style = insertStyleElement(options)
|
style = insertStyleElement(options)
|
||||||
|
|
||||||
update = applyToTag.bind(null, style, options)
|
update = applyToTag.bind(null, style, options)
|
||||||
remove = () => {
|
remove = function () {
|
||||||
removeStyleElement(style)
|
removeStyleElement(style)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -250,7 +251,7 @@ function addStyle(obj, options) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = (list, options) => {
|
module.exports = function (list, options) {
|
||||||
options = options || {}
|
options = options || {}
|
||||||
|
|
||||||
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { remove } from 'fs-extra'
|
||||||
import {
|
import {
|
||||||
findPort,
|
findPort,
|
||||||
killApp,
|
killApp,
|
||||||
|
launchApp,
|
||||||
nextBuild,
|
nextBuild,
|
||||||
nextStart,
|
nextStart,
|
||||||
renderViaHTTP,
|
renderViaHTTP,
|
||||||
|
@ -15,25 +16,12 @@ import { join } from 'path'
|
||||||
jest.setTimeout(1000 * 60 * 1)
|
jest.setTimeout(1000 * 60 * 1)
|
||||||
|
|
||||||
const fixturesDir = join(__dirname, '../../css-fixtures')
|
const fixturesDir = join(__dirname, '../../css-fixtures')
|
||||||
|
const appDir = join(fixturesDir, 'multi-module')
|
||||||
|
|
||||||
describe('CSS Module client-side navigation in Production', () => {
|
let appPort
|
||||||
const appDir = join(fixturesDir, 'multi-module')
|
let app
|
||||||
|
|
||||||
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 () => {
|
it('should be able to client-side navigate from red to blue', async () => {
|
||||||
let browser
|
let browser
|
||||||
try {
|
try {
|
||||||
|
@ -69,16 +57,19 @@ describe('CSS Module client-side navigation in Production', () => {
|
||||||
const content = await renderViaHTTP(appPort, '/blue')
|
const content = await renderViaHTTP(appPort, '/blue')
|
||||||
const $ = cheerio.load(content)
|
const $ = cheerio.load(content)
|
||||||
|
|
||||||
// Ensure only `/blue` page's CSS is preloaded
|
if (!dev) {
|
||||||
const serverCssPreloads = $('link[rel="preload"][as="style"]')
|
// Ensure only `/blue` page's CSS is preloaded
|
||||||
expect(serverCssPreloads.length).toBe(1)
|
const serverCssPreloads = $('link[rel="preload"][as="style"]')
|
||||||
|
expect(serverCssPreloads.length).toBe(1)
|
||||||
|
|
||||||
const serverCssPrefetches = $('link[rel="prefetch"][as="style"]')
|
const serverCssPrefetches = $('link[rel="prefetch"][as="style"]')
|
||||||
expect(serverCssPrefetches.length).toBe(0)
|
expect(serverCssPrefetches.length).toBe(0)
|
||||||
|
}
|
||||||
|
|
||||||
let browser
|
let browser
|
||||||
try {
|
try {
|
||||||
browser = await webdriver(appPort, '/blue')
|
browser = await webdriver(appPort, '/blue')
|
||||||
|
|
||||||
await browser.eval(`window.__did_not_ssr = 'make sure this is set'`)
|
await browser.eval(`window.__did_not_ssr = 'make sure this is set'`)
|
||||||
|
|
||||||
const redColor = await browser.eval(
|
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)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue