lint: Add support for CSS stylesheets in linting workflow. (#66)

.github/workflows/lint.yaml

@@ -29,4 +29,4 @@ jobs:
         with:
           node-version: 22
       - run: "npm --prefix new-log-viewer/ clean-install"
-      - run: "npm --prefix new-log-viewer/ run lint:check"
+      - run: "npm --prefix new-log-viewer/ run lint:ci"

new-log-viewer/.prettierrc.yaml

@@ -0,0 +1,6 @@
+tabWidth: 4
+useTabs: false
+singleQuote: false
+quoteProps: consistent
+printWidth: 100
+endOfLine: lf

new-log-viewer/.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-clean-order/error",
+    "stylelint-prettier/recommended"
+  ]
+}

new-log-viewer/package.json

@@ -5,10 +5,14 @@
   "main": "src/index.tsx",
   "scripts": {
     "build": "webpack --config webpack.prod.js",
+    "start": "webpack serve --open --config webpack.dev.js",
+
     "lint": "npm run lint:check",
-    "lint:check": "eslint src webpack.*.js --max-warnings 0",
-    "lint:fix": "npm run lint:check -- --fix",
-    "start": "webpack serve --open --config webpack.dev.js"
+    "lint:check": "npm-run-all --sequential --continue-on-error lint:check:*",
+    "lint:check:css": "stylelint src/**/*.css",
+    "lint:check:js": "eslint src webpack.*.js --max-warnings 0",
+    "lint:ci": "npm-run-all --sequential --continue-on-error lint:check:js \"lint:check:css -- --formatter github\"",
+    "lint:fix": "npm-run-all --parallel --continue-on-error \"lint:check:* -- --fix\""
   },
   "repository": {
     "type": "git",
@@ -49,8 +53,14 @@
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.9.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.3",
     "react-refresh": "^0.14.2",
     "style-loader": "^4.0.0",
+    "stylelint": "^16.9.0",
+    "stylelint-config-clean-order": "^6.1.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-prettier": "^5.0.2",
     "typescript": "^5.6.2",
     "webpack": "^5.92.0",
     "webpack-cli": "^5.1.4",

new-log-viewer/src/components/DropFileContainer/index.css

@@ -9,21 +9,27 @@
 
 .hover-mask {
     position: absolute;
+    z-index: var(--ylv-drop-file-container-hover-mask-z-index);
     top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(2, 88, 168, 0.2);
+
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: var(--ylv-drop-file-container-hover-mask-z-index);
+
+    width: 100%;
+    height: 100%;
+
+    background-color: rgb(2 88 168 / 20%);
 }
 
 .hover-message {
+    z-index: var(--ylv-drop-file-container-hover-message-z-index);
+
     padding: 8px;
-    color: #616161;
-    font-size: 0.875rem;
+
     font-family: var(--ylv-ui-font-family), sans-serif;
+    font-size: 0.875rem;
+    color: #616161;
+
     background-color: #f3f3f3;
-    z-index: var(--ylv-drop-file-container-hover-message-z-index);
 }

new-log-viewer/src/components/MenuBar/PageNumInput.css

@@ -1,7 +1,7 @@
 .page-num-input input::-webkit-outer-spin-button,
 .page-num-input input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
     margin: 0;
+    appearance: none;
 }
 
 .page-num-input-num-pages-text {

new-log-viewer/src/components/MenuBar/index.css

@@ -1,6 +1,6 @@
 .menu-bar {
     display: flex;
     flex-direction: row;
-    height: var(--ylv-status-bar-height);
     align-items: center;
+    height: var(--ylv-status-bar-height);
 }

new-log-viewer/src/components/StatusBar/index.css

@@ -1,12 +1,14 @@
 .status-bar {
-    align-items: center;
+    position: absolute;
     bottom: 0;
+
     display: flex;
-    position: absolute;
+    align-items: center;
+
     width: 100%;
 }
 
 .status-message {
-    padding-left: 8px;
     flex-grow: 1;
+    padding-left: 8px;
 }

new-log-viewer/src/components/modals/SettingsModal/index.css

@@ -1,8 +1,8 @@
 .settings-dialog-title {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
     flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .settings-dialog-title-text {

new-log-viewer/src/index.css

@@ -1,7 +1,9 @@
-html, body, #root {
-    margin: 0;
-    height: 100%;
+html,
+body,
+#root {
     width: 100%;
+    height: 100%;
+    margin: 0;
 }
 
 html {
@@ -10,8 +12,8 @@ html {
 
 :root {
     /* font-family globals */
-    --ylv-ui-font-family: -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans",
-    Roboto;
+    --ylv-ui-font-family: -apple-system, "BlinkMacSystemFont", system-ui, "Ubuntu", "Droid Sans",
+        "Roboto";
 
     /* size globals */
     --ylv-status-bar-height: 32px;