chore: use stylelint

package.json

@@ -15,8 +15,8 @@
     "dev:rollup": "NODE_ENV=development rollup -c -w",
     "build": "run-s build:static build:rollup",
     "dev": "run-s build:static dev:rollup",
-    "lint": "standard",
-    "lint:fix": "standard --fix",
+    "lint": "standard && stylelint '**/*.scss'",
+    "lint:fix": "standard --fix && stylelint --fix '**/*.scss'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -53,6 +53,9 @@
     "rollup-plugin-svelte-hot": "^0.7.0",
     "sass": "^1.26.7",
     "standard": "^14.3.3",
+    "stylelint": "^13.5.0",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^3.17.2",
     "svelte": "^3.22.2",
     "svelte-preprocess": "^3.7.4"
   },
@@ -68,12 +71,26 @@
       "requestIdleCallback"
     ]
   },
+  "stylelint": {
+    "extends": "stylelint-config-recommended-scss",
+    "rules": {
+      "selector-type-no-unknown": [
+        true,
+        {
+          "ignoreTypes": [
+            "lite-emoji-picker"
+          ]
+        }
+      ]
+    }
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
-    "*.js": "standard --fix"
+    "*.js": "standard --fix",
+    "*.(css|scss)": "stylelint --fix '**/*.scss'"
   }
 }

src/svelte/components/Picker/Picker.scss

@@ -33,7 +33,8 @@
 // emoji
 //
 
-button.lep-emoji, .lep-emoji {
+button.lep-emoji,
+.lep-emoji {
   padding: var(--lep-emoji-padding);
   font-size: var(--lep-emoji-size);
   display: flex;
@@ -43,15 +44,22 @@ button.lep-emoji, .lep-emoji {
   height: var(--total-emoji-size);
   width: var(--total-emoji-size);
   overflow: hidden;
-
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji Mozilla",
-  "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
+  font-family:
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Twemoji Mozilla",
+    "Noto Color Emoji",
+    "EmojiOne Color",
+    "Android Emoji",
+    sans-serif;
 
   &:hover {
     background-color: var(--lep-hover-background-color);
   }
 
-  &:active, &.lep-active-search-item {
+  &:active,
+  &.lep-active-search-item {
     background-color: var(--lep-active-background-color);
   }
 }
@@ -114,4 +122,4 @@ input.lep-search {
   &::placeholder {
     color: var(--lep-placeholder-color);
   }
-}
+}

src/svelte/styles/global.scss

@@ -1,7 +1,9 @@
 @import './variables.scss';
 @import './resets.scss';
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -49,4 +51,4 @@
 
 .lep-not-shown {
   display: none;
-}
+}

src/svelte/styles/resets.scss

@@ -19,4 +19,4 @@
 
 .lep-picker input[type=search] {
   -webkit-appearance: none;
-}
+}

src/svelte/styles/variables.scss

@@ -36,23 +36,29 @@
   @if $dark {
     --lep-hover-background-color: #{lighten($bg, 15%)};
     --lep-active-background-color: #{lighten($bg, 20%)};
-  } @else {
+  }
+
+  @else {
     --lep-hover-background-color: #{darken($bg, 15%)};
     --lep-active-background-color: #{darken($bg, 10%)};
   }
 }
 
-:host, :host-context(lite-emoji-picker.light) {
+:host {
+  @include sizes();
+}
+
+:host,
+:host-context(lite-emoji-picker.light) {
   @include colors(false);
 }
+
 :host-context(lite-emoji-picker.dark) {
   @include colors(true);
 }
 
-:host {
-  @include sizes();
-
-  @media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
+  :host {
     @include colors(true);
   }
-}
+}