Implement Stylelint, add linting scripts, fix linting issues in scss, add missing package.json entries

Author: tim-soft

.stylelintrc.js

@@ -0,0 +1,8 @@
+/**
+ * Configure Stylint
+ *
+ * https://github.com/stylelint/stylelint-config-recommended
+ */
+module.exports = {
+  extends: ['stylelint-config-recommended']
+};

package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-dat-gui",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "dat.GUI reimagined for React",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
-  "style": "dist/index.css",
   "types": "index.d.ts",
+  "author": "Claus Wahlers <[email protected]> (https://github.com/claus)",
   "contributors": [
     {
       "name": "Claus Wahlers",
@@ -17,6 +17,11 @@
       "name": "Rohan Deshpande",
       "email": "[email protected]",
       "url": "https://github.com/rohan-deshpande"
+    },
+    {
+      "name": "Tim Ellenberger",
+      "email": "[email protected]",
+      "url": "https://github.com/tim-soft"
     }
   ],
   "license": "MIT",
@@ -28,6 +33,10 @@
     "type": "git",
     "url": "[email protected]:claus/react-dat-gui.git"
   },
+  "bugs": {
+    "url": "https://github.com/claus/react-dat-gui/issues"
+  },
+  "homepage": "https://claus.github.io/react-dat-gui/",
   "files": [
     "dist"
   ],
@@ -37,9 +46,12 @@
     "prepare": "yarn run build",
     "test": "jest",
     "test:watch": "jest --watch",
-    "dev": "npm run start --prefix dev",
+    "lint": "yarn lint-js && yarn lint-styles",
     "lint-js": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
-    "fix-js": "yarn run lint-js --fix"
+    "lint-styles": "stylelint --ignore-path .gitignore --ignore-pattern \"!**/.*\" \"./**/*.{css,less,styl,scss,sass,sss}\"",
+    "fix": "yarn fix-js && yarn fix-styles",
+    "fix-js": "yarn lint-js --fix",
+    "fix-styles": "yarn lint-styles --fix"
   },
   "husky": {
     "hooks": {
@@ -55,6 +67,10 @@
       "prettier --write",
       "eslint --no-ignore --fix",
       "git add --force"
+    ],
+    "*.{css,less,styl,scss,sass,sss}": [
+      "stylelint --fix",
+      "git add --force"
     ]
   },
   "dependencies": {
@@ -104,7 +120,9 @@
     "rollup-plugin-filesize": "^6.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-scss": "^1.0.2"
+    "rollup-plugin-scss": "^1.0.2",
+    "stylelint": "^10.1.0",
+    "stylelint-config-recommended": "^2.2.0"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",

src/style/_color.scss

@@ -26,11 +26,11 @@
   }
 
   .picker {
-    background: '#fff';
+    background: #fff;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
     box-sizing: initial;
     width: auto;
-    font-family: 'Menlo';
+    font-family: Menlo, sans-serif;
     margin-top: -3px;
 
     .body {
@@ -45,10 +45,6 @@
           .hue-wrap {
             height: 10px;
             position: relative;
-
-            .hue {
-              radius: 2px;
-            }
           }
         }
       }
@@ -59,10 +55,6 @@
       padding-bottom: 55%;
       position: relative;
       overflow: hidden;
-
-      .saturation {
-        radius: 2px 2px 0 0;
-      }
     }
   }