chore: enable css linter on Lit components

.stylelintrc.json

@@ -1,6 +1,10 @@
 {
+  "plugins": [
+    "@stylistic/stylelint-plugin"
+  ],
   "extends": "stylelint-config-standard",
   "rules": {
+    "@stylistic/block-opening-brace-space-before": "always",
     "selector-class-pattern": null,
     "selector-id-pattern": null,
     "font-family-no-missing-generic-family-keyword": null,
@@ -9,5 +13,13 @@
   "ignoreFiles": [
     "**/dist/**",
     "**/coverage/**"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.js"
+      ],
+      "customSyntax": "postcss-lit"
+    }
   ]
 }

package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "lint": "eslint bin src test workspaces public",
-    "lint:css": "stylelint \"**/*.css\"",
+    "lint:css": "stylelint \"**/*.css\" \"public/**/*.js\"",
     "lint-fix": "npm run lint -- --fix",
     "prepublishOnly": "rimraf ./dist && npm run build && pkg-ok",
     "build": "npm run build:front && npm run build:workspaces",
@@ -78,13 +78,15 @@
     "@openally/config.eslint": "^2.4.2",
     "@openally/config.typescript": "1.3.0",
     "@openally/httpie": "1.1.2",
+    "@stylistic/stylelint-plugin": "5.0.1",
     "@types/node": "25.5.0",
     "c8": "11.0.0",
     "cross-env": "^10.1.0",
     "esbuild": "0.27.4",
     "eslint-plugin-jsdoc": "62.8.0",
     "http-server": "^14.1.1",
     "pkg-ok": "^3.0.0",
+    "postcss-lit": "1.4.1",
     "pretty-bytes": "^7.0.0",
     "rimraf": "6.1.3",
     "stylelint": "17.5.0",

public/components/icon/icon.js

@@ -185,13 +185,13 @@ export class Icon extends LitElement {
       width: 1.2em;
       height: 1em;
       margin-right: 0.2em;
-      margin-right: 0.2em;
       display: inline-block;
     }
+  
     svg {
       width: 100%;
       height: 100%;
-      fill: currentColor;
+      fill: currentcolor;
     }
   `;
 

public/components/items-list/items-list.js

@@ -9,13 +9,12 @@ import "../expandable/expandable.js";
 
 class ItemsList extends LitElement {
   static styles = css`
-.list-item{
+.list-item {
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: -5px;
-  flex-direction: column;
   padding: 0;
   list-style: none;
 }
@@ -39,7 +38,6 @@ justify-content: start;
   letter-spacing: 0.7px;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-grow: 1;
   color: #CFD8DC;
   margin-left: 5px;

public/components/locked-navigation/locked-navigation.js

@@ -16,7 +16,7 @@ export class LockedNavigation extends LitElement {
   gap: 10px;
 }
 
-.btn{
+.btn {
   width: 0;
   height: 0;
   background: none;
@@ -26,23 +26,23 @@ export class LockedNavigation extends LitElement {
   border-radius: 5px;
 }
 
-.next{
+.next {
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-left: 16px solid #af2222;
 }
 
-.prev{
+.prev {
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-right: 16px solid #af2222;
 }
 
-.next:hover{
+.next:hover {
   border-left-color: #cb3d3d;
 }
 
-.prev:hover{
+.prev:hover {
   border-right-color: #cb3d3d;
 }
 `;

public/components/package/header/header.css

@@ -72,7 +72,7 @@ div.package-header>.package-name>.info-menu>a:hover {
  * DESC
  */
 
-div.package-header>.package-description{
+div.package-header>.package-description {
   display: flex;
   justify-content: space-between;
 }

public/components/package/pannels/files/files.js

@@ -10,7 +10,7 @@ import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
 class Files extends LitElement {
   static styles = [scrollbarStyle, css`
-  :host{
+  :host {
     display: block;
     overflow: hidden auto;
     height: calc(100vh - 315px);

public/components/package/pannels/vulnerabilities/vulnerabilities.js

@@ -51,7 +51,7 @@ p {
   letter-spacing: 1px;
 }
 
-.vuln-strategy .strategy> nsecure-icon{
+.vuln-strategy .strategy> nsecure-icon {
   margin-right: 4px;
   transform: translateY(2px);
 }
@@ -129,7 +129,7 @@ p {
 }
 
 .packages-vuln .vuln .links> nsecure-icon {
-  whith: 16px;
+  width: 16px;
   flex: 0 0 auto;
   margin-right: 5px;
   color: #00b8ead1;

public/components/popup/popup.js

@@ -8,7 +8,7 @@ import { EVENTS } from "../../core/events";
 class Popup extends LitElement {
   static styles = css`
 
-:host{
+:host {
   z-index: 50;
 }
 
@@ -35,7 +35,7 @@ section#popup--background {
   transition: opacity 0.35s ease-in, visibility 0ms ease-in 0ms ;
 }
 
-.hidden{
+.hidden {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.35s ease-in, visibility 0ms ease-in 0.35s;

public/components/search-command/search-command-styles.js

@@ -8,7 +8,7 @@ export const searchCommandStyles = [
   scrollbarStyle,
   css`
 :host {
-  --sc-bg: #ffffff;
+  --sc-bg: #fff;
   --sc-bg-item: #f8fafc;
   --sc-bg-hover: #eff4ff;
   --sc-backdrop: rgb(0 0 0 / 40%);

public/components/views/home/maintainers/maintainers.js

@@ -20,7 +20,7 @@ export class Maintainers extends LitElement {
   margin-bottom: 20px;
 }
 
-.title{
+.title {
   height: 34px;
   display: flex;
   background: rgb(55 34 175);
@@ -44,10 +44,10 @@ export class Maintainers extends LitElement {
   width: fit-content;
   transform: scale(2);
   display: flex;
-  padding: 0px;
+  padding: 0;
   justify-content: center;
   align-items: center;
-  margin: 0px;
+  margin: 0;
   margin-right: 6px;
   margin-left: 15px;
   margin-top: 18px;
@@ -60,10 +60,10 @@ export class Maintainers extends LitElement {
 }
 
 .link nsecure-icon {
-  color: rgb(25, 118, 210);
+  color: rgb(25 118 210);
 }
 
-.count{
+.count {
 width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -86,7 +86,7 @@ width: 16px;
 }
 
 .name {
-  margin: 0px;
+  margin: 0;
 }
 
 .home--maintainers>.person {
@@ -110,7 +110,7 @@ width: 16px;
   background: var(--dark-theme-primary-color);
 }
 
-.home--maintainers> .highlighted{
+.home--maintainers> .highlighted {
   background: linear-gradient(to bottom, rgb(230 240 250) 0%, rgb(220 235 245) 100%);
 }
 
@@ -380,7 +380,7 @@ export class PopupMaintainer extends LitElement {
   background-color: var(--primary);
 }
 
-.maintainers--popup>.header>.icons>a > nsecure-icon,.maintainers--popup>.header>.icons>button > nsecure-icon{
+.maintainers--popup>.header>.icons>a > nsecure-icon,.maintainers--popup>.header>.icons>button > nsecure-icon {
   margin: 0;
   transform: translateX(1px);
 }
@@ -444,24 +444,24 @@ export class PopupMaintainer extends LitElement {
   color: white !important;
 }
 
-.maintainers--popup>ul li>p{
+.maintainers--popup>ul li>p {
   color: #234c99;
 }
 
-.dark>ul li>p{
+.dark>ul li>p {
   color: #9ca6b7 !important;
 }
 
-.maintainers--popup>ul li>span{
+.maintainers--popup>ul li>span {
   color: #2470b3;
   margin-left: 10px;
 }
 
-.dark>ul li>span{
+.dark>ul li>span {
   color: var(--dark-theme-secondary-color) !important;
 }
 
-.maintainers--popup>ul li> button{
+.maintainers--popup>ul li> button {
   border: none;
   margin-left: auto;
   margin-right: 13px;
@@ -476,7 +476,7 @@ export class PopupMaintainer extends LitElement {
   box-shadow: 2px 2px 6px 0 #00000012;
 }
 
-.maintainers--popup>ul li> button nsecure-icon{
+.maintainers--popup>ul li> button nsecure-icon {
   margin: 0;
   transform: translateX(4px);
 }

public/components/views/home/report/report.js

@@ -28,6 +28,7 @@ class PopupReport extends LitElement {
 .light >.title {
   background: #d3d3d387;
 }
+
 .dark >.title {
   background: var(--dark-theme-secondary-color);
 }