Introduce stylelint

Author: stklcode

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}

package.json

@@ -44,6 +44,9 @@
     "minify": "^15.2.0",
     "prettier": "^3.8.1",
     "sass": "^1.98.0",
+    "stylelint": "^17.5.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
     "terser": "^5.46.1"
   },
   "scripts": {
@@ -52,7 +55,9 @@
     "build:scripts": "terser -o dist/chartist-plugin-tooltip.js src/scripts/chartist-plugin-tooltip.js",
     "build:styles": "sass --no-source-map --style compressed src/styles:dist",
     "format": "prettier --write 'src/**/*.js'",
-    "lint": "eslint 'src/scripts/**/*.js'",
+    "lint": "yarn lint:scripts && yarn lint:styles",
+    "lint:scripts": "eslint 'src/scripts/**/*.js'",
+    "lint:styles": "stylelint 'src/styles/**/*.scss'",
     "prepare": "yarn build"
   },
   "license": "MIT"

src/styles/chartist-plugin-tooltip.scss

@@ -1,23 +1,22 @@
-$chart-tooltip-bg: #F4C63D;
-$chart-tooltip-color: #453D3F;
+$chart-tooltip-bg: #f4c63d;
+$chart-tooltip-color: #453d3f;
+
 .chartist-tooltip {
   position: absolute;
   display: inline-block;
   opacity: 0;
   min-width: 5em;
-  padding: .5em;
+  padding: 0.5em;
   background: $chart-tooltip-bg;
   color: $chart-tooltip-color;
   font-family: Oxygen, Helvetica, Arial, sans-serif;
   font-weight: 700;
   text-align: center;
   pointer-events: none;
   z-index: 1;
-  -webkit-transition: opacity .2s linear;
-  -moz-transition: opacity .2s linear;
-  -o-transition: opacity .2s linear;
-  transition: opacity .2s linear;
-  &:before {
+  transition: opacity 0.2s linear;
+
+  &::before {
     content: "";
     position: absolute;
     top: 100%;
@@ -28,11 +27,13 @@ $chart-tooltip-color: #453D3F;
     border: 15px solid transparent;
     border-top-color: $chart-tooltip-bg;
   }
+
   &.tooltip-show {
     opacity: 1;
   }
 }
 
-.ct-area, .ct-line {
+.ct-area,
+.ct-line {
   pointer-events: none;
 }