Add style lint to site (#263)

vivid-planet · Jul 10, 2024 · 826c269 · 826c269
1 parent 7039c85
commit 826c269
Show file tree

Hide file tree

Showing 9 changed files with 694 additions and 64 deletions.
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -8,6 +8,7 @@ module.exports = {
     "site/src/**/*.{ts,tsx,js,jsx,json,css,md}": () => "npm --prefix site run lint:eslint",
     "site/**/*.{ts,tsx}": () => "npm --prefix site run lint:tsc",
     "site/**/*.{js,json,md,yml,yaml}": () => "npm --prefix site run lint:prettier",
+    "site/src/**/*.{ts,tsx,css}": () => "npm --prefix site run lint:style",
     "create-app/src/**/*.{ts,tsx,js,jsx,json,css,scss,md}": () => "npm --prefix create-app run lint:eslint",
     "create-app/**/*.{ts,tsx}": () => "npm --prefix create-app run lint:tsc",
     "create-app/**/*.{js,json,md,yml,yaml}": () => "npm --prefix create-app run lint:prettier",

diff --git a/site/.stylelintrc.json b/site/.stylelintrc.json
@@ -0,0 +1,7 @@
+{
+    "extends": "stylelint-config-standard",
+    "customSyntax": "postcss-styled-syntax",
+    "rules": {
+        "declaration-empty-line-before": null
+    }
+}
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -16,11 +16,12 @@
         "gql:watch": "graphql-codegen --watch",
         "clear:preBuild": "rimraf preBuild/build",
         "prelint": "npm run intl:compile && run-p gql:types generate-block-types",
-        "lint": "run-p lint:eslint lint:tsc",
+        "lint": "run-p lint:eslint lint:tsc lint:style",
         "lint:eslint": "eslint --max-warnings 0 --config ./.eslintrc.cli.js --ext .ts,.tsx,.js,.jsx,.json,.md src/ package.json",
         "lint:prettier": "npx prettier --check './**/*.{js,json,md,yml,yaml}'",
         "lint:tsc": "tsc --project .",
         "lint:tscPreBuild": "tsc --project tsconfig.preBuild.json",
+        "lint:style": "npx stylelint '**/*.{ts,tsx,css}'",
         "generate-block-types": "comet generate-block-types",
         "generate-block-types:watch": "chokidar -s \"**/block-meta.json\" -c \"npm run generate-block-types\"",
         "intl:extract": "formatjs extract \"src/**/*.ts*\" --ignore **/*.d.ts --out-file lang-extracted/en.json --format simple",
@@ -66,8 +67,11 @@
         "dotenv-cli": "^7.0.0",
         "eslint": "^8.0.0",
         "npm-run-all": "^4.1.5",
+        "postcss-styled-syntax": "^0.6.4",
         "prettier": "^2.0.0",
         "rimraf": "^3.0.0",
+        "stylelint": "^16.6.1",
+        "stylelint-config-standard": "^36.0.0",
         "tsconfig-paths": "^3.0.0",
         "typescript": "~5.1.0"
     }

diff --git a/site/src/common/blocks/CallToActionListBlock.tsx b/site/src/common/blocks/CallToActionListBlock.tsx
@@ -26,8 +26,7 @@ export const PageContentCallToActionListBlock = (props: CallToActionListBlockPro
 
 const Root = styled.div`
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
+    flex-flow: row wrap;
     gap: ${({ theme }) => theme.spacing.S300};
 
     ${({ theme }) => theme.breakpoints.sm.mediaQuery} {

diff --git a/site/src/common/blocks/RichTextBlock.tsx b/site/src/common/blocks/RichTextBlock.tsx
@@ -162,8 +162,8 @@ const Root = styled.div<{ $disableLastBottomSpacing?: boolean }>`
 const Text = styled(Typography)`
     white-space: pre-line;
 
-    // Show empty lines as spacing between paragraphs
-    &:empty:not(:first-child:last-child):before {
+    /* Show empty lines as spacing between paragraphs */
+    &:empty:not(:first-child:last-child)::before {
         white-space: pre;
         content: " ";
     }

diff --git a/site/src/documents/pages/blocks/ColumnsBlock.tsx b/site/src/documents/pages/blocks/ColumnsBlock.tsx
@@ -65,8 +65,7 @@ const Column = styled.div<{ $layout: string }>`
             $layout === "4-16-4" &&
             css`
                 grid-column: 5 / -5;
-            }
-        `};
+            `};
         ${({ $layout }) =>
             $layout === "9-9" &&
             css`
@@ -75,8 +74,7 @@ const Column = styled.div<{ $layout: string }>`
                 &:nth-child(even) {
                     grid-column: 14 / 23;
                 }
-            }
-        `};
+            `};
         ${({ $layout }) =>
             $layout === "12-6" &&
             css`
@@ -85,8 +83,7 @@ const Column = styled.div<{ $layout: string }>`
                 &:nth-child(even) {
                     grid-column: 17 / 23;
                 }
-            }
-        `};
+            `};
         ${({ $layout }) =>
             $layout === "6-12" &&
             css`
@@ -95,7 +92,6 @@ const Column = styled.div<{ $layout: string }>`
                 &:nth-child(even) {
                     grid-column: 11 / 23;
                 }
-            }
-        `};
+            `};
     }
 `;
diff --git a/site/src/layout/GlobalStyle.ts b/site/src/layout/GlobalStyle.ts
@@ -9,11 +9,12 @@ export const GlobalStyle = createGlobalStyle`
     
     html {
         /* Prevent font size adjustments after orientation changes in mobile devices */
-        -webkit-text-size-adjust: 100%;
+        text-size-adjust: 100%;
     }
 
     body {
         margin: 0;
+
         /* Improve text rendering with font-smoothing */
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
@@ -68,6 +69,7 @@ export const GlobalStyle = createGlobalStyle`
     }
 
     /* Create a root stacking context: https://www.joshwcomeau.com/css/custom-css-reset/#eight-root-stacking-context-9 */
+    /* stylelint-disable selector-id-pattern */
     #root,
     #__next {
         isolation: isolate;

diff --git a/site/src/layout/header/Header.tsx b/site/src/layout/header/Header.tsx
@@ -68,7 +68,7 @@ const SubLevelNavigation = styled.ol`
     list-style-type: none;
     padding: 5px;
     background-color: white;
-    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
 `;
 
 const TopLevelLinkContainer = styled.li`