chore(cs): apply linting on CSS and JS too

eslint.config.js

@@ -5,7 +5,7 @@ export default config(
     formatters: true,
   },
   {
-    files: ['**/*.ts', '**/*.vue'],
+    files: ['resources/**/*.{js,ts,css,pcss,vue}'],
     rules: {
       'antfu/top-level-function': 'off',
       'curly': ['error', 'all'],
@@ -26,6 +26,8 @@ export default config(
   },
 ).prepend({
   ignores: [
+    'resources/assets/tsconfig.json',
+    'resources/assets/css/vendor/**',
     'resources/assets/js/visualizers/**',
   ]
 })

package.json

@@ -87,7 +87,8 @@
     "yarn": "^1.22.22"
   },
   "scripts": {
-    "lint": "eslint ./resources/assets/js --fix",
+    "lint": "eslint ./resources/assets",
+    "lint:fix": "eslint ./resources/assets --fix",
     "test": "vitest",
     "test:unit": "vitest",
     "test:e2e": "kill-port 8080 && start-test dev http-get://localhost:8080/api/ping 'cypress open'",
@@ -104,7 +105,7 @@
     "**/*.php": [
       "composer cs"
     ],
-    "resources/assets/js/**/*.{ts,vue}": [
+    "resources/assets/**/*.{js,ts,css,pcss,vue}": [
       "eslint --fix"
     ],
     "cypress/**/*.ts": [

resources/assets/css/app.pcss

@@ -28,12 +28,14 @@
   }
 
   .fade-top.fade-bottom {
-    -webkit-mask: linear-gradient(to bottom, transparent, black var(--fade-size)) top,
+    -webkit-mask:
+      linear-gradient(to bottom, transparent, black var(--fade-size)) top,
       linear-gradient(to top, transparent, black var(--fade-size)) bottom;
     -webkit-mask-size: 100% 51%;
     -webkit-mask-repeat: no-repeat;
 
-    mask: linear-gradient(to bottom, transparent, black var(--fade-size)) top,
+    mask:
+      linear-gradient(to bottom, transparent, black var(--fade-size)) top,
       linear-gradient(to top, transparent, black var(--fade-size)) bottom;
     mask-size: 100% 51%;
     mask-repeat: no-repeat;

resources/assets/css/partials/shared.pcss

@@ -1,7 +1,13 @@
 @tailwind base;
 
 @layer base {
-  h1, h2, h3, h4, h5, h6, blockquote {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  blockquote {
     @apply text-balance;
   }
 
@@ -17,7 +23,8 @@
     @apply text-black/5;
   }
 
-  body, html {
+  body,
+  html {
     @mixin themed-background;
 
     font-family: var(--font-family);
@@ -26,12 +33,17 @@
     @apply text-k-text-primary font-light leading-6 overflow-hidden;
   }
 
-  input, select, button, textarea, .btn {
+  input,
+  select,
+  button,
+  textarea,
+  .btn {
     font-family: var(--font-family);
 
     @apply appearance-none border-0 outline-0 text-base font-light;
 
-    &:required, &:invalid {
+    &:required,
+    &:invalid {
       @apply shadow-none;
     }
 
@@ -43,7 +55,8 @@
   a {
     @apply no-underline text-k-text-primary cursor-pointer hover:text-k-accent focus:text-k-accent;
 
-    &:link, &:visited {
+    &:link,
+    &:visited {
       @apply text-k-accent;
     }
   }
@@ -52,7 +65,8 @@
     --fade-size: 3rem;
   }
 
-  button, [role=button] {
+  button,
+  [role='button'] {
     @apply touch-manipulation select-none cursor-pointer focus-visible:outline-1 focus-visible:outline-k-accent;
   }
 

resources/assets/css/partials/skeleton.pcss

@@ -1,11 +1,13 @@
 .skeleton {
-  .pulse, &.pulse {
+  .pulse,
+  &.pulse {
     @apply bg-white/5;
     animation: skeleton-pulse 2s infinite;
   }
 
   @keyframes skeleton-pulse {
-    0%, 100% {
+    0%,
+    100% {
       @apply opacity-0;
     }
     50% {

resources/assets/css/partials/vars.pcss

@@ -1,6 +1,6 @@
 :root {
   --color-text-primary: #fff;
-  --color-text-secondary: rgba(255, 255, 255, .7);
+  --color-text-secondary: rgba(255, 255, 255, 0.7);
   --color-bg-primary: #181818;
   --color-bg-secondary: #1d1d1d;
   --color-border: var(--color-bg-secondary);
@@ -16,7 +16,8 @@
   --bg-attachment: fixed;
   --bg-size: cover;
 
-  --font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-family: system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    'Helvetica Neue', sans-serif;
 
   --header-height: auto;
   --footer-height: 84px;

resources/assets/css/remote.pcss

@@ -9,7 +9,8 @@
 @tailwind utilities;
 
 @layer base {
-  body, html {
+  body,
+  html {
     @apply h-screen relative;
   }
 }