[Feature] Add customization options

[mrcelo]

This PR adds customization options with original defaults (#1):

• animationDuration
• animationName
• boxShadowInsetStart
• boxShadowInsetEnd
• highlightColor
• outlineWidthStart
• outlineWidthEnd
• outlineStyle
• enableAnimation

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-question-mark')({
      highlightColor: 'red',
      outlineStyle: 'dashed',
      enableAnimation: false,
    }),
  ],
}

[GavinJoyce]

Thanks for the PR @mrcelo.

I wonder if we need all of these to be configurable? If we avoid exposing anything about box shadow or outline, we give ourselves the option of changing how this plugin works internally in future.

Perhaps these are the important ones?

• color
• widthStart & widthEnd (perhaps these would default to 8px and 12px?)
• enableAnimation
• animationDuration

What do you think?

[mrcelo]

Those are all great suggestions, thanks for pointing that out. I've gone ahead and implemented these changes (and put a few constants in).

For my use case, 8px and 12px for the widths are a bit too much, but of course that's exactly the point of this PR! 😄

Let me know if LGTY. Thanks!

[GavinJoyce]

So that the inset and outline are symmetrical, perhaps we should use widthStart and widthEnd for both?

If widthStart is 8px, we could apply 4px to both the inset and the outline. We'd need to do a little parsing of the string, but it might make for a nice api

What do you think?

[GavinJoyce]

Something like this?

function parsePx(input, defaultValue) {
  let value = input.match(/^\d+px$/);
  if (value) {
    return parseInt(value[0], 10);
  }
  return defaultValue;
}

[mrcelo]

Absolutely, that's a great idea. Small nitpick, but perhaps the regex /\d+px/ would better approximate browser behavior when parsing the CSS value (i.e. ignoring whitespaces or chars before or after the px substring). Would it be worth it to sanitize this far? How does that sound?

[GavinJoyce]

Sounds good, thanks

[GavinJoyce]

This is really great, thanks!

[GavinJoyce]

https://github.com/GavinJoyce/tailwindcss-question-mark/releases/tag/0.4.0