update stylelint to v16, fix lint errors

Akemona · Feb 15, 2024 · cb76e68 · cb76e68
1 parent 4cbe4e4
commit cb76e68
Show file tree

Hide file tree

Showing 196 changed files with 1,297 additions and 1,548 deletions.
diff --git a/.eslintrc.back.js b/.eslintrc.back.js
@@ -6,10 +6,10 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
-    'prettier',
     'plugin:import/errors',
     'plugin:import/warnings',
     'plugin:node/recommended',
+    'prettier',
   ],
   env: {
     es6: true,
@@ -36,5 +36,6 @@ module.exports = {
     'node/no-callback-literal': 'error',
     'node/handle-callback-err': 'error',
     'one-var': ['error', 'never'],
+    'space-before-function-paren': 'off',
   },
 };
diff --git a/.eslintrc.front.js b/.eslintrc.front.js
@@ -129,5 +129,6 @@ module.exports = {
     'class-methods-use-this': 0,
     'no-loss-of-precision': 0,
     'default-param-last': 0,
+    'space-before-function-paren': 0,
   },
 };
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,13 +1,16 @@
 {
-  "processors": [
-    "stylelint-processor-styled-components"
-  ],
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
-  ],
+  "extends": ["stylelint-config-standard"],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "font-family-no-missing-generic-family-keyword": null,
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "rule-empty-line-before": null,
+    "media-feature-range-notation": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "color-function-notation": null,
+    "media-query-no-invalid": null,
+    "selector-not-notation": null,
+    "no-empty-source": null
   }
-}
+}
diff --git a/package.json b/package.json
@@ -39,17 +39,16 @@
     "lint-staged": "13.0.3",
     "lodash": "4.17.21",
     "npm-run-all": "^4.1.5",
+    "postcss-styled-syntax": "0.6.4",
     "prettier": "~3.2.5",
     "qs": "6.11.0",
     "react-test-renderer": "^17.0.2",
     "request": "^2.87.0",
     "request-promise-native": "^1.0.9",
     "rimraf": "3.0.2",
     "snyk": "^1.566.0",
-    "stylelint": "13.13.1",
-    "stylelint-config-recommended": "3.0.0",
-    "stylelint-config-styled-components": "0.1.1",
-    "stylelint-processor-styled-components": "1.10.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-standard": "36.0.0",
     "supertest": "5.0.0",
     "wait-on": "^3.2.0",
     "yargs": "17.6.2"

diff --git a/packages/strapi-admin/admin/src/components/BaselineAlignement/index.js b/packages/strapi-admin/admin/src/components/BaselineAlignement/index.js
@@ -8,10 +8,8 @@ import styled from 'styled-components';
 // I create it to temporary fix the baseline alignment until we have the design system.
 
 const BaselineAlignment = styled.div`
-  padding-top: ${({ size, top }) => top && size};
-  padding-right: ${({ size, right }) => right && size};
-  padding-bottom: ${({ size, bottom }) => bottom && size};
-  padding-left: ${({ size, left }) => left && size};
+  padding: ${({ size, top }) => top && size} ${({ size, right }) => right && size}
+    ${({ size, bottom }) => bottom && size} ${({ size, left }) => left && size};
 `;
 
 BaselineAlignment.defaultProps = {

diff --git a/packages/strapi-admin/admin/src/components/Fonts/index.js b/packages/strapi-admin/admin/src/components/Fonts/index.js
@@ -26,47 +26,53 @@ import latoBlackWoff2 from '@buffetjs/styles/webfonts/Lato-Black.woff2';
 
 const Fonts = createGlobalStyle`
   @font-face {
-    font-family: 'FontAwesome';
+    font-family: FontAwesome;
     src: url(${faBrandsLight2}) format("woff2"), url(${faBrandsLight}) format("woff");
     font-weight: 400;
     font-style: normal;
   }
+
   @font-face {
-    font-family: 'FontAwesome';
+    font-family: FontAwesome;
     src: url(${faRegularLight2}) format("woff2"), url(${faRegularLight}) format("woff");
     font-weight: 400;
     font-style: normal;
   }
+
   @font-face {
-    font-family: 'FontAwesome';
+    font-family: FontAwesome;
     src: url(${faSolidHeavy2}) format("woff2"), url(${faSolidHeavy}) format("woff");
     font-weight: 400;
     font-style: normal;
   }
+
   /* Lato Regular - 400 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src: url(${latoRegularWoff2}) format('woff2'), url(${latoRegularWoff}) format('woff'), url(${latoRegular}) format('truetype');
     font-weight: 400;
     font-style: normal;
   }
+
   /* Lato Semi-Bold - 500 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src: url(${latoSemiBoldWoff2}) format('woff2'), url(${latoSemiBoldWoff}) format('woff'), url(${latoSemiBold}) format('truetype');
     font-weight: 500;
     font-style: normal;
   }
+
   /* Lato Bold - 600 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src: url(${latoBoldWoff2}) format('woff2'), url(${latoBoldWoff}) format('woff'), url(${latoBold}) format('truetype');
     font-weight: 600;
     font-style: normal;
   }
+
   /* Lato Black - 900 */
   @font-face {
-    font-family: 'Lato';
+    font-family: Lato;
     src:  url(${latoBlackWoff2}) format('woff2'), url(${latoBlackWoff}) format('woff'), url(${latoBlack}) format('truetype');
     font-weight: 900;
     font-style: normal;

diff --git a/packages/strapi-admin/admin/src/components/FormBloc/index.js b/packages/strapi-admin/admin/src/components/FormBloc/index.js
@@ -5,41 +5,43 @@ import PropTypes from 'prop-types';
 import Bloc from '../Bloc';
 
 function FormBloc({ children, actions, isLoading, title, subtitle }) {
-  return <Bloc>
-    <BaselineAlignment top size={title ? '18px' : '22px'} />
-    <Padded left right size="sm">
-      {isLoading ? (
-        <>
-          <LoadingIndicator />
-          <BaselineAlignment bottom size="22px" />
-        </>
-      ) : (
-        <>
-          {title && (
-            <>
-              <Padded left right size="xs">
-                <Flex justifyContent="space-between">
-                  <Padded left right size="sm">
-                    <Text fontSize="lg" fontWeight="bold">
-                      {title}
-                    </Text>
-                    {subtitle && (
-                      <Text color="grey" lineHeight="1.8rem">
-                        {subtitle}
+  return (
+    <Bloc>
+      <BaselineAlignment top size={title ? '18px' : '22px'} />
+      <Padded left right size="sm">
+        {isLoading ? (
+          <>
+            <LoadingIndicator />
+            <BaselineAlignment bottom size="22px" />
+          </>
+        ) : (
+          <>
+            {title && (
+              <>
+                <Padded left right size="xs">
+                  <Flex justifyContent="space-between">
+                    <Padded left right size="sm">
+                      <Text fontSize="lg" fontWeight="bold">
+                        {title}
                       </Text>
-                    )}
-                  </Padded>
-                  {actions}
-                </Flex>
-              </Padded>
-              <BaselineAlignment top size="18px" />
-            </>
-          )}
-          <Row>{children}</Row>
-        </>
-      )}
-    </Padded>
-  </Bloc>
+                      {subtitle && (
+                        <Text color="grey" lineHeight="1.8rem">
+                          {subtitle}
+                        </Text>
+                      )}
+                    </Padded>
+                    {actions}
+                  </Flex>
+                </Padded>
+                <BaselineAlignment top size="18px" />
+              </>
+            )}
+            <Row>{children}</Row>
+          </>
+        )}
+      </Padded>
+    </Bloc>
+  );
 }
 
 FormBloc.defaultProps = {

diff --git a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js
@@ -1,12 +1,13 @@
 import { createGlobalStyle } from 'styled-components';
 
+/* stylelint-disable selector-not-notation */
 const GlobalStyle = createGlobalStyle`
   html {
     font-size: 62.5%;
   }
 
   body {
-    font-family: 'Lato';
+    font-family: Lato;
     font-size: 1.4rem;
     line-height: 1.5;
     color: #292b2c;
@@ -15,7 +16,7 @@ const GlobalStyle = createGlobalStyle`
   * {
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
-    font-family: 'Lato';
+    font-family: Lato;
   }
 
   h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -52,7 +53,7 @@ const GlobalStyle = createGlobalStyle`
 
   .modal-content {
     border-radius: .2rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 5%);
     border: none;
 
   }
@@ -101,7 +102,7 @@ const GlobalStyle = createGlobalStyle`
   .btn-secondary,
   .show > .btn-secondary.dropdown-toggle:focus {
     &:focus, &:active, &:hover, &.focus {
-      box-shadow: 0 0 0 0px rgba(134,142,150,0.5);
+      box-shadow: 0 0 0 0 rgba(134,142,150,50%);
       color: rgb(51, 55, 64);
       background-color: rgb(250, 250, 251) !important;
 

diff --git a/packages/strapi-admin/admin/src/components/Header/index.js b/packages/strapi-admin/admin/src/components/Header/index.js
@@ -10,14 +10,11 @@ import PropTypes from 'prop-types';
 const Header = styled.div`
   width: 100%;
   height: ${(props) => props.theme.main.sizes.header.height};
-
   position: fixed;
   z-index: 1040;
   left: ${(props) => props.theme.main.sizes.leftMenu.width};
-
-  box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
+  box-shadow: 0 1px 2px 0 rgb(40 42 49 / 16%);
   background-color: ${(props) => props.theme.main.colors.white};
-
   line-height: ${(props) => props.theme.main.sizes.header.height};
 `;
 

diff --git a/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuFooter/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuFooter/Wrapper.js
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
     padding-left: 15px;
     padding-right: 15px;
     line-height: 3rem;
-    background-color: rgba(255, 255, 255, 0.02);
+    background-color: rgb(255 255 255 / 2%);
     font-size: 1rem;
     font-weight: 400;
     letter-spacing: 0.05rem;

diff --git a/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuHeader/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuHeader/Wrapper.js
@@ -20,8 +20,7 @@ const Wrapper = styled.div`
     height: ${(props) => props.theme.main.sizes.leftMenu.height};
     font-size: 2rem;
     letter-spacing: 0.2rem;
-    color: $white;
-
+    color: white;
     background-image: url(${Logo});
     background-repeat: no-repeat;
     background-position: left center;

diff --git a/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuHeader/index.js b/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuHeader/index.js
@@ -4,11 +4,13 @@ import { Link } from 'react-router-dom';
 import Wrapper from './Wrapper';
 
 function LeftMenuHeader() {
-  return <Wrapper>
-    <Link to="/" className="leftMenuHeaderLink">
-      <span className="projectName" />
-    </Link>
-  </Wrapper>
+  return (
+    <Wrapper>
+      <Link to="/" className="leftMenuHeaderLink">
+        <span className="projectName" />
+      </Link>
+    </Wrapper>
+  );
 }
 
 export default LeftMenuHeader;
diff --git a/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuLink/LeftMenuIcon.js b/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuLink/LeftMenuIcon.js
@@ -12,7 +12,7 @@ const FaIcon = styled(({ small, ...props }) => <FontAwesomeIcon {...props} />)`
 `;
 
 function LeftMenuIcon({ icon }) {
-  return <FaIcon small={icon === 'circle'} icon={icon} />
+  return <FaIcon small={icon === 'circle'} icon={icon} />;
 }
 
 LeftMenuIcon.propTypes = {

diff --git a/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuLink/NotificationCount.js b/packages/strapi-admin/admin/src/components/LeftMenu/LeftMenuLink/NotificationCount.js
@@ -7,18 +7,20 @@ const NotificationWrapper = styled.div`
   height: 14px;
   margin-top: 4px;
   margin-right: 20px;
-  padding: 0px 4px;
+  padding: 0 4px;
   background-color: #383d49;
   border-radius: 2px;
   font-size: 11px;
 `;
 
 function NotificationCount({ count }) {
-  return <NotificationWrapper>
-    <Text fontWeight="bold" fontSize="xs" lineHeight="14px" color="#919bae">
-      {count}
-    </Text>
-  </NotificationWrapper>
+  return (
+    <NotificationWrapper>
+      <Text fontWeight="bold" fontSize="xs" lineHeight="14px" color="#919bae">
+        {count}
+      </Text>
+    </NotificationWrapper>
+  );
 }
 
 NotificationCount.defaultProps = {

diff --git a/packages/strapi-admin/admin/src/components/LeftMenu/LinksContainer/index.js b/packages/strapi-admin/admin/src/components/LeftMenu/LinksContainer/index.js
@@ -4,10 +4,7 @@ import PropTypes from 'prop-types';
 const LinksContainer = styled.div`
   padding-top: 0.7rem;
   position: absolute;
-  top: ${(props) => props.theme.main.sizes.leftMenu.height};
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: ${(props) => props.theme.main.sizes.leftMenu.height} 0 0 0;
   overflow-y: auto;
   height: calc(100vh - (${(props) => props.theme.main.sizes.leftMenu.height} + 3rem));
   box-sizing: border-box;

diff --git a/packages/strapi-admin/admin/src/components/Notifications/Notification/Li.js b/packages/strapi-admin/admin/src/components/Notifications/Notification/Li.js
@@ -31,7 +31,7 @@ const GlobalNotification = createGlobalStyle`
     width: 220px;
     margin: 0;
     padding-right: 10px;
-    border-right: 1px solid rgba(255, 255, 255, 0.3);
+    border-right: 1px solid rgb(255 255 255 / 30%);
   }
 
   .notificationTitle {
@@ -118,7 +118,7 @@ const Li = styled.li`
   margin-bottom: 14px;
   background: ${(props) => props.theme.main.colors.white};
   border-radius: 2px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);
   color: #333740;
   transition: all 0.15s ease;
   overflow: hidden;
@@ -141,7 +141,7 @@ const Li = styled.li`
 
   &:hover {
     cursor: pointer;
-    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
   }
 `;