Run stylelint on .vue files (#24865)

- Run stylelint on .vue files
- Fix discovered issues
- Suppress warning spam from `declaration-strict-value` rule

Co-authored-by: Giteabot <[email protected]>

Author: silverwind

.stylelintrc.yaml

@@ -11,6 +11,8 @@ overrides:
   - files: ["**/chroma/*", "**/codemirror/*"]
     rules:
       block-no-empty: null
+  - files: ["**/*.vue"]
+    customSyntax: postcss-html
 
 rules:
   alpha-value-notation: null
@@ -96,7 +98,7 @@ rules:
   property-no-vendor-prefix: null
   rule-empty-line-before: null
   rule-selector-property-disallowed-list: null
-  scale-unlimited/declaration-strict-value: [[color, background-color, border-color, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
+  scale-unlimited/declaration-strict-value: [[color, background-color, border-color, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false, disableFix: true}]
   selector-attribute-name-disallowed-list: null
   selector-attribute-operator-allowed-list: null
   selector-attribute-operator-disallowed-list: null

Makefile

@@ -372,11 +372,11 @@ lint-js-fix: node_modules
 
 .PHONY: lint-css
 lint-css: node_modules
-	npx stylelint --color --max-warnings=0 web_src/css
+	npx stylelint --color --max-warnings=0 web_src/css web_src/js/components/*.vue
 
 .PHONY: lint-css-fix
 lint-css-fix: node_modules
-	npx stylelint --color --max-warnings=0 web_src/css --fix
+	npx stylelint --color --max-warnings=0 web_src/css web_src/js/components/*.vue --fix
 
 .PHONY: lint-swagger
 lint-swagger: node_modules

package-lock.json

@@ -74,6 +74,7 @@
     "eslint-plugin-wc": "1.5.0",
     "jsdom": "22.0.0",
     "markdownlint-cli": "0.34.0",
+    "postcss-html": "1.5.0",
     "stylelint": "15.6.2",
     "stylelint-declaration-strict-value": "1.9.2",
     "svgo": "3.0.2",

package.json

@@ -429,7 +429,7 @@ export function ansiLogToHTML(line) {
 /* action view header */
 
 .action-view-header {
-  margin: 20px 0px;
+  margin: 20px 0;
 }
 
 .action-info-summary {
@@ -452,7 +452,7 @@ export function ansiLogToHTML(line) {
 .action-commit-summary {
   display: flex;
   gap: 5px;
-  margin: 10px 0px 10px 25px;
+  margin: 10px 0 10px 25px;
 }
 
 /* ================ */
@@ -472,7 +472,7 @@ export function ansiLogToHTML(line) {
 .job-artifacts-title {
   font-size: 18px;
   margin-top: 16px;
-  padding: 16px 10px 0px 20px;
+  padding: 16px 10px 0 20px;
   border-top: 1px solid var(--color-secondary);
 }
 
@@ -639,8 +639,8 @@ export function ansiLogToHTML(line) {
 }
 
 .job-step-section .job-step-logs {
-  font-family: monospace, monospace;
-  margin: 8px 0px;
+  font-family: monospace;
+  margin: 8px 0;
   font-size: 12px;
 }
 
@@ -673,7 +673,7 @@ export function ansiLogToHTML(line) {
   margin-left: 10px;
 }
 
-/* TODO: group support */
+/* TODO: group support
 
 .job-log-group {
 
@@ -683,5 +683,5 @@ export function ansiLogToHTML(line) {
 }
 .job-log-list {
 
-}
+} */
 </style>