F: Add StyleLint tooling and fix some CSS issues

.vscode/settings.json

@@ -21,6 +21,7 @@
       "changeProcessCWD": true
     }
   ],
+  "stylelint.enable": true,
   "autopep8.args": [
     "--max-line-length",
     "120",

README.md

@@ -71,6 +71,10 @@ This readme file is used mostly to document project dependencies and conventions
   - vite
   - jest
   - ts-jest
+  - stylelint
+  - stylelint-config-recommended
+  - stylelint-config-standard
+  - stylelint-config-tailwindcss
   - @vitejs/plugin-react
   - @types/jest
   - @lezer/generator

rsconcept/frontend/.stylelintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": ["stylelint-config-recommended", "stylelint-config-standard", "stylelint-config-tailwindcss"],
+  "rules": {
+    "color-no-invalid-hex": true,
+    "font-family-no-missing-generic-family-keyword": true,
+    "unit-no-unknown": true,
+    "block-no-empty": true,
+    "selector-pseudo-element-no-unknown": true,
+    "property-no-unknown": true,
+    "declaration-block-no-duplicate-properties": true,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+
+    "import-notation": null,
+    "at-rule-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "at-rule-no-unknown": null,
+    "comment-no-empty": null,
+    "comment-empty-line-before": null,
+    "custom-property-empty-line-before": null
+  }
+}

rsconcept/frontend/package.json

@@ -9,7 +9,7 @@
     "test:e2e": "playwright test",
     "dev": "vite --host",
     "build": "tsc && vite build",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint": "stylelint \"src/**/*.css\" && eslint . --report-unused-disable-directives --max-warnings 0",
     "lintFix": "eslint . --report-unused-disable-directives --max-warnings 0 --fix",
     "preview": "vite preview --port 3000"
   },
@@ -66,6 +66,10 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^16.0.0",
     "jest": "^29.7.0",
+    "stylelint": "^16.16.0",
+    "stylelint-config-recommended": "^15.0.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-tailwindcss": "^1.0.0",
     "tailwindcss": "^4.0.7",
     "ts-jest": "^29.2.6",
     "typescript": "^5.8.2",

rsconcept/frontend/src/index.css

@@ -8,9 +8,9 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+  /* stylelint-disable-next-line custom-property-pattern */
   --color-*: initial;
   --color-transparent: transparent;
-  --color-current: currentColor;
   --color-inherit: inherit;
 
   --color-prim-0: var(--clr-prim-0);
@@ -35,6 +35,7 @@
 
   --color-ok-600: var(--clr-ok-600);
 
+  /* stylelint-disable-next-line custom-property-pattern */
   --z-index-*: initial;
   --z-index-bottom: 0;
   --z-index-topmost: 99;
@@ -44,6 +45,7 @@
   --z-index-navigation: 50;
   --z-index-modal: 60;
 
+  /* stylelint-disable-next-line custom-property-pattern */
   --breakpoint-*: initial;
   --breakpoint-xs: 475px;
   --breakpoint-sm: 640px;

rsconcept/frontend/src/styling/components.css

@@ -49,11 +49,12 @@
   padding: 0.5rem;
 
   font-size: var(--text-xs);
+
+  /* stylelint-disable-next-line custom-property-pattern */
   line-height: var(--tw-leading, var(--text-xs--line-height));
   font-weight: 500;
   white-space: nowrap;
 
-  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -140,14 +141,13 @@
 }
 
 @utility cc-view-hidden-item {
-  outline-width: 0px;
+  outline-width: 0;
   outline-color: transparent;
 
   &.selected {
-    outline-width: 2px;
+    outline: 2px solid var(--clr-prim-999);
-    outline-color: var(--clr-prim-999);
-    outline-style: solid;
   }
+
   &.inherited {
     outline-style: dashed;
   }
@@ -184,7 +184,7 @@
     clip-path: inset(0% 0% 0% 0%);
     height: 4.5rem;
     margin-top: 0.75rem;
-    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+    padding: 0.25rem 0.5rem;
   }
 }
 

rsconcept/frontend/src/styling/constants.css

@@ -20,93 +20,93 @@
 /* Light Theme */
 /* prettier-ignore */
 :not(.dark):root {
-  --clr-prim-0:       hsl(000, 000%, 100%);
+  --clr-prim-0:       hsl(000deg 000% 100%);
-  --clr-prim-100:     hsl(000, 000%, 098%);
+  --clr-prim-100:     hsl(000deg 000% 098%);
-  --clr-prim-200:     hsl(000, 000%, 094%);
+  --clr-prim-200:     hsl(000deg 000% 094%);
-  --clr-prim-300:     hsl(000, 000%, 091%);
+  --clr-prim-300:     hsl(000deg 000% 091%);
-  --clr-prim-400:     hsl(000, 000%, 080%);
+  --clr-prim-400:     hsl(000deg 000% 080%);
-  --clr-prim-600:     hsl(000, 000%, 065%);
+  --clr-prim-600:     hsl(000deg 000% 065%);
-  --clr-prim-800:     hsl(000, 000%, 047%);
+  --clr-prim-800:     hsl(000deg 000% 047%);
-  --clr-prim-999:     hsl(000, 000%, 000%);
+  --clr-prim-999:     hsl(000deg 000% 000%);
 
-  --clr-sec-0:        hsl(000, 000%, 100%);
+  --clr-sec-0:        hsl(000deg 000% 100%);
-  --clr-sec-100:      hsl(190, 080%, 094%);
+  --clr-sec-100:      hsl(190deg 080% 094%);
-  --clr-sec-200:      hsl(220, 080%, 092%);
+  --clr-sec-200:      hsl(220deg 080% 092%);
-  --clr-sec-300:      hsl(220, 100%, 080%);
+  --clr-sec-300:      hsl(220deg 100%080%);
-  --clr-sec-400:      hsl(220, 100%, 070%);
+  --clr-sec-400:      hsl(220deg 100% 070%);
-  --clr-sec-600:      hsl(220, 100%, 060%);
+  --clr-sec-600:      hsl(220deg 100% 060%);
-  --clr-sec-800:      hsl(220, 100%, 050%);
+  --clr-sec-800:      hsl(220deg 100% 050%);
 
-  --clr-warn-100:     hsl(000, 100%, 095%);
+  --clr-warn-100:     hsl(000deg 100% 095%);
-  --clr-warn-600:     hsl(000, 072%, 051%);
+  --clr-warn-600:     hsl(000deg 072% 051%);
 
-  --clr-ok-600:       hsl(120, 080%, 37%);
+  --clr-ok-600:       hsl(120deg 080% 37%);
 
-  --clr-select-node:  hsl(162, 082%, 051%);
+  --clr-select-node:  hsl(162deg 082% 051%);
 
   /* Highlight accents */
-  --acc-bg-red:       hsl(000, 100%, 089%);
+  --acc-bg-red:       hsl(000deg 100% 089%);
-  --acc-bg-green:     hsl(100, 100%, 075%);
+  --acc-bg-green:     hsl(100deg 100% 075%);
-  --acc-bg-blue:      hsl(235, 080%, 087%);
+  --acc-bg-blue:      hsl(235deg 080% 087%);
-  --acc-bg-purple:    hsl(274, 089%, 081%);
+  --acc-bg-purple:    hsl(274deg 089% 081%);
-  --acc-bg-teal:      hsl(192, 089%, 081%);
+  --acc-bg-teal:      hsl(192deg 089% 081%);
-  --acc-bg-orange:    hsl(028, 100%, 075%);
+  --acc-bg-orange:    hsl(028deg 100% 075%);
 
-  --acc-bg-green25:   hsl(100, 100%, 096%);
+  --acc-bg-green25:   hsl(100deg 100% 096%);
-  --acc-bg-green50:   hsl(100, 100%, 090%);
+  --acc-bg-green50:   hsl(100deg 100% 090%);
-  --acc-bg-orange50:  hsl(028, 100%, 090%);
+  --acc-bg-orange50:  hsl(028deg 100% 090%);
   
-  --acc-fg-red:       hsl(000, 090%, 045%);
+  --acc-fg-red:       hsl(000deg 090% 045%);
-  --acc-fg-green:     hsl(100, 090%, 035%);
+  --acc-fg-green:     hsl(100deg 090% 035%);
-  --acc-fg-blue:      hsl(235, 100%, 050%);
+  --acc-fg-blue:      hsl(235deg 100% 050%);
-  --acc-fg-purple:    hsl(270, 100%, 055%);
+  --acc-fg-purple:    hsl(270deg 100% 055%);
-  --acc-fg-teal:      hsl(200, 080%, 050%);
+  --acc-fg-teal:      hsl(200deg 080% 050%);
-  --acc-fg-orange:    hsl(028, 100%, 050%);
+  --acc-fg-orange:    hsl(028deg 100% 050%);
 }
 
 /* Dark Theme */
 /* prettier-ignore */
 .dark:root {
-  --clr-prim-0:       hsl(000, 000%, 005%);
+  --clr-prim-0:       hsl(000deg 000% 005%);
-  --clr-prim-100:     hsl(000, 000%, 009%);
+  --clr-prim-100:     hsl(000deg 000% 009%);
-  --clr-prim-200:     hsl(000, 000%, 015%);
+  --clr-prim-200:     hsl(000deg 000% 015%);
-  --clr-prim-300:     hsl(000, 000%, 022%);
+  --clr-prim-300:     hsl(000deg 000% 022%);
-  --clr-prim-400:     hsl(000, 000%, 035%);
+  --clr-prim-400:     hsl(000deg 000% 035%);
-  --clr-prim-600:     hsl(000, 000%, 055%);
+  --clr-prim-600:     hsl(000deg 000% 055%);
-  --clr-prim-800:     hsl(000, 000%, 080%);
+  --clr-prim-800:     hsl(000deg 000% 080%);
-  --clr-prim-999:     hsl(000, 000%, 093%);
+  --clr-prim-999:     hsl(000deg 000% 093%);
 
-  --clr-sec-800:      hsl(267, 070%, 070%);
+  --clr-sec-800:      hsl(267deg 070% 070%);
-  --clr-sec-600:      hsl(267, 050%, 060%);
+  --clr-sec-600:      hsl(267deg 050% 060%);
-  --clr-sec-400:      hsl(267, 050%, 050%);
+  --clr-sec-400:      hsl(267deg 050% 050%);
-  --clr-sec-300:      hsl(267, 050%, 040%);
+  --clr-sec-300:      hsl(267deg 050% 040%);
-  --clr-sec-200:      hsl(267, 050%, 032%);
+  --clr-sec-200:      hsl(267deg 050% 032%);
-  --clr-sec-100:      hsl(269, 030%, 028%);
+  --clr-sec-100:      hsl(269deg 030% 028%);
-  --clr-sec-0:        hsl(000, 000%, 100%);
+  --clr-sec-0:        hsl(000deg 000% 100%);
 
-  --clr-warn-100:     hsl(000, 100%, 015%);
+  --clr-warn-100:     hsl(000deg 100% 015%);
-  --clr-warn-600:     hsl(000, 080%, 055%);
+  --clr-warn-600:     hsl(000deg 080% 055%);
 
-  --clr-ok-600:       hsl(120, 080%, 042%);
+  --clr-ok-600:       hsl(120deg 080% 042%);
 
-  --clr-select-node:  hsl(162, 082%, 041%);
+  --clr-select-node:  hsl(162deg 082% 041%);
 
   /* Highlight accents */
-  --acc-bg-red:       hsl(000, 080%, 037%);
+  --acc-bg-red:       hsl(000deg 080% 037%);
-  --acc-bg-green:     hsl(100, 080%, 025%);
+  --acc-bg-green:     hsl(100deg 080% 025%);
-  --acc-bg-blue:      hsl(235, 054%, 049%);
+  --acc-bg-blue:      hsl(235deg 054% 049%);
-  --acc-bg-purple:    hsl(270, 080%, 050%);
+  --acc-bg-purple:    hsl(270deg 080% 050%);
-  --acc-bg-teal:      hsl(192, 080%, 030%);
+  --acc-bg-teal:      hsl(192deg 080% 030%);
-  --acc-bg-orange:    hsl(035, 100%, 035%);
+  --acc-bg-orange:    hsl(035deg 100% 035%);
 
-  --acc-bg-green25:   hsl(100, 080%, 009%);
+  --acc-bg-green25:   hsl(100deg 080% 009%);
-  --acc-bg-green50:   hsl(100, 080%, 017%);
+  --acc-bg-green50:   hsl(100deg 080% 017%);
-  --acc-bg-orange50:  hsl(035, 100%, 016%);
+  --acc-bg-orange50:  hsl(035deg 100% 016%);
 
-  --acc-fg-red:       hsl(000, 080%, 045%);
+  --acc-fg-red:       hsl(000deg 080% 045%);
-  --acc-fg-green:     hsl(100, 080%, 035%);
+  --acc-fg-green:     hsl(100deg 080% 035%);
-  --acc-fg-blue:      hsl(235, 100%, 080%);
+  --acc-fg-blue:      hsl(235deg 100% 080%);
-  --acc-fg-purple:    hsl(270, 100%, 080%);
+  --acc-fg-purple:    hsl(270deg 100% 080%);
-  --acc-fg-teal:      hsl(192, 100%, 045%);
+  --acc-fg-teal:      hsl(192deg 100% 045%);
-  --acc-fg-orange:    hsl(035, 100%, 050%);
+  --acc-fg-orange:    hsl(035deg 100% 050%);
 }

rsconcept/frontend/src/styling/overrides.css

@@ -1,9 +1,11 @@
 /**
- * Module: Override imported components CSS styling.
+* Module: Override imported components CSS styling.
- */
+*/
 @import './constants.css';
 @import './imports.css';
 
+/* stylelint-disable selector-class-pattern */
+
 :root {
   /* Import overrides */
   --toastify-color-dark: var(--clr-prim-300);
@@ -37,23 +39,18 @@
   border-width: 1px;
   border-radius: 0.25rem;
 
-  padding-left: 0.375rem;
+  padding: 0.15rem 0.375rem;
-  padding-right: 0.375rem;
-  padding-top: 0.15rem;
-  padding-bottom: 0.15rem;
 }
+
 .cm-editor.cm-focused {
   border-color: var(--clr-prim-400);
-  outline-color: var(--clr-sec-600);
+  outline: 2px solid var(--clr-sec-600);
-  outline-style: solid;
-  outline-width: 2px;
 }
 
 .cm-editor .cm-placeholder {
   font-family: var(--font-main);
   color: var(--clr-prim-600);
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .react-flow__handle {
@@ -89,7 +86,6 @@
   font-size: 14px;
   border: 1px solid;
 
-  background-color: var(--clr-prim-0);
   color: var(--clr-prim-999);
   border-color: var(--clr-prim-400);
   background-color: var(--clr-prim-0);

rsconcept/frontend/src/styling/setup.css

@@ -33,11 +33,10 @@
   ::backdrop,
   ::file-selector-button {
     border-color: var(--clr-prim-400);
+    accent-color: var(--clr-sec-600);
   }
 
   html {
-    -webkit-text-size-adjust: none;
-    -moz-text-size-adjust: none;
     text-size-adjust: none;
 
     hanging-punctuation: first last;
@@ -47,8 +46,8 @@
   }
 
   body {
-    margin: 0px;
+    margin: 0;
-    padding: 0px;
+    padding: 0;
     overflow-x: hidden;
   }
 
@@ -80,7 +79,7 @@
     background-color: var(--clr-prim-100);
   }
 
-  @media only screen and (max-width: 639px) {
+  @media only screen and (width <= 639px) {
     :root {
       font-size: var(--font-size-sm);
     }
@@ -89,9 +88,7 @@
   :focus,
   :focus-visible,
   :focus-within {
-    outline-width: 2px;
+    outline: 2px solid transparent;
-    outline-style: solid;
-    outline-color: transparent;
   }
 
   ::placeholder {
@@ -135,6 +132,7 @@
       :not([role='manuals']) & {
         margin-top: 0.5rem;
       }
+
       [role='manuals'] & {
         margin-top: 0.75rem;
         margin-bottom: 0.5rem;

rsconcept/frontend/src/styling/utilities.css

@@ -1,5 +1,5 @@
 /**
- * Module: Utility classes for stlye features.
+ * Module: Utility classes for style features.
  */
 
 @utility font-main {
@@ -17,6 +17,7 @@
 
 @utility clr-input {
   background-color: var(--clr-prim-0);
+
   &:disabled {
     background-color: var(--clr-prim-100);
   }
@@ -51,30 +52,28 @@
     background-color: var(--clr-prim-200);
   }
 
-  &:hover:not(:disabled),
+  &:focus-visible,
-  &:focus-visible {
+  .focus-frame:has(:focus-visible) {
-    color: var(--clr-sec-0);
+    outline: 2px solid var(--clr-sec-600);
-    background-color: var(--clr-sec-600);
   }
 
   &:focus-visible,
-  .focus-frame:has(:focus-visible) {
+  &:hover:not(:disabled) {
-    outline-width: 2px;
+    color: var(--clr-sec-0);
-    outline-style: solid;
+    background-color: var(--clr-sec-600);
-    outline-color: var(--clr-sec-600);
   }
 }
 
 @utility clr-btn-nav {
   color: var(--clr-prim-800);
 
-  &:hover:not(:disabled) {
-    background-color: var(--clr-sec-100);
-  }
-
   &:disabled {
     color: var(--clr-prim-600);
   }
+
+  &:hover:not(:disabled) {
+    background-color: var(--clr-sec-100);
+  }
 }
 
 @utility clr-hover {
@@ -86,23 +85,17 @@
 
 @utility clr-outline {
   :is(&, .focus-frame):focus-visible {
-    outline-width: 2px;
+    outline: 2px solid var(--clr-sec-600);
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
   }
 }
 
 @utility focus-frame {
   :is(.clr-outline, &):focus-visible {
-    outline-width: 2px;
+    outline: 2px solid var(--clr-sec-600);
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
   }
 
   &:has(:focus-visible) {
-    outline-width: 2px;
+    outline: 2px solid var(--clr-sec-600);
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
   }
 }
 
@@ -115,6 +108,7 @@
 @utility clr-text-controls {
   color: var(--clr-prim-800);
   background-color: transparent;
+
   &:disabled {
     color: var(--clr-prim-600);
   }
@@ -140,10 +134,12 @@
 
 @utility inline-icon {
   display: inline-block;
-  font-size: 1.25rem;
+
   margin-left: 0.1rem;
   margin-right: 0.1rem;
   transform: translate(0, -0.2rem);
+
+  font-size: 1.25rem;
   color: var(--clr-sec-800);
 }
 
@@ -219,11 +215,5 @@
     linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
     linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
 
-  -webkit-mask-image: linear-gradient(to top, transparent, black calc(var(--mask-border-size))),
-    linear-gradient(to bottom, transparent, black calc(var(--mask-border-size))),
-    linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
-    linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
-
   mask-composite: intersect;
-  -webkit-mask-composite: destination-in;
 }