Stylelint + ESlint

Author: qzminski

assets/tags-widget.js

@@ -1,34 +1,34 @@
 import './tags-widget.scss';
 
-import {Application, Controller} from '@hotwired/stimulus';
+import { Application, Controller } from '@hotwired/stimulus';
 import TomSelect from 'tom-select';
 
 const application = Application.start();
 application.debug = process.env.NODE_ENV === 'development';
 application.register('codefog--tags-widget', class extends Controller {
-    static targets = ['input']
+    static targets = ['input'];
 
     static values = {
         config: {
             type: Object,
             default: {},
-        }
-    }
+        },
+    };
 
     connect() {
-        this.tomSelect = new TomSelect(this.inputTarget, this.#getOptions())
+        this.tomSelect = new TomSelect(this.inputTarget, this.#getOptions());
     }
 
     disconnect() {
-        this.tomSelect.destroy()
+        this.tomSelect.destroy();
     }
 
     add(event) {
-        this.tomSelect.addItem(event.target.value)
+        this.tomSelect.addItem(event.target.value);
     }
 
     remove(event) {
-        this.tomSelect.removeItem(event.target.value)
+        this.tomSelect.removeItem(event.target.value);
     }
 
     #getOptions() {
@@ -42,12 +42,12 @@ application.register('codefog--tags-widget', class extends Controller {
             render: {
                 option_create: (data, escape) => `<div class="create">${config.addLabel} <strong>${escape(data.input)}</strong>&hellip;</div>`,
                 item: (data, escape) => `<div>${escape(data.text)}<button type="button" class="cfg-tags-widget__remove" value="${data.value}" aria-label="${config.removeLabel} ${escape(data.text)}" data-action="click->codefog--tags-widget#remove:prevent">${config.removeLabel}</button></div>`,
-                no_results: (data,escape) => `<div class="no-results">${config.noResultsLabel}</div>`,
-            }
+                no_results: () => `<div class="no-results">${config.noResultsLabel}</div>`,
+            },
         };
 
         if (config.allowCreate) {
-            options.create = input => ({ value: input, text: input });
+            options.create = (input) => ({ value: input, text: input });
         }
 
         if (config.maxItems) {

assets/tags-widget.scss

@@ -13,7 +13,7 @@ $select-padding-dropdown-item-y: 3px;
 $select-padding-x: 6px;
 $select-padding-y: 5px;
 
-@import "~tom-select/dist/scss/tom-select";
+@import '~tom-select/dist/scss/tom-select';
 
 .cfg-tags-widget {
     margin-top: 3px;
@@ -37,7 +37,7 @@ $select-padding-y: 5px;
         cursor: pointer;
         transition: background 0.2s ease;
 
-        html[data-color-scheme=dark] & {
+        html[data-color-scheme='dark'] & {
             background-image: url('./add--dark.svg');
         }
 
@@ -55,14 +55,17 @@ $select-padding-y: 5px;
         position: relative;
         display: inline-block;
         width: var(--choices-button-dimension, 8px);
-        margin: 0 calc(var(--choices-button-offset, 8px) * -.5) 0 var(--choices-button-offset, 8px);
+        margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px);
         padding-bottom: 2px;
         padding-left: calc(var(--choices-button-offset, 8px) * 2);
         border: 0;
         border-left: 1px solid var(--choices-border);
         border-radius: var(--choices-button-border-radius, 0);
         background-color: transparent;
-        background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
+        background-image: var(
+            --choices-icon-cross,
+            url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==')
+        );
         background-position: center;
         background-repeat: no-repeat;
         background-size: var(--choices-button-dimension, 8px);
@@ -72,16 +75,16 @@ $select-padding-y: 5px;
         text-indent: -9999px;
         appearance: none;
 
-        html:not([data-color-scheme=dark]) & {
-            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMjIyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==)
+        html:not([data-color-scheme='dark']) & {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMjIyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
         }
 
         &:is(:hover, :focus) {
             --choices-button-opacity: var(--choices-button-opacity-hover, 1);
         }
 
         &:focus {
-            box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75)
+            box-shadow: 0 0 0 2px var(--choices-highlight-color, #005f75);
         }
     }
 
@@ -94,7 +97,7 @@ $select-padding-y: 5px;
             padding-left: 3px;
 
             input {
-                margin: -3px 4px 0 4px !important;
+                margin: -3px 4px 0 !important;
             }
         }
 
@@ -121,7 +124,7 @@ $select-padding-y: 5px;
             background-position: 6px center;
 
             &.active,
-            html[data-color-scheme=dark] & {
+            html[data-color-scheme='dark'] & {
                 background-image: url('./add--dark.svg');
             }
         }

public/entrypoints.json

@@ -5,7 +5,7 @@
         "/bundles/codefogtags/tags-widget.c2ea0e46.css"
       ],
       "js": [
-        "/bundles/codefogtags/tags-widget.70907cda.js"
+        "/bundles/codefogtags/tags-widget.92015867.js"
       ]
     }
   }

public/manifest.json

@@ -1,8 +1,8 @@
 {
   "tags-widget.css": "/bundles/codefogtags/tags-widget.c2ea0e46.css",
-  "tags-widget.js": "/bundles/codefogtags/tags-widget.70907cda.js",
+  "tags-widget.js": "/bundles/codefogtags/tags-widget.92015867.js",
   "images/add--dark.svg": "/bundles/codefogtags/images/add--dark.642bad3d.svg",
   "images/add.svg": "/bundles/codefogtags/images/add.a31d1889.svg",
   "tags-widget.c2ea0e46.css.map": "/bundles/codefogtags/tags-widget.c2ea0e46.css.map",
-  "tags-widget.70907cda.js.map": "/bundles/codefogtags/tags-widget.70907cda.js.map"
+  "tags-widget.92015867.js.map": "/bundles/codefogtags/tags-widget.92015867.js.map"
 }