rsnext/packages/eslint-plugin-next/lib/rules/google-font-display.js
JJ Kasper 9a0fc42d56
Fix ie11 support with webpack 5 (#25014)
This fixes ie11 compatibility that broke in https://github.com/vercel/next.js/pull/24656 from the polyfills not being loaded first, our existing ie11 test caught this but was failing, this ensures the test is passing again. This also updates the `hrefValue` optional chaining in the eslint plugin as these files aren't transpiled and related tests were failing in azure 

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
2021-05-12 12:24:42 +00:00

56 lines
1.5 KiB
JavaScript

const NodeAttributes = require('../utils/nodeAttributes.js')
module.exports = {
meta: {
docs: {
description:
'Ensure correct font-display property is assigned for Google Fonts',
recommended: true,
},
},
create: function (context) {
return {
JSXOpeningElement(node) {
let message
if (node.name.name !== 'link') {
return
}
const attributes = new NodeAttributes(node)
if (!attributes.has('href') || !attributes.hasValue('href')) {
return
}
const hrefValue = attributes.value('href')
const isGoogleFont =
typeof hrefValue === 'string' &&
hrefValue.startsWith('https://fonts.googleapis.com/css')
if (isGoogleFont) {
const params = new URLSearchParams(hrefValue.split('?')[1])
const displayValue = params.get('display')
if (!params.has('display')) {
message = 'Display parameter is missing.'
} else if (
displayValue === 'block' ||
displayValue === 'fallback' ||
displayValue === 'auto'
) {
message = `${
displayValue[0].toUpperCase() + displayValue.slice(1)
} behavior is not recommended.`
}
}
if (message) {
context.report({
node,
message: `${message} See https://nextjs.org/docs/messages/google-font-display.`,
})
}
},
}
},
}