From 08f1ae18e2271cd690eca8518a723c3eb806c1f9 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Tue, 22 Aug 2023 10:20:28 +0200 Subject: [PATCH] Added an eslint warning to restrict the import of useMediaQuery because it causes more trouble than it solves --- .changeset/thick-cougars-cheer.md | 5 +++++ packagesDev/eslint-config/index.js | 9 +++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 .changeset/thick-cougars-cheer.md diff --git a/.changeset/thick-cougars-cheer.md b/.changeset/thick-cougars-cheer.md new file mode 100644 index 0000000000..86854d4314 --- /dev/null +++ b/.changeset/thick-cougars-cheer.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/eslint-config-pwa': patch +--- + +Added an eslint warning to restrict the import of useMediaQuery because it causes more trouble than it solves diff --git a/packagesDev/eslint-config/index.js b/packagesDev/eslint-config/index.js index 1e3f684ab0..7beb3ec91b 100644 --- a/packagesDev/eslint-config/index.js +++ b/packagesDev/eslint-config/index.js @@ -111,7 +111,7 @@ module.exports = { '@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }], '@typescript-eslint/no-unbound-method': 'off', '@typescript-eslint/no-restricted-imports': [ - 'error', + 'warn', { paths: [ { @@ -134,7 +134,12 @@ module.exports = { 'TextField', 'ToggleButtonGroup', ], - message: `Please use \`import { SelectElement, TextFieldElement, etc } from '@graphcommerce/ecommerce-ui'\` for usage in forms. https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/ecommerce-ui/components/FormComponents`, + message: `Please use \`import { SelectElement, TextFieldElement, etc } from '@graphcommerce/ecommerce-ui'\` for usage in forms. https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/ecommerce-ui/components/FormComponents You can add '// eslint-disable-next-line @typescript-eslint/no-restricted-imports' comment if you're sure you want to use it.`, + }, + { + name: '@mui/material', + importNames: ['useMediaQuery'], + message: `useMediaQuery can cause large CLS/LCP issues when used to render a specific UI on a breakpoint. See https://mui.com/system/display/#hiding-elements for alternatives. You can add '// eslint-disable-next-line @typescript-eslint/no-restricted-imports' comment if you're sure you want to use it.`, }, { name: '@emotion/react',