feat: option to filter style tags from callback

[Kapcash]

I needed a way to write multiple <style> tags on my components, but to only apply (i.e. bundle) them conditionally.

The feature I was looking for

This is a dummy example, just here to illustrate.

Let's say the style depends on the current season:

<template>
  <p>Hello vue-loader team!</p>
</template>

<style scoped theme="winter">
  p { color: cyan; }
</style>

<style scoped theme="corporate">
  p { color: orange; } 
</style>

And we select the correct style tag depending on an environment variable (process.env.theme === 'summer').

I know there are other way to achieve the same thing, but it looked more elegant this way, and it may reduce the bundle size at the end, compared to the others solutions I came up with:

• using css preprocessor conditions: painful to maintain, bad code readability
• css variables: not fully supported by IE
• Load different css file according the condition result: can't use scoped style, so overriding css is painful to write

Usage example

{
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
      filterStyleTag: ({ theme }) => {
         return theme === process.env.theme
      }
   }
}

We can declare a new option with a callback that take the inner "query" parsed from the style tag.
It is supposed to be used like the Array.prototype.filter method: return true to keep the style tag. false will ignore the style tag.

Let me know what you think!
Is it a bad idea to do something like this? Will it break anything I didn't see? Can my feature be improved?

[Kapcash]

I typed it as an Object even though it is a ParsedUrlQuery internally (users don't need to know its real interface in my opinion, but it is poorly typed with just object).
I'm opened to types suggestions here!