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

web/public/styles/admin/form-misc-elements.css

@@ -5,29 +5,37 @@
   align-items: center;
   font-size: 0.75rem;
 }
+
 .status-container.status-success {
   color: var(--ant-success);
 }
+
 .status-container.status-error {
   color: var(--ant-error);
 }
+
 .status-container.status-warning {
   color: var(--ant-warning);
 }
+
 .status-container.empty {
   display: none;
 }
+
 .status-container .status-icon {
   display: inline-block;
   margin-right: 0.5em;
 }
+
 .field-tip {
   font-size: 0.8em;
   color: var(--theme-color-palette-10);
 }
+
 .field-container {
   padding: 0.85em 0 0.5em;
 }
+
 .segment-slider-container {
   width: 100%;
   margin: auto;
@@ -35,11 +43,13 @@
   background-color: var(--color-owncast-palette-7);
   border-radius: var(--theme-rounded-corners);
 }
+
 .segment-slider-container .status-container {
   width: 100%;
   margin: 0.5em auto;
   text-align: center;
 }
+
 .segment-slider-container .selected-value-note {
   width: 100%;
   margin: 3em auto 0;
@@ -51,12 +61,14 @@
   border-radius: var(--theme-rounded-corners);
   background-color: var(--theme-color-palette-error);
 }
+
 .segment-tip {
   width: 10em;
   text-align: center;
   margin: auto;
   display: inline-block;
 }
+
 #selected-codec-note {
   margin-top: 8px;
   text-align: justify;