feat: Prettier and stylelint in CI

.gitlab-ci.yml

@@ -52,6 +52,20 @@ credo:
     - mix deps.get
     - mix credo --all
 
+stylelint:
+  stage: test
+  image: "node:16"
+  script:
+    - cd apps/app/assets/
+    - npx stylelint **/*.css
+
+prettier:
+  stage: test
+  image: "node:16"
+  script:
+    - cd apps/app/assets/
+    - npx prettier --check **/*.js
+
 build_image_for_commit:
   stage: test
   image: "docker:20.10"

apps/app/assets/.stylelintignore

@@ -1 +1,2 @@
 node_modules
+css/phoenix.css

apps/app/assets/css/app.css

@@ -1,11 +1,7 @@
 @import "tailwindcss/base";
-
 @import "tailwindcss/components";
-
 @import "tailwindcss/utilities";
-
 @import "@fortawesome/fontawesome-free/css/all.css";
-
 @import "blog";
 @import "code";
 
@@ -14,13 +10,13 @@ body {
 }
 
 input[type="checkbox"]::after {
-  content: "";
+  display: inline-flex;
-  color: currentColor;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  display: inline-flex;
+  color: currentColor;
   align-items: center;
-  justify-content: center;
+  content: "";
 }
 
 input[type="checkbox"]:checked::after {
@@ -33,8 +29,9 @@ input[type="checkbox"]:checked::after {
 
 .password-revealer {
   @apply absolute;
-  height: 45px;
+
-  width: 45px;
   right: 0;
   bottom: 0;
+  width: 45px;
+  height: 45px;
 }

apps/app/assets/css/code.css

@@ -57,7 +57,7 @@
 
 .hljs {
   @apply mt-6 mb-12 border-l-4 border-indigo-900 font-mono;
-  --background-color: theme("colors.indigo.100");
+  --background-color: theme("colors.indigo.100"); /* stylelint-disable-line custom-property-empty-line-before */
   --attribute-color: theme("colors.orange.700");
   --section-color: theme("colors.teal.700");
   --string-color: theme("colors.green.700");

lefthook.yml

@@ -4,7 +4,10 @@ pre-commit:
     credo:
       runner: mix credo diff master
     stylelint:
+      root: "apps/app/assets/"
       glob: "*.{css}"
-      runner: (cd apps/app/assets/; npx stylelint {staged_files})
+      runner: npx stylelint {staged_files}
     prettier:
-      runner: (cd apps/app/assets/; npx prettier --check **/*.js)
+      root: "apps/app/assets/"
+      glob: "*.{js}"
+      runner: npx prettier --check {staged_files}