feat: add custom attrs to <style></style>

[ywmail]

What kind of change does this PR introduce?

feature

Did you add tests for your changes? Yes

If relevant, did you update the README? Yes

Summary with webpack configuration

        {
          test: /\.css$/,
          use: [{
            loader: 'vue-style-loader',
            options: {
              attributes: {
                'test-attr': 'foo'
              }
            }
          }, 'css-loader']
        },

will result in

<style type="text/css" test-attr="foo">
}
</style>

Does this PR introduce a breaking change?

No

UPDATE change attrs to attributes for [email protected] has been updated.

[yyx990803]

What's the use case for this?

[ywmail]

Our app has a dynamic route to load asynchronous components(thousands) which are built in a separated project. The async component will inject style tags to head when loaded, we want to clear the style tags injected by the async component when the route changes, so we need an identifier to know which tags are injected by async components.

The webpack style-loader now supports this feature. see: https://github.com/webpack-contrib/style-loader#options

Name	Type	Default	Description
attributes	{Object}	{}	Add custom attributes to

[yyx990803]

Why do you need to remove the style tags? Is it causing performance issues?

[ywmail]

Because some async components add global styles(without scoped), when the route changes, I want to remove the side effects(global styles) when loading another async component.

[slengyel-lnx]

This feature is also needed in one of the projects I am working on.

We have an app which is creating a sourceless Iframe. The styles are being injected to the root document head but we would need them to be injected inside the iframe since vue components lives inside of it. By adding attrs: option to vue-style-loader it would be easy to identify the injected styles by class or other attributes.

Going further it would be even better to have an option insertInto just like webpack style-loader has it.

[transcranial]

This would also be useful for adding nonce for CSP: https://github.com/vuejs/vue-style-loader/issues/33

[ywmail]

I've updated the PR by changing attrs to attributes.

[hulkyhawk]

@yyx990803 i need to add attribute to target the style when changing theme colors

[mixaDev]

I also need supported attributes.

I am writing a library with css variable support, using https://github.com/jhildenbiddle/css-vars-ponyfill

cssVars ({
   include: 'style[data-only-my-lib]'
});

[mrswylet]

I also need to be supported attributes.

I want to find marked styles in a head and inject the styles in shadowDom

[predam]

I also need this feature.

[RavishMan]

Please do add this

[mwahlhuetter]

Any news on this?