diff --git a/README.md b/README.md index e7a5eb09..55674fc6 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,27 @@ You can use `:local(#someId)`, but this is not recommended. Use classes instead You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`). Example: `css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]` for easier debugging. +You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. Note that this requires `webpack@2` since to be able to pass function in. For example: + +```js +{ + test: /\.css$/, + loaders: [ + { + loader: 'css-loader', + query: { + modules: true, + importLoaders: 1, + getLocalIdent: function (loaderContext, localIdentName, localName, options) { + return 'whatever_random_class_name' + } + } + } + ] +}, +``` + + Note: For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings. ### CSS Modules diff --git a/lib/processCss.js b/lib/processCss.js index 3e24e31a..c6e8d102 100644 --- a/lib/processCss.js +++ b/lib/processCss.js @@ -132,7 +132,6 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) { }); module.exports = function processCss(inputSource, inputMap, options, callback) { - var query = options.query; var root = query.root; var context = query.context; @@ -141,6 +140,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { var forceMinimize = query.minimize; var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize; + var customGetLocalIdent = query.getLocalIdent || getLocalIdent; + var parserOptions = { root: root, mode: options.mode, @@ -166,8 +167,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { extractImports(), modulesValues, modulesScope({ - generateScopedName: function(exportName) { - return getLocalIdent(options.loaderContext, localIdentName, exportName, { + generateScopedName: function generateScopedName (exportName) { + return customGetLocalIdent(options.loaderContext, localIdentName, exportName, { regExp: localIdentRegExp, hashPrefix: query.hashPrefix || "", context: context diff --git a/test/customGetLocalIdentTest.js b/test/customGetLocalIdentTest.js new file mode 100644 index 00000000..ce581497 --- /dev/null +++ b/test/customGetLocalIdentTest.js @@ -0,0 +1,19 @@ +/*globals describe */ + +var testLocals = require("./helpers").testLocals; + +describe("customGetLocalIdent", function() { + testLocals("should return only locals", + ".abc :local(.def) { color: red; } :local .ghi .jkl { color: blue; }", + { + def: "foo", + ghi: "foo", + jkl: "foo" + }, + { + getLocalIdent: function () { + return 'foo' + } + } + ); +});