Chore: Lint Css (#4745)

Because:
- Standard CSS styling throughout the code base
- Catching CSS errors before they make it into production

This commit:
- Adds stylelint
- Disables selector-class-pattern rule because it does not like our bem
selectors

.github/workflows/ci.yml

@@ -36,6 +36,7 @@ jobs:
           bin/rubocop --parallel
           bin/erblint --lint-all
           yarn run lint
+          yarn run stylelint
 
   tests:
     name: Tests

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "selector-class-pattern": null
+  }
+}

app/assets/stylesheets/application.tailwind.css

@@ -2,14 +2,14 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import './stylesheets/buttons.css';
-@import './stylesheets/layout.css';
-@import './stylesheets/typography.css';
-@import './stylesheets/buttons.css';
-@import './stylesheets/lesson-content.css';
-@import './stylesheets/lesson-notes.css';
-@import './stylesheets/prism-theme.css';
-@import './stylesheets/pagy.css';
-@import './stylesheets/animations.css';
-@import './stylesheets/static-pages.css';
-@import './stylesheets/charts.css';
+@import './custom_styles/buttons.css';
+@import './custom_styles/layout.css';
+@import './custom_styles/typography.css';
+@import './custom_styles/buttons.css';
+@import './custom_styles/lesson-content.css';
+@import './custom_styles/lesson-notes.css';
+@import './custom_styles/prism-theme.css';
+@import './custom_styles/pagy.css';
+@import './custom_styles/animations.css';
+@import './custom_styles/static-pages.css';
+@import './custom_styles/charts.css';

app/assets/stylesheets/stylesheets/animations.css → app/assets/stylesheets/custom_styles/animations.css

@@ -6,9 +6,11 @@
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.2);
   }
+
   100% {
     transform: scale(1);
   }

app/assets/stylesheets/stylesheets/buttons.css → app/assets/stylesheets/custom_styles/buttons.css

@@ -1,6 +1,7 @@
 @layer components {
   .button {
     min-width: 100px;
+
     @apply inline-flex items-center px-6 justify-center py-3 border border-transparent
     rounded-md shadow-sm text-white focus:outline-none
     focus:ring-2 focus:ring-offset-1 hover:text-white focus:text-white no-underline

app/assets/stylesheets/stylesheets/lesson-content.css → app/assets/stylesheets/custom_styles/lesson-content.css

@@ -1,6 +1,6 @@
 @layer components {
   .lesson-content__panel {
-    @apply bg-gray-100 p-6 rounded-lg dark:bg-gray-800 dark:highlight-white;
+    @apply bg-gray-100 p-6 rounded-lg dark:bg-gray-800 dark:highlight-white dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;;
   }
 
   .lesson-content__panel > *:first-child {
@@ -19,12 +19,9 @@
     @apply px-1.5 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-md dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500;
   }
 
-  .lesson-content__panel {
-    @apply dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;
-  }
-
   .lesson-content pre code {
     @apply !bg-transparent p-0;
+
     padding-top: 3px;
   }
 

app/assets/stylesheets/stylesheets/lesson-notes.css → app/assets/stylesheets/custom_styles/lesson-notes.css

@@ -18,6 +18,7 @@
   .lesson-note > *:first-child::before {
     mask-image: url("/icons/pencil-square-solid.svg");
     content:'';
+
     @apply h-5 w-5 mr-2 inline-block align-text-bottom bg-gold dark:bg-gold-600;
   }
 
@@ -30,6 +31,7 @@
   .lesson-note--tip > *:first-child::before {
     mask-image: url("/icons/light-bulb-solid.svg");
     content:'';
+
     @apply h-5 w-5 inline-block align-text-bottom bg-blue-600 dark:bg-blue-500;
   }
 
@@ -43,6 +45,7 @@
   .lesson-note--warning > *:first-child::before {
     mask-image: url("/icons/exclamation-triangle-solid.svg");
     content:'';
+
     @apply h-5 w-5 inline-block align-text-bottom bg-orange-500 dark:bg-orange-400;
   }
 
@@ -55,6 +58,7 @@
   .lesson-note--critical > *:first-child::before {
     mask-image: url('/icons/exclamation-circle-solid.svg');
     content:'';
+
     @apply h-5 w-5 inline-block align-text-bottom bg-red-600 dark:bg-red-500;
   }
 }

app/assets/stylesheets/stylesheets/pagy.css → app/assets/stylesheets/custom_styles/pagy.css

@@ -11,9 +11,11 @@
 .pagy-nav-js .page.prev.disabled,
 .pagy-nav-js .page.next.disabled {
   @apply block px-3 py-1 text-gray-500 dark:text-gray-400 font-semibold;
+
   &:hover{
     @apply text-gray-700 dark:text-gray-200;
   }
+
   &:active{
     @apply text-gray-700 dark:text-gray-200;
   }
@@ -24,9 +26,11 @@
 .pagy-nav-js .page.prev.disabled,
 .pagy-nav-js .page.next.disabled {
   @apply text-gray-400 dark:text-gray-700 first-letter:cursor-default;
+
   &:hover {
     @apply text-gray-400 dark:text-gray-700;
   }
+
   &:active {
     @apply text-gray-400 dark:text-gray-700;
   }
@@ -35,9 +39,11 @@
 .pagy-nav .page.active,
 .pagy-nav-js .page.active {
   @apply cursor-default text-gold-500 dark:text-gold-500;
+
   &:hover {
     @apply text-gold-500 dark:text-gold-500;
   }
+
   &:active {
     @apply text-gold-500 dark:text-gold-500;
   }
@@ -53,6 +59,7 @@
   &:hover {
     @apply text-gray-800 dark:text-gray-200;
   }
+
   &:active {
     @apply text-gray-800 dark:text-gray-200;
   }

app/assets/stylesheets/stylesheets/prism-theme.css → app/assets/stylesheets/custom_styles/prism-theme.css

@@ -1,5 +1,5 @@
-code[class*=language-],
-pre[class*=language-] {
+code[class*="language-"],
+pre[class*="language-"] {
   color: #ccc;
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 1rem;
@@ -9,25 +9,20 @@ pre[class*=language-] {
   word-break: normal;
   word-wrap: normal;
   line-height: 1.7;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
-pre[class*=language-] {
+pre[class*="language-"] {
   padding: 1rem;
   overflow: auto;
 }
 
-code[class*=language-] {
+code[class*="language-"] {
 	padding-top: 3px;
 }
 
-:not(pre)>code[class*=language-] {
+:not(pre)>code[class*="language-"] {
   padding: .1rem;
   border-radius: .3rem;
   white-space: normal

app/assets/stylesheets/stylesheets/typography.css → app/assets/stylesheets/custom_styles/typography.css

@@ -1,6 +1,6 @@
 @layer base {
   body {
-    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
 }
 
@@ -17,9 +17,10 @@
     @apply dark:text-gray-200;
   }
 
-  .anchor-link:hover:before {
+  .anchor-link:hover::before {
     mask-image: url("/icons/link.svg");
     content:' ';
+
     @apply h-4 w-4 bg-gray-500 dark:bg-gray-300 absolute -left-[22px] top-1/2 -translate-y-1/2 font-semibold sm:block;
   }
 }

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "lint": "standard app/javascript --verbose",
+    "stylelint": "stylelint 'app/assets/stylesheets/custom_styles/*.css'",
     "build": "node esbuild.config.mjs",
     "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --postcss"
   },
@@ -40,7 +41,9 @@
     "defaults"
   ],
   "devDependencies": {
-    "standard": "^17.1.0"
+    "standard": "^17.1.0",
+    "stylelint": "^16.8.1",
+    "stylelint-config-standard": "^36.0.1"
   },
   "packageManager": "[email protected]"
 }