Make styles overridable (#36)

* Make styles overridable

* Move styles to CSS file

* Add CSS linter

* Update chromedriver to version used in CI

.release-it.json

@@ -6,6 +6,8 @@
   "github": {
     "release": true,
     "assets": [
+      "mathquill4quill.css",
+      "build/mathquill4quill.min.css",
       "build/mathquill4quill.js",
       "build/mathquill4quill.min.js"
     ],

.stylelintrc.js

@@ -0,0 +1,5 @@
+/* eslint-env node */
+
+module.exports = {
+  extends: "stylelint-config-standard"
+};

README.md

@@ -17,7 +17,7 @@ This module adds support for rich math authoring to the [Quill](http://quilljs.c
 
 ### Plain Javascript
 
-This module depends on [MathQuill](http://docs.mathquill.com/en/latest/Getting_Started/), [Quill](https://quilljs.com/docs/quickstart/) and [KaTeX](https://github.com/Khan/KaTeX#usage), so you'll need to add references to their JS and CSS files in addition to adding a reference to `mathquill4quill.js`. Official builds as well as minified assets can be found on the [releases page](https://github.com/c-w/mathquill4quill/releases).
+This module depends on [MathQuill](http://docs.mathquill.com/en/latest/Getting_Started/), [Quill](https://quilljs.com/docs/quickstart/) and [KaTeX](https://github.com/Khan/KaTeX#usage), so you'll need to add references to their JS and CSS files in addition to adding a reference to `mathquill4quill.js` and `mathquill4quill.css`. Official builds as well as minified assets can be found on the [releases page](https://github.com/c-w/mathquill4quill/releases).
 
 Next, initialize your Quill object and load the formula module:
 

index.html

@@ -20,6 +20,7 @@
 
     <!-- mathquill4quill include -->
     <script src="mathquill4quill.js"></script>
+    <link rel="stylesheet" href="mathquill4quill.css">
 
     <!-- demo page -->
     <link rel="stylesheet" href="index.css">

mathquill4quill.css

@@ -0,0 +1,30 @@
+.mathquill4quill-mathquill-input {
+  border: 1px solid #ccc;
+  font-size: 13px;
+  min-height: 26px;
+  margin: 0;
+  padding: 3px 5px;
+  width: 170px;
+}
+
+.mathquill4quill-operator-button {
+  margin: 5px;
+  width: 50px;
+  height: 50px;
+  background-color: #fff;
+  border-color: #000;
+  border-radius: 7px;
+  border-width: 2px;
+}
+
+.mathquill4quill-operator-container {
+  display: flex;
+  align-items: center;
+}
+
+.mathquill4quill-latex-input {
+  visibility: hidden !important;
+  padding: 0 !important;
+  border: 0 !important;
+  width: 0 !important;
+}

mathquill4quill.js

@@ -90,19 +90,11 @@ window.mathquill4quill = function(dependencies) {
       let latexInputStyle = null;
 
       function applyMathquillInputStyles(mqInput) {
-        mqInput.style.border = "1px solid #ccc";
-        mqInput.style.fontSize = "13px";
-        mqInput.style.minHeight = "26px";
-        mqInput.style.margin = "0px";
-        mqInput.style.padding = "3px 5px";
-        mqInput.style.width = "170px";
+        mqInput.setAttribute("class", "mathquill4quill-mathquill-input");
       }
 
       function applyLatexInputStyles(latexInput) {
-        latexInput.setAttribute(
-          "style",
-          "visibility:hidden;padding:0px;border:0px;width:0px;"
-        );
+        latexInput.setAttribute("class", "mathquill4quill-latex-input");
       }
 
       function syncMathquillToQuill(latexInput, saveButton) {
@@ -178,18 +170,11 @@ window.mathquill4quill = function(dependencies) {
       let container = null;
 
       function applyOperatorButtonStyles(button) {
-        button.style.margin = "5px";
-        button.style.width = "50px";
-        button.style.height = "50px";
-        button.style.backgroundColor = "#ffffff";
-        button.style.borderColor = "#000000";
-        button.style.borderRadius = "7px";
-        button.style.borderWidth = "2px";
+        button.setAttribute("class", "mathquill4quill-operator-button");
       }
 
       function applyOperatorContainerStyles(container) {
-        container.style.display = "flex";
-        container.style.alignItems = "center";
+        container.setAttribute("class", "mathquill4quill-operator-container");
       }
 
       function createOperatorButton(element, mqField) {

package.json

@@ -5,20 +5,23 @@
     "release": "release-it",
     "start": "reload --port 8080 --browser --dir .",
     "lint.js": "eslint --ext js .",
+    "lint.css": "stylelint \"*.css\"",
     "lint.prettier": "prettier --check \"**/*.js\"",
-    "lint": "run-s lint.js lint.prettier",
+    "lint": "run-s lint.js lint.css lint.prettier",
     "prebuild": "mkdirp build",
     "build.babel": "babel mathquill4quill.js > build/mathquill4quill.js",
     "build.uglify": "uglifyjs --compress --mangle -- build/mathquill4quill.js > build/mathquill4quill.min.js",
-    "build": "run-s build.babel build.uglify",
+    "build.csso": "csso --input mathquill4quill.css --output build/mathquill4quill.min.css",
+    "build": "run-s build.babel build.uglify build.csso",
     "test": "concurrently --kill-others --success first \"serve -n -l 8000\" \"nightwatch -e chrome tests\""
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
-    "chromedriver": "^78.0.0",
+    "chromedriver": "^80.0.0",
     "concurrently": "^4.1.1",
+    "csso-cli": "^3.0.0",
     "eslint": "^5.16.0",
     "mkdirp": "^0.5.1",
     "nightwatch": "^1.1.12",
@@ -27,6 +30,8 @@
     "release-it": "^12.4.3",
     "reload": "^3.0.1",
     "serve": "^11.0.2",
+    "stylelint": "^13.2.0",
+    "stylelint-config-standard": "^20.0.0",
     "uglify-js": "^3.6.0"
   },
   "repository": {
@@ -35,7 +40,9 @@
   },
   "version": "1.0.2",
   "files": [
+    "build/mathquill4quill.min.css",
     "build/mathquill4quill.min.js",
+    "mathquill4quill.css",
     "mathquill4quill.js"
   ],
   "publishConfig": {