Bump stylelint to ^15.6.1 (mui#36351)

Co-authored-by: Michał Dudak <[email protected]>
andriy-shymkiv · Jul 3, 2023 · fb6ad9a · fb6ad9a
1 parent 9a13253
commit fb6ad9a
Show file tree

Hide file tree

Showing 56 changed files with 271 additions and 427 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,20 +1,26 @@
 module.exports = {
-  processors: ['stylelint-processor-styled-components'],
   extends: 'stylelint-config-standard',
   ignoreFiles: [
     // TypeScript declaration files contain no styles.
     // Stylelint is also reporting parseError on `docs/types/react-docgen.d.ts`.
     '**/*.d.ts',
   ],
   rules: {
-    'value-no-vendor-prefix': true,
-    'property-no-vendor-prefix': true,
+    'alpha-value-notation': null,
+    'declaration-colon-newline-after': null,
+    'function-parentheses-newline-inside': null, // not compatible with prettier
+    'media-feature-range-notation': null,
     'no-empty-source': null,
     'no-missing-end-of-source-newline': null,
-    'declaration-colon-newline-after': null,
+    'selector-class-pattern': null,
+    'string-no-newline': null, // not compatible with prettier
     'value-keyword-case': null,
     'value-list-comma-newline-after': null, // not compatible with prettier
-    'function-parentheses-newline-inside': null, // not compatible with prettier
-    'string-no-newline': null, // not compatible with prettier
   },
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.cjs', '**/*.mjs', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+      customSyntax: 'postcss-styled-syntax',
+    },
+  ],
 };
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -21,7 +21,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -42,7 +42,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -21,7 +21,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -42,7 +42,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -23,7 +23,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -44,7 +44,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -24,7 +24,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -45,7 +45,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
@@ -19,7 +19,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -40,7 +40,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
@@ -19,7 +19,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -40,7 +40,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -21,7 +21,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -42,7 +42,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -22,7 +22,7 @@ const blue = {
 };
 
 const CustomButton = styled(Button)`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -43,7 +43,7 @@ const CustomButton = styled(Button)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
@@ -51,7 +51,7 @@ const blue = {
 };
 
 const CustomButtonRoot = styled('button')`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -72,7 +72,7 @@ const CustomButtonRoot = styled('button')`
   }
 
   &.focusVisible {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
@@ -44,7 +44,7 @@ const blue = {
 };
 
 const CustomButtonRoot = styled('button')`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   line-height: 1.5rem;
   background-color: ${blue[500]};
@@ -65,7 +65,7 @@ const CustomButtonRoot = styled('button')`
   }
 
   &.focusVisible {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/components/form-control/BasicFormControl.js b/docs/data/base/components/form-control/BasicFormControl.js
@@ -65,7 +65,7 @@ const Label = styled(({ children, className }) => {
     </p>
   );
 })`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   margin-bottom: 4px;
 
@@ -93,7 +93,7 @@ const HelperText = styled((props) => {
 
   return showRequiredError ? <p {...props}>This field is required.</p> : null;
 })`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
 `;
 

diff --git a/docs/data/base/components/form-control/BasicFormControl.tsx b/docs/data/base/components/form-control/BasicFormControl.tsx
@@ -67,7 +67,7 @@ const Label = styled(
     );
   },
 )`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   margin-bottom: 4px;
 
@@ -95,7 +95,7 @@ const HelperText = styled((props: {}) => {
 
   return showRequiredError ? <p {...props}>This field is required.</p> : null;
 })`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
 `;
 

diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -53,7 +53,7 @@ const OkMark = styled('span')`
   margin-left: 8px;
   margin-top: 10px;
   position: absolute;
-  color: rgba(125, 200, 0, 1);
+  color: rgb(125 200 0 / 1);
 `;
 
 const blue = {

diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -53,7 +53,7 @@ const OkMark = styled('span')`
   margin-left: 8px;
   margin-top: 10px;
   position: absolute;
-  color: rgba(125, 200, 0, 1);
+  color: rgb(125 200 0 / 1);
 `;
 
 const blue = {

diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
@@ -84,11 +84,8 @@ const StyledModal = styled(Modal)(`
 const StyledBackdrop = styled(Backdrop)`
   z-index: -1;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
   -webkit-tap-highlight-color: transparent;
 `;
 

diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -81,11 +81,8 @@ const StyledModal = styled(Modal)(`
 const StyledBackdrop = styled(Backdrop)`
   z-index: -1;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
   -webkit-tap-highlight-color: transparent;
 `;
 

diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
@@ -68,10 +68,7 @@ const grey = {
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -80,11 +77,8 @@ const StyledModal = styled(Modal)`
 const StyledBackdrop = styled(Backdrop)`
   z-index: -1;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
   -webkit-tap-highlight-color: transparent;
 `;
 

diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -65,10 +65,7 @@ const grey = {
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -77,11 +74,8 @@ const StyledModal = styled(Modal)`
 const StyledBackdrop = styled(Backdrop)`
   z-index: -1;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
   -webkit-tap-highlight-color: transparent;
 `;
 

diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
@@ -105,10 +105,7 @@ const grey = {
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -117,11 +114,8 @@ const StyledModal = styled(Modal)`
 const StyledBackdrop = styled(Backdrop)`
   z-index: -1;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
   -webkit-tap-highlight-color: transparent;
 `;
 

diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
@@ -102,10 +102,7 @@ const grey = {
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -114,11 +111,8 @@ const StyledModal = styled(Modal)`
 const StyledBackdrop = styled(Backdrop)`
   z-index: -1;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
   -webkit-tap-highlight-color: transparent;
 `;