Custom attributes setting doesn't respect media

[tmkn]

• webpack Version: 4.41.5
• style-loader Version: 1.1.13

I'm updating style-loader from 0.20.3 to 1.1.13 One of the changes I needed to do was to rename attr to attributes, however this doesn't write out the media attribute anymore (they are written out with with injectType: linkTag but not with the default setting aka injectType: styleTag ):

{ loader: 'style-loader', options: {
                                    attrs: {
                                        media: 'only screen and (max-device-width: 800px)'
                                    }
                                }
                            }

to

{ loader: 'style-loader', options: {
                                    attributes: {
                                        media: 'only screen and (max-device-width: 800px)'
                                    }
                                }
                            }

Expected Behavior

style tags contain the media attribute

Actual Behavior

style tags don't contain the media attribute

How Do We Reproduce?

use the config from above

full config:

                {
                    test: /\.less$/,
                    oneOf: [
                        {
                            resourceQuery: /mobile/,
                            use: [
                                { loader: 'style-loader', options: {
                                    attributes: {
                                        media: 'only screen and (max-device-width: 800px)'
                                    }
                                }
                            },
                            'css-loader',
                            'less-loader'
                            ]
                        },
                        {
                            resourceQuery: /tablet/,
                            use: [
                                { loader: 'style-loader', options: {
                                    attributes: {
                                        media: 'only screen and (max-device-width: 1024px)'
                                    }
                                }
                            },
                            'css-loader',
                            'less-loader'
                            ]
                        },
                        {
                            use: [
                                'style-loader',
                                'css-loader',
                                'less-loader'
                            ]
                        }
                    ],
                },

[alexander-akait]

I will fix it, but my recommendation do not use the media attribute and refactor a code base using @media {} and code splitting, in next major release setup the media attributes will has no effect