Merge pull request #2517 from digitalfabrik/2516-merge-stylelint-configs

2516: Merge stylelint configs and lint styled-components
digitalfabrik · Oct 13, 2023 · 7d51d84 · 7d51d84
2 parents 70a846b + b60bc98
commit 7d51d84
Show file tree

Hide file tree

Showing 27 changed files with 114 additions and 71 deletions.
diff --git a/web/package.json b/web/package.json
@@ -24,13 +24,12 @@
     "test:coverage": "yarn run test --coverage",
     "test:ci": "yarn run test:coverage --ci",
     "test:watch": "yarn run test --watchAll",
-    "lint": " yarn run stylelint && yarn run stylelint:css && yarn run eslint",
+    "lint": " yarn run stylelint && yarn run eslint",
     "lint:ci": "yarn run eslint --quiet --format junit -o reports/lint/junit-lint.xml && yarn run stylelint",
     "lint:changed": "eslint . -c ../.eslintrc_changed.js",
     "eslint:fix": "eslint . --fix",
     "eslint": "eslint .",
-    "stylelint": "stylelint --config stylelint.config.js \"src/**/*.{ts,tsx}\"",
-    "stylelint:css": "stylelint --config stylelint.config_css.js \"src/**/*.css\"",
+    "stylelint": "stylelint --config stylelint.config.js \"src/**/*.{ts,tsx,css}\"",
     "ts:check": "tsc --build",
     "prettier:check": "yarn prettier --ignore-path  ../.prettierignore --check .",
     "prettier:write": "yarn prettier --ignore-path  ../.prettierignore --write .",
@@ -99,7 +98,7 @@
     "jest-fetch-mock": "^3.0.3",
     "jest-junit": "^16.0.0",
     "postcss": "^8.4.31",
-    "postcss-jsx": "^0.36.4",
+    "postcss-styled-syntax": "^0.5.0",
     "postcss-syntax": "^0.36.2",
     "raf": "^3.4.1",
     "react-refresh": "^0.14.0",

diff --git a/web/src/components/CityContentFooter.tsx b/web/src/components/CityContentFooter.tsx
@@ -12,13 +12,15 @@ const SidebarFooterContainer = styled.div`
   width: 100%;
   margin-top: -10px; /* to counteract the padding-top of the normal footer */
   padding: 0 27px;
+
   > * {
     color: ${props => props.theme.colors.textColor};
     padding: 16px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 1px solid ${props => props.theme.colors.footerLineColor};
+
     &:last-child {
       border-bottom: none;
     }

diff --git a/web/src/components/Feedback.tsx b/web/src/components/Feedback.tsx
@@ -23,6 +23,7 @@ export const Container = styled.div`
   font-size: ${props => props.theme.fonts.contentFontSize};
   overflow: auto;
   align-self: center;
+
   @media ${dimensions.mediumLargeViewport} {
     width: 400px;
   }

diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
@@ -15,14 +15,14 @@ const FooterContainer = styled.footer<{ overlay: boolean }>`
   padding: ${props => (props.overlay ? '0 10px' : '15px 5px')};
   margin-top: auto;
   background-color: ${props => (props.overlay ? `rgba(255, 255, 255, 0.5)` : props.theme.colors.backgroundAccentColor)};
-  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 3px 3px rgb(0 0 0 / 10%);
 
   ${props => (props.overlay ? 'color: rgba(0, 0, 0, 0.75);' : '')}
   & > * {
     margin: ${props => (props.overlay ? 0 : '5px')};
   }
 
-  & > *:after {
+  & > *::after {
     padding-right: 10px;
     content: '';
   }

diff --git a/web/src/components/GoBack.tsx b/web/src/components/GoBack.tsx
@@ -14,11 +14,13 @@ const DetailsHeader = styled.div<{ viewportSmall: boolean }>`
   ${props =>
     props.viewportSmall &&
     css`
-      animation: fadeIn 3s;
-      @keyframes fadeIn {
+      animation: fade-in 3s;
+
+      @keyframes fade-in {
         0% {
           opacity: 0;
         }
+
         100% {
           opacity: 1;
         }

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -34,7 +34,7 @@ const HeaderContainer = styled.header`
   user-select: none;
   flex-direction: column;
   overflow: visible;
-  box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px -3px rgb(0 0 0 / 20%);
 
   @media ${dimensions.minMaxWidth} {
     padding-right: calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
@@ -61,9 +61,10 @@ const Row = styled.div`
     min-height: ${dimensions.headerHeightSmall}px;
     overflow-x: auto;
     padding: 8px 0;
-    box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 5px -3px rgb(0 0 0 / 20%);
+
     :first-child {
-      box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 5px -3px rgb(0 0 0 / 12%);
       padding: 0 4px;
     }
   }

diff --git a/web/src/components/HeaderActionItemDropDown.tsx b/web/src/components/HeaderActionItemDropDown.tsx
@@ -25,11 +25,10 @@ export const DropDownContainer = styled.div<{ active: boolean; height?: number }
   box-sizing: border-box;
   opacity: ${props => (props.active ? '1' : '0')};
   z-index: 1; /* this is only necessary for IE11 to have the DropDown above NavigationItems */
-
   transform: scale(${props => (props.active ? '1' : '0.9')});
   transform-origin: center top;
   justify-content: center;
-  box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px -3px rgb(0 0 0 / 20%);
   transition:
     transform 0.2s,
     opacity 0.2s,
@@ -43,6 +42,7 @@ export const DropDownContainer = styled.div<{ active: boolean; height?: number }
       props.height
         ? `${props.height}px;`
         : `100%;`}; /* within the KebabActionItemDropdown the headerHeight has to be considered */
+
     overflow-x: hidden;
     overflow-y: auto;
   }

diff --git a/web/src/components/HeaderNavigationItem.tsx b/web/src/components/HeaderNavigationItem.tsx
@@ -43,7 +43,7 @@ const StyledLink = styled(Link)<{ $active: boolean }>`
   }
 
   &:hover > div:first-child {
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 0 0 rgb(0 0 0 / 30%);
     border-color: ${props => props.theme.colors.themeColor};
   }
 
@@ -53,7 +53,7 @@ const StyledLink = styled(Link)<{ $active: boolean }>`
       color: ${props => props.theme.colors.textColor};
 
       & > div:first-child {
-        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 30%);
         border-color: ${props.theme.colors.themeColor};
       }
     `}
@@ -77,7 +77,7 @@ const Circle = styled.div`
     border-radius: 100%;
     height: ${ICON_SIZE_LARGE}px;
     width: ${ICON_SIZE_LARGE}px;
-    box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.7);
+    box-shadow: 0 2px 5px -3px rgb(0 0 0 / 70%);
     transition:
       box-shadow 0.2s,
       border 0.2s;

diff --git a/web/src/components/HighlightBox.tsx b/web/src/components/HighlightBox.tsx
@@ -5,8 +5,8 @@ const HighlightBox = styled.div`
   border-radius: 4px;
   padding: 20px;
   box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.1),
-    0 1px 2px rgba(0, 0, 0, 0.15);
+    0 1px 3px rgb(0 0 0 / 10%),
+    0 1px 2px rgb(0 0 0 / 15%);
 `
 
 export default HighlightBox
diff --git a/web/src/components/KebabMenu.tsx b/web/src/components/KebabMenu.tsx
@@ -32,7 +32,8 @@ const List = styled.div<{ direction: UiDirectionType; show: boolean }>`
   width: 80vw;
   height: 100vh;
   background-color: ${props => props.theme.colors.backgroundColor};
-  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.13);
+  box-shadow: -3px 3px 3px 0 rgb(0 0 0 / 13%);
+
   /* to stop flickering of text in safari */
   -webkit-font-smoothing: antialiased;
   transform-origin: 0 0;
@@ -51,7 +52,7 @@ const Overlay = styled.div<{ show: boolean }>`
   height: 100vh;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
   z-index: 30;
   display: ${props => (props.show ? `block` : `none`)};
 `
@@ -60,7 +61,7 @@ const Heading = styled.div<{ direction: string }>`
   display: flex;
   justify-content: ${props => (props.direction === 'rtl' ? `flex-start` : `flex-end`)};
   background-color: ${props => props.theme.colors.backgroundAccentColor};
-  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.13);
+  box-shadow: -3px 3px 3px 0 rgb(0 0 0 / 13%);
   height: ${dimensions.headerHeightSmall}px;
   padding: 0 8px;
 `

diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
@@ -21,6 +21,7 @@ export const RichLayout = styled.div`
     &:focus-visible {
       outline: 2px solid ${props => props.theme.colors.textSecondaryColor};
     }
+
     cursor: pointer;
   }
 
@@ -50,7 +51,9 @@ const Body = styled.div<{ fullWidth: boolean; disableScrollingSafari: boolean }>
   flex-grow: 1;
   background-color: ${props => props.theme.colors.backgroundColor};
   word-wrap: break-word;
+
   /* Fix jumping iOS Safari Toolbar by prevent scrolling on body */
+
   ${props =>
     props.disableScrollingSafari &&
     css`

diff --git a/web/src/components/MapAttribution.tsx b/web/src/components/MapAttribution.tsx
@@ -10,9 +10,9 @@ const Attribution = styled.div`
   display: flex;
   direction: ltr;
   padding: 0 4px;
-  background-color: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.75);
+  background-color: rgb(255 255 255 / 50%);
+  box-shadow: 0 2px 3px 3px rgb(0 0 0 / 10%);
+  color: rgb(0 0 0 / 75%);
 `
 const AttributionContainer = styled.div<{ expanded: boolean; direction: UiDirectionType }>`
   display: flex;
@@ -33,7 +33,7 @@ const OpenStreetMapsLink = styled(CleanLink)`
 
 const Label = styled.span`
   padding: 0 4px;
-  color: rgba(0, 0, 0, 0.75);
+  color: rgb(0 0 0 / 75%);
 `
 
 type MapAttributionProps = {

diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
@@ -15,20 +15,14 @@ import Portal from './Portal'
 
 const Overlay = styled.div`
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background-color: ${props => props.theme.colors.textSecondaryColor};
   opacity: 0.9;
 `
 
 const ModalContainer = styled.div`
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: 100;
   display: flex;
   align-items: center;

diff --git a/web/src/components/NewsTab.tsx b/web/src/components/NewsTab.tsx
@@ -25,6 +25,7 @@ const StyledTab = styled(Link)<{ $active: boolean }>`
   font-size: ${props => props.theme.fonts.subTitleFontSize};
   font-weight: 700;
   text-decoration: none;
+
   &:not(:last-child) {
     margin-right: 30px;
   }

diff --git a/web/src/components/PoisDesktop.tsx b/web/src/components/PoisDesktop.tsx
@@ -43,7 +43,7 @@ const ToolbarContainer = styled.div`
   display: flex;
   justify-content: center;
   background-color: ${props => props.theme.colors.backgroundAccentColor};
-  box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 0 4px 0 rgb(0 0 0 / 20%);
 `
 
 const ListHeader = styled.div`

diff --git a/web/src/components/PoisMobile.tsx b/web/src/components/PoisMobile.tsx
@@ -48,7 +48,7 @@ const BackNavigation = styled.div<{ direction: string }>`
   width: 28px;
   border: 1px solid ${props => props.theme.colors.textDisabledColor};
   border-radius: 50px;
-  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 20%);
   cursor: pointer;
   justify-content: center;
   align-items: center;
@@ -61,6 +61,7 @@ const StyledIcon = styled(Icon)`
 
 const GeocontrolContainer = styled.div<{ height: number; direction: string }>`
   --max-icon-height: calc(${props => getSnapPoints(props.height)[1]}px + ${geolocatorTopOffset}px);
+
   position: absolute;
   ${props =>
     props.direction === 'ltr'

diff --git a/web/src/components/RemoteContent.tsx b/web/src/components/RemoteContent.tsx
@@ -39,7 +39,7 @@ const SandBox = styled.div<{ centered: boolean; smallText: boolean }>`
     text-align: center;
     margin: 15px auto;
 
-    @media only screen and (max-width: 640px) {
+    @media only screen and (width <= 640px) {
       width: 100% !important;
     }
   }

diff --git a/web/src/components/SharingPopup.tsx b/web/src/components/SharingPopup.tsx
@@ -55,14 +55,14 @@ const TooltipContainer = styled.div<{
       animation: tooltips 300ms ease-out forwards;
     `};
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     position: absolute;
     content: '';
     display: block;
   }
 
-  &:before {
+  &::before {
     z-index: 2000;
     border-bottom: 10px solid ${props => props.theme.colors.backgroundColor};
     border-left: 10px solid transparent;
@@ -103,7 +103,7 @@ const TooltipContainer = styled.div<{
       `};
   }
 
-  &:after {
+  &::after {
     z-index: 1000;
     border-bottom: 11px solid ${props => props.theme.colors.textDecorationColor};
     border-left: 11px solid transparent;

diff --git a/web/src/components/Toolbar.tsx b/web/src/components/Toolbar.tsx
@@ -21,7 +21,7 @@ const ToolbarContainer = styled.div<{ direction: 'row' | 'column'; hasPadding: b
   }
 
   & p {
-    margin: 0.5rem 0 0 0;
+    margin: 0.5rem 0 0;
   }
 
   @media ${dimensions.smallViewport} {

diff --git a/web/src/components/Tooltip.tsx b/web/src/components/Tooltip.tsx
@@ -52,6 +52,7 @@ const pseudosMixin = (flow: FlowType, color: string) => css`
       left: calc(99% + 5px);
     `}
   }
+
   ::before,
   ::after {
     ${(flow === 'left' || flow === 'right') &&
@@ -144,10 +145,12 @@ const TooltipContainer = styled.div<{
   @media ${dimensions.minMaxWidth} {
     ${props => pseudosMixin(props.flow, props.theme.colors.textSecondaryColor)}
   }
+
   /* below 768px */
   @media screen and ${dimensions.smallViewport} {
     ${props => pseudosMixin(props.smallViewportFlow, props.theme.colors.textSecondaryColor)}
   }
+
   /* inbetween */
   @media screen and ${dimensions.mediumViewport} {
     ${props => pseudosMixin(props.mediumViewportFlow, props.theme.colors.textSecondaryColor)}

diff --git a/web/src/components/base/TextButton.tsx b/web/src/components/base/TextButton.tsx
@@ -13,8 +13,8 @@ const StyledButton = styled.button<{ disabled: boolean; fullWidth?: boolean }>`
   cursor: ${props => (props.disabled ? 'default' : 'pointer')};
   pointer-events: ${props => (props.disabled ? 'none' : 'default')};
   box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.1),
-    0 1px 2px rgba(0, 0, 0, 0.15);
+    0 1px 3px rgb(0 0 0 / 10%),
+    0 1px 2px rgb(0 0 0 / 15%);
 `
 
 type TextButtonProps = {

diff --git a/web/src/components/base/ToggleButton.tsx b/web/src/components/base/ToggleButton.tsx
@@ -7,8 +7,8 @@ export const toggleButtonWidth = 100
 const StyledButton = styled.button<{ $active: boolean | null }>`
   border: none;
   box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.25),
-    0 1px 4px 1px rgba(0, 0, 0, 0.15);
+    0 1px 2px rgb(0 0 0 / 25%),
+    0 1px 4px 1px rgb(0 0 0 / 15%);
   border-radius: 18px;
   width: ${toggleButtonWidth}px;
   height: 100px;

diff --git a/web/src/routes/CityNotCooperatingPage.tsx b/web/src/routes/CityNotCooperatingPage.tsx
@@ -60,7 +60,7 @@ const StepExplanation = styled(Text)`
 const StyledButton = styled(TextButton)`
   align-self: center;
   z-index: 10;
-  margin: 40px 0 0 0;
+  margin: 40px 0 0;
   font-weight: normal;
   box-shadow: none;
 `

diff --git a/web/src/routes/SearchPage.tsx b/web/src/routes/SearchPage.tsx
@@ -25,6 +25,7 @@ import { cmsApiBaseUrl } from '../constants/urls'
 
 const List = styled.ul`
   list-style-type: none;
+
   & a {
     ${helpers.removeLinkHighlighting}
   }