Throw an error if defined after the styled-components plugin

[TrevorBurnham]

When the styled-components Babel plugin runs, it replaces TaggedTemplateExpressions with CallExpressions, making this plugin a no-op. The README briefly mentions this ordering issue:

Add the plugin to your Babel configuration before the styled-components plugin…

But enforcing that directive through code is much better! 😁

[nvanselow]

This is great! I very much agree that codifying these types of errors is much better than only documentation. Great find on that pre API.

[nvanselow]

I think we can simplify this down by using find instead of forEach. A side effect of that would be a slightly optimized search as we can abort as soon as we find this plugin and it is before the styled-components plugin.

E.g., (psuedo-code ish)

let styledComponentsPluginIndex = -1;
plugins.find(([plugin], index) => {
   if(plugin.key === 'styled-components') {
     styledComponentsPluginIndex = index;
     return false;
  }

  if(plugin.pre === pre) {
    if(styledComponentsPluginIndex >= 0) {
     throw new Error('...');
   }
   
   return true;
  }
});

Although, seeing that written out, your original may be slightly more readable. It's a toss up, so either way.

[TrevorBurnham]

Sure, using find makes sense: 4a6a656