webpack-contrib · alex-mm · Mar 17, 2017 · Apr 18, 2017 · Jul 25, 2018 · Jul 25, 2018
diff --git a/README.md b/README.md
@@ -136,7 +136,7 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 |:--:|:--:|:-----:|:----------|
 |**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
 |**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
-|**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
+|**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`, `[name]` `[version]` Can be replaced automatically|
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
 |**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
 |**`insertInto`**|`{String\|Function}`|`<head>`|Inserts `<style></style>` into the given position|
@@ -199,6 +199,7 @@ This setting is primarily used as a workaround for [css clashes](https://github.
 ### `attrs`
 
 If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
+And you can distinguish source of styles.
 
 **component.js**
 ```js
@@ -207,13 +208,22 @@ import style from './file.css'
 
 **webpack.config.js**
 ```js
+// static
 {
   test: /\.css$/,
   use: [
     { loader: 'style-loader', options: { attrs: { id: 'id' } } }
     { loader: 'css-loader' }
   ]
 }
+// replaceable
+{
+  test: /\.css$/,
+  use: [
+    { loader: 'style-loader', options: { attrs: { component: '[name]@[version]' } }
+    { loader: 'css-loader' }
+  ]
+}
 ```
 
 ```html

diff --git a/index.js b/index.js
@@ -3,9 +3,10 @@
 	Author Tobias Koppers @sokra
 */
 var path = require("path");
-
+var fs = require("fs");
 var loaderUtils = require("loader-utils");
 var validateOptions = require('schema-utils');
+var findPackage = require('./lib/utils').findPackage;
 
 module.exports = function () {};
 
@@ -14,6 +15,15 @@ module.exports.pitch = function (request) {
 
 	var options = loaderUtils.getOptions(this) || {};
 
+	var pkg = findPackage(fs, path.dirname(this.resourcePath)) || {};
+  if (options.attrs) {
+    Object.keys(options.attrs).forEach(function(key) {
+			options.attrs[key] = options.attrs[key]
+				.replace(/\[name\]/ig, pkg.name)
+				.replace(/\[version\]/ig, pkg.version);
+    });
+	}
+
 	validateOptions(require('./options.json'), options, 'Style Loader')
 
 	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;

diff --git a/lib/addStyleUrl.js b/lib/addStyleUrl.js
@@ -3,11 +3,7 @@
 	Author Tobias Koppers @sokra
 */
 
-function addAttrs (element, attrs) {
-	Object.keys(attrs).forEach(function (key) {
-		element.setAttribute(key, attrs[key]);
-	});
-}
+var addAttrs = require('./utils').addAttrs;
 
 module.exports = function addStyleUrl (url, options) {
 	if (typeof DEBUG !== "undefined" && DEBUG) {

diff --git a/lib/utils.js b/lib/utils.js
@@ -0,0 +1,40 @@
+var path = require("path");
+
+var utils = {
+  exists: function (fileSystem, filename) {
+    var exists = false;
+    try {
+      exists = fileSystem.statSync(filename).isFile();
+    } catch (err) {
+      if (err.code !== "ENOENT") throw err;
+    }
+
+    return exists;
+  },
+
+  findPackage: function (fileSystem, start) {
+    var file = path.join(start, "package.json");
+    if (utils.exists(fileSystem, file)) {
+      return require(file);
+    }
+
+    var up = path.dirname(start);
+
+    // Reached root
+    if (up !== start) {
+      return utils.findPackage(fileSystem, up);
+    }
+    return null;
+  },
+
+  addAttrs: function (element, attrs) {
+    Object.keys(attrs).forEach(function (key) {
+      element.setAttribute(key, attrs[key]);
+    });
+  },
+};
+
+module.exports = utils;
+
+
+
diff --git a/test/basic.test.js b/test/basic.test.js
@@ -226,7 +226,10 @@ describe("basic tests", function() {
 
   it("attrs", function(done) {
     // Setup
-    styleLoaderOptions.attrs = {id: 'style-tag-id'};
+    styleLoaderOptions.attrs = {
+      id: 'style-tag-id',
+      component: '[name]@[version]',
+    };
 
     fs.writeFileSync(
       rootDir + "main.js",
@@ -235,12 +238,13 @@ describe("basic tests", function() {
       ].join("\n")
     );
 
+    const { version, name } = require('../package.json');
+
     // Run
     let expected = [
       existingStyle,
-      `<style id="${styleLoaderOptions.attrs.id}" type="text/css">${requiredCss}</style>`
+      `<style id="${styleLoaderOptions.attrs.id}" component="${name}@${version}" type="text/css">${requiredCss}</style>`
     ].join("\n");
-
     runCompilerTest(expected, done);
   }); // it attrs
 

diff --git a/test/utils.test.js b/test/utils.test.js
@@ -0,0 +1,51 @@
+var assert = require("assert");
+var fs = require("fs");
+var path = require("path");
+var jsdom = require('jsdom');
+var utils = require("../lib/utils");
+
+var exists = utils.exists;
+var findPackage = utils.findPackage;
+var addAttrs = utils.addAttrs;
+
+describe('Utils Test', () => {
+  it("exist", function(done) {
+    assert.equal(exists(fs, path.join(__dirname, 'basic.test.js')), true);
+    done();
+  });
+
+  it('not exist', function(done) {
+    assert.equal(exists(fs, path.join(__dirname, 'xx.js')), false);
+    done();
+  });
+
+  it('findPackage', function(done) {
+    assert.equal(findPackage(fs, __dirname).name, 'style-loader');
+    done();
+  });
+
+  it('findPackage null', function(done) {
+    assert.equal(findPackage(fs, '/'), null);
+    done();
+  });
+
+  it('addAttrs', function(done) {
+    jsdom.env(
+      '<p></p>',
+      [],
+      function (err, window) {
+        var doc = window.document;
+        var ele = doc.createElement('div');
+        var attrs = {
+          id: 'div',
+          width: '100px'
+        };
+        addAttrs(ele, attrs);
+        assert.equal(ele.id, 'div');
+        assert.equal(ele.getAttribute('width'), '100px');
+        window.close();
+        done();
+      }
+    );
+  });
+});