refactor: add stylelint processor

.stylelintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen"
+        ]
+      }
+    ],
+    "declaration-block-trailing-semicolon": null,
+    "no-descending-specificity": null,
+    "declaration-empty-line-before": null,
+    "block-no-empty": null
+  }
+}

package.json

@@ -16,6 +16,8 @@
         "postcss-nested": "^5.0.1",
         "purgecss": "3.0.0",
         "shadow-cljs": "2.8.81",
+        "stylelint": "^13.8.0",
+        "stylelint-config-standard": "^20.0.0",
         "tailwindcss": "2.0.1"
     },
     "scripts": {
@@ -28,6 +30,7 @@
         "clean": "gulp clean",
         "test": "run-s cljs:test cljs:run-test",
         "report": "run-s cljs:report",
+        "style:lint": "stylelint \"src/**/*.css\" ",
         "gulp:watch": "gulp watch",
         "gulp:build": "cross-env NODE_ENV=production gulp build",
         "cljs:watch": "clojure -M:cljs watch app publishing",

src/main/frontend/components/block.css

@@ -32,36 +32,36 @@
   margin: 0 auto;
 
   img {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   }
 }
 
 .ls-block h1 {
   font-size: 2em;
-  margin: .67em 0;
+  margin: 0.67em 0;
 }
 
 .ls-block h2 {
   font-size: 1.5em;
-  margin: .75em 0;
+  margin: 0.75em 0;
 }
 
 .ls-block h3 {
   font-size: 1.17em;
-  margin: .83em 0;
+  margin: 0.83em 0;
 }
 
 .ls-block h4 {
   margin: 1.12em 0;
 }
 
 .ls-block h5 {
-  font-size: .83em;
+  font-size: 0.83em;
   margin: 1.5em 0;
 }
 
 .ls-block h6 {
-  font-size: .75em;
+  font-size: 0.75em;
   margin: 1.67em 0;
 }
 

src/main/frontend/components/editor.css

@@ -14,15 +14,15 @@
   padding: 0;
 }
 
-.non-block-editor textarea, pre {
+.non-block-editor textarea,
+pre {
   display: block;
   padding: 0.5rem;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, .02);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
   border-radius: 4px;
 }
 
 .non-block-editor textarea {
-  background: #F6F8FA;
+  background: #f6f8fa;
   background: var(--ls-secondary-background-color);
 }
-

src/main/frontend/components/header.css

@@ -1,6 +1,5 @@
 .cp__header {
   @apply shadow z-10 h-12 pr-4;
-
   position: relative;
   display: flex;
   align-items: center;
@@ -62,4 +61,4 @@
   .cp__right-menu-button {
     display: block;
   }
-}
+}

src/main/frontend/components/sidebar.css

@@ -57,8 +57,8 @@
 
 .cp__sidebar-help {
   @apply font-bold fixed bottom-4
-  rounded-full h-8 w-8 flex items-center justify-center font-bold
-  opacity-70 hover:opacity-100;
+    rounded-full h-8 w-8 flex items-center justify-center font-bold
+    opacity-70 hover:opacity-100;
 
   user-select: none;
   cursor: help;
@@ -77,7 +77,7 @@
   z-index: 9;
 
   box-sizing: border-box;
-  background-color: var(--ls-secondary-background-color, #D8E1E8);
+  background-color: var(--ls-secondary-background-color, #d8e1e8);
   padding-bottom: 48px;
 
   &-inner {
@@ -110,12 +110,14 @@
     margin-top: 0;
   }
 
-  .non-block-editor textarea, pre, pre.code {
+  .non-block-editor textarea,
+  pre,
+  pre.code {
     background: var(--ls-right-sidebar-code-bg-color);
   }
 
   pre.CodeMirror-line {
-    background: #FFFFFF;
+    background: #fff;
   }
 
   .references {
@@ -134,8 +136,8 @@
     }
 
     .close {
-      transform: scale(.8);
-      transition: transform .1s;
+      transform: scale(0.8);
+      transition: transform 0.1s;
 
       &:hover {
         transform: scale(1);

src/main/frontend/ui.css

@@ -1,6 +1,4 @@
-/* auto complete */
 #ui__ac {
-
   &-inner {
     max-height: 400px;
     overflow-x: hidden;