Add css linter step (#3832)

* Add css linter step

* Add test css file

* Set working directory

* Only run against changed files

* remove test css file

* only run workflow steps if any css files were changed

* commiting a file with issues

* fixing file with linter warnings

.github/workflows/css-lint.yaml

@@ -0,0 +1,46 @@
+name: CSS Lint and Formatting
+
+on:
+  push:
+    paths:
+      - 'web/**'
+  pull_request:
+    paths:
+      - 'web/**'
+
+jobs:
+  css-lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./web
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Get changed files
+        id: changed-files-yaml
+        uses: tj-actions/changed-files@v44
+        with:
+          path: 'web'
+          files_yaml: |
+            src:
+              - '**/*.{css,scss}'
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        if: steps.changed-files-yaml.outputs.src_any_changed == 'true'
+        run: npm install
+
+      - name: Run Prettier
+        if: steps.changed-files-yaml.outputs.src_any_changed == 'true'
+        run: npx prettier --check ${{ steps.changed-files-yaml.outputs.src_all_changed_files }}
+
+      - name: Run Stylelint
+        if: steps.changed-files-yaml.outputs.src_any_changed == 'true'
+        run: npx stylelint ${{ steps.changed-files-yaml.outputs.src_all_changed_files }}

.github/workflows/javascript-format-build.yml

@@ -47,7 +47,7 @@ jobs:
             web/next.config.js
           files_yaml: |
             src:
-              - '**/*.{js,ts,tsx,jsx,css,md}'
+              - '**/*.{js,ts,tsx,jsx,md}'
 
       - name: Cache node modules
         uses: actions/cache@v4