2638: Add stylelint for native

digitalfabrik · Mar 27, 2024 · 2cfb4e8 · 2cfb4e8
1 parent e55cc22
commit 2cfb4e8
Show file tree

Hide file tree

Showing 28 changed files with 265 additions and 308 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -506,6 +506,9 @@ jobs:
                 name: Lint
             - store_test_results:
                 path: reports/lint
+            - run:
+                command: yarn workspace native stylelint
+                name: Stylelint
             - run:
                 command: yarn workspace web stylelint
                 name: Stylelint

diff --git a/.circleci/src/jobs/check.yml b/.circleci/src/jobs/check.yml
@@ -23,6 +23,9 @@ steps:
       command: yarn lint:ci
   - store_test_results:
       path: reports/lint
+  - run:
+      name: Stylelint
+      command: yarn workspace native stylelint
   - run:
       name: Stylelint
       command: yarn workspace web stylelint

diff --git a/native/package.json b/native/package.json
@@ -34,7 +34,8 @@
     "test": "jest",
     "test:changed": "yarn run test -o",
     "test:e2e": "yarn workspace e2e test:native:browserstack",
-    "lint": "eslint --cache --cache-location ../.eslintcache .",
+    "lint": "yarn stylelint && eslint --cache --cache-location ../.eslintcache .",
+    "stylelint": "stylelint --config stylelint.config.js \"src/**/*.{ts,tsx,css}\"",
     "license-crawler": "npm-license-crawler -onlyDirectDependencies -json ./src/assets/licenses.json",
     "postinstall": "patch-package && yarn license-crawler",
     "ts:check": "tsc --build",

diff --git a/native/src/components/CityEntry.tsx b/native/src/components/CityEntry.tsx
@@ -15,8 +15,7 @@ const CityListItem = styled(Pressable)`
   flex: 1;
   padding: 7px;
   width: 100%;
-  flex-wrap: wrap;
-  flex-direction: column;
+  flex-flow: column wrap;
   align-items: flex-start;
 `
 const Label = styled(Highlighter)`
@@ -35,8 +34,7 @@ const Separator = styled(Text)`
 `
 const AliasesWrapper = styled.View`
   flex: 1;
-  flex-wrap: wrap;
-  flex-direction: row;
+  flex-flow: row wrap;
   align-items: flex-start;
   margin: 0 5px;
 `

diff --git a/native/src/components/CityGroup.tsx b/native/src/components/CityGroup.tsx
@@ -11,8 +11,7 @@ const GroupText = styled.Text`
 const BorderWrapper = styled.View`
   border-bottom-width: 1px;
   border-bottom-color: ${props => props.theme.colors.themeColor};
-  flex-wrap: wrap;
-  flex-direction: column;
+  flex-flow: column wrap;
   align-items: flex-start;
 `
 

diff --git a/native/src/components/CityNotCooperatingFooter.tsx b/native/src/components/CityNotCooperatingFooter.tsx
@@ -22,7 +22,7 @@ const Question = styled.Text`
 `
 
 const StyledButton = styled(TextButton)`
-  margin: 30px 0 40px 0;
+  margin: 30px 0 40px;
   padding: 8px 16px;
 `
 

diff --git a/native/src/components/HighlightBox.tsx b/native/src/components/HighlightBox.tsx
@@ -4,7 +4,7 @@ const HighlightBox = styled.View`
   background-color: ${props => props.theme.colors.backgroundAccentColor};
   elevation: 1;
   shadow-color: ${props => props.theme.colors.textColor};
-  shadow-offset: 0px 1px;
+  shadow-offset: 0 1px;
   shadow-opacity: 0.2;
   shadow-radius: 1px;
 `

diff --git a/native/src/components/MapsAttribution.tsx b/native/src/components/MapsAttribution.tsx
@@ -18,17 +18,15 @@ const AttributionContainer = styled(Pressable)<{ expanded: boolean }>`
   top: 0;
   right: 0;
   justify-content: flex-end;
-  color: rgba(0, 0, 0, 0.75);
+  color: rgb(0 0 0 / 75%);
   font-family: ${props => props.theme.fonts.native.contentFontRegular};
   ${props => props.expanded && `background-color: rgba(255, 255, 255, 0.75);`}
 `
 
 const OpenStreetMapsLink = styled(Link)`
   padding: 4px 0;
   color: ${props => props.theme.colors.tunewsThemeColor};
-  text-decoration-line: underline;
-  text-decoration-style: solid;
-  text-decoration-color: ${props => props.theme.colors.tunewsThemeColor};
+  text-decoration: underline solid ${props => props.theme.colors.tunewsThemeColor};
   align-self: center;
 `
 
@@ -38,7 +36,7 @@ const Label = styled.Text`
 
 const Copyright = styled.Text<{ expanded: boolean }>`
   padding-right: 4px;
-  color: rgba(0, 0, 0, 0.75);
+  color: rgb(0 0 0 / 75%);
   font-size: ${props => (props.expanded ? '14px' : '20px')};
   align-self: center;
 `

diff --git a/native/src/components/NavigationTile.tsx b/native/src/components/NavigationTile.tsx
@@ -21,7 +21,7 @@ const Circle = styled(View)`
   justify-content: center;
   elevation: 2;
   shadow-color: #000;
-  shadow-offset: 0px 1px;
+  shadow-offset: 0 1px;
   shadow-opacity: 0.2;
   shadow-radius: 1.41px;
 `

diff --git a/native/src/components/OrganizationContentInfo.tsx b/native/src/components/OrganizationContentInfo.tsx
@@ -26,8 +26,7 @@ const OrganizationContent = styled.Text`
 `
 
 const StyledText = styled.Text`
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 `
 
 const StyledLink = styled(Link)`

diff --git a/native/src/components/PoiFiltersModal.tsx b/native/src/components/PoiFiltersModal.tsx
@@ -56,8 +56,7 @@ const FlexEnd = styled.View`
 `
 
 const TileRow = styled(Row)`
-  justify-content: center;
-  align-content: space-between;
+  place-content: space-between center;
   flex-wrap: wrap;
   gap: 16px;
 `

diff --git a/native/src/components/ProgressSpinner.tsx b/native/src/components/ProgressSpinner.tsx
@@ -23,7 +23,7 @@ const Text = styled.Text`
 
 const LoadingImage = styled(buildConfigAssets().LoadingImage)`
   shadow-color: #000;
-  shadow-offset: 0px 2px;
+  shadow-offset: 0 2px;
   shadow-opacity: 0.25;
   shadow-radius: 3.84px;
   elevation: 5;

diff --git a/native/src/components/SelectorItem.tsx b/native/src/components/SelectorItem.tsx
@@ -20,7 +20,7 @@ const ItemWrapper = styled.View<{ selected: boolean }>`
 const Element = styled.Text<{ enabled: boolean }>`
   font-size: 20px;
   ${props => (props.enabled ? 'font-weight: 700' : '')};
-  color: ${props => (props.enabled ? props.theme.colors.textColor : props.theme.colors.textSecondaryColor)}};
+  color: ${props => (props.enabled ? props.theme.colors.textColor : props.theme.colors.textSecondaryColor)};
 `
 
 type SelectorItemProps = {

diff --git a/native/src/components/Tiles.tsx b/native/src/components/Tiles.tsx
@@ -10,8 +10,7 @@ import Tile from './Tile'
 
 const TilesRow = styled.View<{ language: string }>`
   display: flex;
-  flex-direction: ${props => contentDirection(props.language)};
-  flex-wrap: wrap;
+  flex-flow: ${props => contentDirection(props.language)} wrap;
   align-items: flex-start;
   justify-content: flex-start;
   padding: 10px 0;

diff --git a/native/src/components/base/ToggleButton.tsx b/native/src/components/base/ToggleButton.tsx
@@ -14,7 +14,7 @@ const StyledPressable = styled(Pressable)<{ active: boolean }>`
   border-radius: 18px;
   elevation: 5;
   shadow-color: ${props => props.theme.colors.textColor};
-  shadow-offset: 0px 1px;
+  shadow-offset: 0 1px;
   shadow-opacity: 0.2;
   shadow-radius: 1px;
   justify-content: space-around;

diff --git a/native/src/routes/TuNewsDetail.tsx b/native/src/routes/TuNewsDetail.tsx
@@ -17,7 +17,7 @@ import LoadingErrorHandler from './LoadingErrorHandler'
 const HeaderImageWrapper = styled.View`
   margin: 20px 16px 0;
   border-radius: 8px;
-  background-color: rgba(2, 121, 166, 0.4);
+  background-color: rgb(2 121 166 / 40%);
 `
 const StyledIcon = styled(Icon)`
   height: 34px;

diff --git a/native/stylelint.config.js b/native/stylelint.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  extends: ['stylelint-react-native', 'stylelint-config-recommended', 'stylelint-config-standard'],
+  customSyntax: 'postcss-styled-syntax',
+  rules: {
+    // Properties like shadow-radius are valid properties (while only supported on iOS)
+    // Also text-align-vertical is valid (but only on android)
+    'property-no-unknown': [true, { ignoreProperties: [/shadow-.*/, 'text-align-vertical'] }],
+
+    // inset shorthand doesn't work on react-native
+    'declaration-block-no-redundant-longhand-properties': [true, { ignoreShorthands: ['inset'] }],
+  },
+}
diff --git a/native/tsconfig.json b/native/tsconfig.json
@@ -27,7 +27,8 @@
     "babel.config.js",
     "react-native.config.js",
     "metro.config.ci.js",
-    "metro.config.js"
+    "metro.config.js",
+    "stylelint.config.js"
   ],
   "references": [
     {

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "lint": "eslint --cache --cache-location .eslintcache . && yarn workspace web stylelint",
+    "lint": "eslint --cache --cache-location .eslintcache . && yarn workspace web stylelint && yarn workspace native stylelint",
     "lint:ci": "yarn node --max-old-space-size=1535 $(yarn bin eslint) --format junit -o reports/lint/junit-lint.xml .",
     "test": "jest",
     "test:changed": "jest -o",
@@ -63,7 +63,14 @@
     "husky": "^8.0.3",
     "jest": "^29.6.4",
     "jest-junit": "^16.0.0",
+    "postcss": "^8.4.38",
+    "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.0.2",
+    "stylelint": "^16.3.1",
+    "stylelint-config-react-native-styled-components": "^0.7.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-react-native": "^2.7.0",
+    "stylelint-use-logical": "^2.1.2",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "5.2.2"

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,7 +16,7 @@
     "useDefineForClassFields": false,
     "outDir": "dist"
   },
-  "include": ["jest.config.ts", ".prettierrc.js", ".eslintrc.js", ".eslintrc_changed.js"],
+  "include": ["jest.config.ts", ".prettierrc", ".eslintrc.js"],
   "references": [
     { "path": "shared" },
     { "path": "build-configs" },

diff --git a/web/package.json b/web/package.json
@@ -88,16 +88,10 @@
     "img-loader": "^4.0.0",
     "jest-environment-jsdom": "29.6.4",
     "jest-fetch-mock": "^3.0.3",
-    "postcss": "^8.4.31",
-    "postcss-styled-syntax": "^0.5.0",
-    "postcss-syntax": "^0.36.2",
     "raf": "^3.4.1",
     "react-refresh": "^0.14.0",
     "react-refresh-typescript": "^2.0.9",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.3",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-use-logical": "^2.1.0",
     "ts-loader": "^9.4.4",
     "tsconfig-paths": "^4.2.0",
     "url-loader": "^4.1.1",

diff --git a/web/src/components/DropDownContainer.tsx b/web/src/components/DropDownContainer.tsx
@@ -24,13 +24,11 @@ const DropDownContainer = styled.div<{ active: boolean; height?: number }>`
   @media ${dimensions.smallViewport} {
     top: ${dimensions.headerHeightSmall}px;
     height: ${props => (props.height === undefined ? '100%;' : `${props.height}px;`)};
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
   }
 
   @media ${dimensions.minMaxWidth} {
-    padding-inline-end: calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
-    padding-inline-start: calc((100vw - ${dimensions.maxWidth}px) / 2);
+    padding-inline: calc((100vw - ${dimensions.maxWidth}px) / 2) calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
   }
 `
 

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -34,8 +34,7 @@ const HeaderContainer = styled.header`
   box-shadow: 0 2px 5px -3px rgb(0 0 0 / 20%);
 
   @media ${dimensions.minMaxWidth} {
-    padding-inline-end: calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
-    padding-inline-start: calc((100vw - ${dimensions.maxWidth}px) / 2);
+    padding-inline: calc((100vw - ${dimensions.maxWidth}px) / 2) calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
   }
 `
 

diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
@@ -65,8 +65,7 @@ const Body = styled.div<{ fullWidth: boolean; disableScrollingSafari: boolean }>
     !props.fullWidth &&
     css`
       @media screen and ${dimensions.minMaxWidth} {
-        padding-inline-end: calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
-        padding-inline-start: calc((100vw - ${dimensions.maxWidth}px) / 2);
+        padding-inline: calc((100vw - ${dimensions.maxWidth}px) / 2) calc((200% - 100vw - ${dimensions.maxWidth}px) / 2);
       }
     `};
 `

diff --git a/web/src/components/OrganizationContentInfo.tsx b/web/src/components/OrganizationContentInfo.tsx
@@ -20,8 +20,7 @@ const ThumbnailSizer = styled.div`
 
 const Box = styled(HighlightBox)<{ viewportSmall: boolean }>`
   display: flex;
-  justify-content: space-evenly;
-  align-content: space-evenly;
+  place-content: space-evenly space-evenly;
   font-family: ${props => props.theme.fonts.web.decorativeFont};
   font-size: 14px;
   flex-direction: ${props => (props.viewportSmall ? 'column' : 'row')};

diff --git a/web/src/components/PoiFilters.tsx b/web/src/components/PoiFilters.tsx
@@ -49,8 +49,7 @@ const SortingHint = styled.div`
 
 const TileRow = styled.div<{ itemCount: number }>`
   display: grid;
-  column-gap: ${tileColumnGap}px;
-  row-gap: 24px;
+  gap: 24px ${tileColumnGap}px;
   justify-content: center;
   grid-template-columns: repeat(${props => props.itemCount}, ${toggleButtonWidth}px);
 `

diff --git a/web/stylelint.config.js b/web/stylelint.config.js
@@ -1,20 +1,12 @@
 module.exports = {
   extends: ['stylelint-config-recommended', 'stylelint-config-standard'],
   plugins: ['stylelint-use-logical'],
+  customSyntax: 'postcss-styled-syntax',
   rules: {
     // Enforce better ltr / rtl handling
     'csstools/use-logical': [true, { except: [/bottom$/, /top$/, /width$/, /height$/] }],
+
+    // False positives for string interpolated values e.g. '@media screen and ${dimensions.smallViewport}'
+    'media-query-no-invalid': null,
   },
-  overrides: [
-    {
-      files: ['**/*.{ts,tsx}'],
-      customSyntax: 'postcss-styled-syntax',
-      rules: {
-        'function-no-unknown': null,
-        'at-rule-no-unknown': null,
-        'no-extra-semicolons': null,
-        'media-query-no-invalid': null,
-      },
-    },
-  ],
 }