Add ID's to <style> tags

[alex-mm]

Why ?

I have many components. And I can not use 'ExtractTextPlugin' for special reasons.

I would like to distinguish which component and the version number to use.

How ?

I found the attrs

require('style-loader?{attrs:{id: "style-tag-id"}}!style.css');

But the information of the component can only be obtained in the compilation of each file.

So

I would like to make this change in 'style-loader/index.js'.

	var findPackage = require('find-package');
        ...
	if(this.cacheable) this.cacheable();
	var query = loaderUtils.getOptions(this) || {};
	var pkg = findPackage(this.resourcePath) || {};
	if (query.attrs) {
		Object.keys(query.attrs).forEach(function(key) {
			query.attrs[key] = query.attrs[key].replace(/\[name\]/ig, pkg.name).replace(/\[version\]/ig, pkg.version);
		});
	}
        return ...

Then

I use it like this

require('style-loader?{attrs:{component: "[name]@[version]"}}!style.css');

The result:

If it is acceptable ? Or is there any other solution?

Fork: https://github.com/alex-mm/style-loader/blob/master/index.js#L7-L17

[michael-ciniawsky]

@alex-mm What's the particular usecase for this in terms of development ? 😛

[alex-mm]

@michael-ciniawsky

It is mainly to help developers identify which components and versions.

When the dependent components are many, there are some common dependencies, especially when the dependent version is different, there will be style coverage problems, it is difficult to find which component is wrong version, there will also be repeated insert the situation, you are It is hard to see which component is repeated.

By adding the information on the 'attr', you can clearly find out the problem.

By making the private package, we've done it, it's really useful.

[francoismassart]

I would appreciate it too.

It is kind of frustrating to be able to add only "static values" to the attributes of the injected <style> elements...

[michael-ciniawsky]

We could maybe include the filename as attribute, but I'm still not really convinced by the idea. If this is really wanted someone feel free/please open a PR for further discussion

[budarin]

It might help you to remove stylesheet by id in unuse()/unref()

[kimown]

Really need this feature, like webpackChunkName, so we can distinguish source of styles.