Merge pull request #10 from mrcelo/feat/add-customization-options

[Feature] Add customization options

Author: GavinJoyce

README.md

@@ -27,14 +27,38 @@ module.exports = {
     // ...
   },
   plugins: [
-    require('tailwindcss-question-mark'),
+    require("tailwindcss-question-mark"),
     // ...
   ],
-}
+};
 ```
 
 ## Usage
 
 Simply add the `?` utility class to any element that you'd like to highlight.
 
-**Demo**: https://play.tailwindcss.com/fXhD65EpG4?layout=horizontal
+**Demo**: https://play.tailwindcss.com/fXhD65EpG4?layout=horizontal
+
+## Customizing
+
+Below is an example of how you can customize the plugin with the available configuration options and their defaults.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require("tailwindcss-question-mark")({
+      animationDuration: "0.6s",
+      enableAnimation: true,
+      highlightColorStart: "#f16bc9",
+      highlightColorEnd: "#f71fb6",
+      widthStart: "8px",
+      widthEnd: "12px",
+    }),
+    // ...
+  ],
+};
+```

src/index.js

@@ -1,22 +1,59 @@
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
 
-module.exports = plugin(function({ addUtilities, e }) {
-  addUtilities({
-    [`.${e('?')}`]: {
-      'outline-style': 'solid',
-      'animation': `${e('?')}wobble 0.6s ease-in-out alternate infinite`
-    },
-    [`@keyframes ${e('?')}wobble`]: {
-      '0%': {
-        'outline-width': '4px',
-        'outline-color': '#f16bc9',
-        'box-shadow': 'inset 4px 4px #f16bc9, inset -4px -4px #f16bc9'
-      },
-      '100%': {
-        'outline-width': '6px',
-        'outline-color': '#f71fb6',
-        'box-shadow': 'inset 6px 6px #f71fb6, inset -6px -6px #f71fb6'
-      },
-    }
-  });
-});
+function parsePx(input, defaultValue) {
+  let value = input.match(/\d+px/);
+  if (value) {
+    return parseInt(value[0], 10);
+  }
+  return defaultValue;
+}
+
+module.exports = plugin.withOptions(
+  ({
+    animationDuration = "0.6s",
+    enableAnimation = true,
+    highlightColorStart = "#f16bc9",
+    highlightColorEnd = "#f71fb6",
+    widthStart = "8px",
+    widthEnd = "12px",
+  } = {}) => {
+    return function ({ addUtilities, e }) {
+      const ANIMATION_NAME = "wobble";
+      const OUTLINE_STYLE = "solid";
+
+      const widthStartPx = `${parsePx(widthStart, 8) / 2}px`;
+      const widthEndPx = `${parsePx(widthEnd, 12) / 2}px`;
+
+      const boxShadowStart = `inset ${widthStartPx} ${widthStartPx} ${highlightColorStart}, inset -${widthStartPx} -${widthStartPx} ${highlightColorStart}`;
+      const boxShadowEnd = `inset ${widthEndPx} ${widthEndPx} ${highlightColorEnd}, inset -${widthEndPx} -${widthEndPx} ${highlightColorEnd}`;
+
+      const animation = enableAnimation
+        ? `${e(
+            "?"
+          )}${ANIMATION_NAME} ${animationDuration} ease-in-out alternate infinite`
+        : "none";
+
+      addUtilities({
+        [`.${e("?")}`]: {
+          "outline-style": OUTLINE_STYLE,
+          "outline-width": widthStartPx,
+          "outline-color": highlightColorStart,
+          "box-shadow": boxShadowStart,
+          animation: animation,
+        },
+        [`@keyframes ${e("?")}${ANIMATION_NAME}`]: {
+          "0%": {
+            "outline-width": widthStartPx,
+            "outline-color": highlightColorStart,
+            "box-shadow": boxShadowStart,
+          },
+          "100%": {
+            "outline-width": widthEndPx,
+            "outline-color": highlightColorEnd,
+            "box-shadow": boxShadowEnd,
+          },
+        },
+      });
+    };
+  }
+);