fix(css): resolve invalid values and reformat with stylelint (#516)

Author: PierreDemailly

.stylelintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null
+  },
+  "ignoreFiles": [
+    "**/dist/**",
+    "**/coverage/**"
+  ]
+}

package.json

@@ -13,10 +13,11 @@
   },
   "scripts": {
     "lint": "eslint bin src test workspaces public",
+    "lint:css": "stylelint \"**/*.css\"",
     "lint-fix": "npm run lint -- --fix",
     "prepublishOnly": "rimraf ./dist && npm run build && pkg-ok",
     "build": "node ./esbuild.config.js",
-    "test": "npm run test-only && npm run lint",
+    "test": "npm run test-only && npm run lint && npm run lint:css",
     "test-only": "glob -c \"node --no-warnings --test-concurrency 1 --test\" \"test/**/*.test.js\"",
     "coverage": "c8 --reporter=lcov npm run test"
   },
@@ -75,7 +76,9 @@
     "pkg-ok": "^3.0.0",
     "pretty-bytes": "^7.0.0",
     "rimraf": "^6.0.1",
-    "server-destroy": "^1.0.1"
+    "server-destroy": "^1.0.1",
+    "stylelint": "^16.20.0",
+    "stylelint-config-standard": "^38.0.0"
   },
   "dependencies": {
     "@nodesecure/documentation-ui": "^1.3.0",

public/components/bundlephobia/bundlephobia.css

@@ -14,27 +14,28 @@ section#package-info div.bundlephobia>div {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  box-shadow: 1px 1px 10px rgba(41, 103, 122, 0.3) inset;
+  box-shadow: 1px 1px 10px rgb(41 103 122 / 30%) inset;
 }
 
 section#package-info div.bundlephobia>div+div {
   margin-left: 10px;
 }
 
 section#package-info div.bundlephobia>div>b {
-  font-weight: 800px;
+  font-weight: 800;
   color: var(--secondary);
   margin-bottom: 5px;
   font-size: 18px;
 }
+
 section#package-info div.bundlephobia>div>b i {
-  font-family: 'mononoki';
+  font-family: mononoki;
   font-size: 14px;
   color: #fce12b;
 }
 
 section#package-info div.bundlephobia>div>span {
   font-size: 12px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   text-transform: uppercase;
 }

public/components/expandable/expandable.css

@@ -4,10 +4,10 @@ span.expandable {
   justify-content: center !important;
   height: 35px;
   font-size: 13px;
-  font-family: "mononoki";
+  font-family: mononoki;
   background: none;
   color: #00B0FF;
-  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
   transition: all 0.2s linear;
   margin-top: 5px;
 }

public/components/file-box/file-box.css

@@ -4,12 +4,10 @@
   padding: 10px;
   border-top: 2px solid #351ea7;
   border-left: 2px solid #351ea7;
-  background: -moz-linear-gradient(top, rgba(12, 15, 94, 0.27) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(top, rgba(12, 15, 94, 0.27) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to bottom, rgba(12, 15, 94, 0.27) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(to bottom, rgb(12 15 94 / 27%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#450c0f5e', endColorstr='#00000000', GradientType=0);
   border-radius: 4px;
-  box-shadow: 1px 1px 10px rgba(18, 101, 109, 0.1);
+  box-shadow: 1px 1px 10px rgb(18 101 109 / 10%);
 }
 
 .box-file-info+.box-file-info {
@@ -32,24 +30,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'mononoki';
+  font-family: mononoki;
   font-weight: bold;
   text-shadow: 2px 2px 10px #000;
 }
+
 .box-file-info>.box-header>span.Critical {
   background: #d32f2f;
 }
+
 .box-file-info>.box-header>span.Warning {
   background: #f08e26;
 }
+
 .box-file-info>.box-header>span.Information {
   background: #0288d1ab;
 }
 
 .box-file-info>.box-header>.box-title {
   font-size: 18px;
   font-variant: small-caps;
-  font-family: "mononoki";
+  font-family: mononoki;
   color: #FFF;
   font-weight: bold;
   letter-spacing: 1px;
@@ -122,7 +123,7 @@
   font-size: 12px;
   margin-top: 5px;
   color: var(--secondary);
-  font-family: "mononoki";
+  font-family: mononoki;
   word-break: break-all;
 }
 
@@ -153,7 +154,7 @@
   height: 18px;
   margin-top: 10px;
   font-size: 14px;
-  font-family: "system-ui";
+  font-family: system-ui;
   display: flex;
   align-items: center;
   justify-content: center;

public/components/gauge/gauge.css

@@ -10,12 +10,13 @@
   padding: 0 10px;
   border-radius: 4px;
 }
+
 body.dark .gauge>.line {
   color: white;
 }
 
 .gauge>.line.clickable:hover {
-  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+  background: linear-gradient(to bottom,  rgb(255 255 255 / 100%) 0%,rgb(255 255 255 / 0%) 100%);
   cursor: pointer;
 }
 
@@ -38,9 +39,10 @@ body.dark .gauge>.line.clickable:hover {
   width: 30px;
   flex-shrink: 0;
   text-align: right;
-  font-family: "mononoki";
+  font-family: mononoki;
   color: var(--secondary-darker);
 }
+
 .gauge>.line>.line--column.border-bottom {
   border-bottom: 1px solid #8080803d;
   padding-bottom: 5px;
@@ -65,21 +67,24 @@ body.dark .gauge>.line.clickable:hover {
   border-radius: 4px;
   overflow: hidden;
 }
+
 .gauge .gauge--bar >.usage {
   height: inherit;
   background-color: var(--secondary-darker);
 }
 
 .gauge .chip {
-  font-family: "mononoki";
+  font-family: mononoki;
   background: #8dabe536;
   border-radius: 8px;
   font-size: 14px;
   padding: 3px 5px;
 }
+
 .gauge .chip:last-child {
   margin-right: 30px;
 }
+
 .gauge .chip + .chip {
   margin-left: 10px;
 }

public/components/legend/legend.css

@@ -4,14 +4,11 @@
   bottom: 40px;
   z-index: 30;
   max-width: 692px;
-  padding: 4px;
-  border-radius: 0 0 0 1rem;
   overflow: hidden;
   transition: transform 0.3s;
   display: none;
-  flex-direction: column;
+  flex-flow: column wrap;
   justify-content: right;
-  flex-wrap: wrap;
   font-size: 14px;
   color: #030421;
   padding: 0 10px 10px 0;
@@ -33,7 +30,7 @@
   height: 15px;
   margin: 0 5px;
   border-radius: 50%;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.34);
+  box-shadow: 0 0 10px rgb(0 0 0 / 34%);
 }
 
 .legend {
@@ -47,7 +44,7 @@
 }
 
 .legend-box:hover {
-  border: 1px solid rgba(48, 56, 165, 0.6);
+  border: 1px solid rgb(48 56 165 / 60%);
 }
 
 .legend-box:hover > .legend {

public/components/locker/locker.css

@@ -41,7 +41,7 @@
 }
 
 #network-locker>p {
-  font-family: "mononoki";
+  font-family: mononoki;
   padding-right: 10px;
   display: flex;
   align-items: center;

public/components/navigation/navigation.css

@@ -40,10 +40,10 @@ nav#aside>ul li+li {
 
 nav#aside>ul li:not(.active):hover {
   cursor: pointer;
-  background: rgba(50, 200, 255, 0.085);
+  background: rgb(50 200 255 / 8.5%);
 }
 
-nav#aside>ul li.active:before {
+nav#aside>ul li.active::before {
   background: var(--secondary);
   position: absolute;
   left: 0;

public/components/package/header/header.css

@@ -6,8 +6,8 @@ div.package-header {
 
 div.package-header>.package-name {
   display: flex;
-  font-family: "mononoki";
-  text-shadow: 1px 1px 5px rgba(20, 20, 20, 0.5);
+  font-family: mononoki;
+  text-shadow: 1px 1px 5px rgb(20 20 20 / 50%);
 }
 
 div.package-header>.package-name>.name {
@@ -35,6 +35,7 @@ div.package-header>.package-name>.info {
   border: none;
   margin-left: auto;
   cursor: pointer;
+
   /* https://codepen.io/sosuke/pen/Pjoqqp */
   filter: invert(71%) sepia(22%) saturate(6942%) hue-rotate(149deg) brightness(101%) contrast(106%);
 }
@@ -54,7 +55,7 @@ div.package-header>.package-name>.info-menu>.info-menu-title {
   font-weight: bold;
   text-align: center;
   margin-bottom: 12px;
-  color: rgb(39, 38, 38);
+  color: rgb(39 38 38);
 }
 
 div.package-header>.package-name>.info-menu>a {
@@ -105,11 +106,11 @@ div.package-header>ul.flags {
   position: absolute;
   z-index: 21;
   font-size: 13px;
-  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
   top: 150%;
   left: 50%;
   margin-left: -140px;
-  font-family: "mononoki";
+  font-family: mononoki;
 }
 
 .flag-infobulle>span::after {
@@ -120,7 +121,7 @@ div.package-header>ul.flags {
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: transparent transparent #000 transparent;
+  border-color: transparent transparent #000;
 }
 
 .flag-infobulle:hover span {
@@ -164,6 +165,7 @@ div.package-header>.links div>a {
 div.package-header>.links div>a:hover {
   text-decoration: underline;
 }
+
 /**
  * LINKS END
  */