Add stylelint

.github/workflows/lint.yml

@@ -3,8 +3,8 @@ name: Lint Code Base
 on: [push, pull_request]
 
 jobs:
-  lint:
-    name: Run ESLint
+  codestyle:
+    name: Run Codestyle checks
     runs-on: ubuntu-latest
 
     steps:
@@ -23,3 +23,7 @@ jobs:
       - name: Run ESLint
         run: |
           npm run lint
+
+      - name: Run Stylelint
+        run: |
+          npm run lint:css

.github/workflows/release.yml

@@ -6,8 +6,8 @@ on:
       - 'v*.*.*'  # Triggers the workflow on tag push like v1.0.0
 
 jobs:
-  lint:
-    name: Run ESLint
+  codestyle:
+    name: Run Codestyle checks
     runs-on: ubuntu-latest
 
     steps:
@@ -26,6 +26,11 @@ jobs:
       - name: Run ESLint
         run: |
           npm run lint
+
+      - name: Run Stylelint
+        run: |
+          npm run lint:css
+
   create_release:
     runs-on: ubuntu-latest
 

.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "color-no-invalid-hex": true,
+    "font-family-no-duplicate-names": true,
+    "font-family-no-missing-generic-family-keyword": true,
+    "selector-type-no-unknown": true,
+    "no-duplicate-selectors": true,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "length-zero-no-unit": true,
+    "media-feature-range-notation": "prefix",
+    "rule-empty-line-before": "always"
+  }
+}

assets/css/sidebar-for-wpb-admin.css

@@ -1,4 +1,4 @@
-.sfw-label{
+.sfw-label {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -31,7 +31,7 @@
   width: 300px;
   border-radius: 5px;
   padding: 10px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 6px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 4px 6px;
   z-index: 1;
 }
 

assets/css/sidebar-for-wpb-admin.min.css

@@ -1,4 +1,4 @@
-.sfw-label{
+.sfw-label {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -31,7 +31,7 @@
   width: 300px;
   border-radius: 5px;
   padding: 10px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 6px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 4px 6px;
   z-index: 1;
 }