Skip to content

Commit 46ebca3

Browse files
longlhosokra
authored andcommitted
expose getLocalIdent (#357)
* expose getLocalIdent * add test & docs
1 parent 564f521 commit 46ebca3

File tree

3 files changed

+44
-3
lines changed

3 files changed

+44
-3
lines changed

README.md

+21
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,27 @@ You can use `:local(#someId)`, but this is not recommended. Use classes instead
108108

109109
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.
110110

111+
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:
112+
113+
```js
114+
{
115+
test: /\.css$/,
116+
loaders: [
117+
{
118+
loader: 'css-loader',
119+
query: {
120+
modules: true,
121+
importLoaders: 1,
122+
getLocalIdent: function (loaderContext, localIdentName, localName, options) {
123+
return 'whatever_random_class_name'
124+
}
125+
}
126+
}
127+
]
128+
},
129+
```
130+
131+
111132
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.
112133

113134
### CSS Modules

lib/processCss.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
132132
});
133133

134134
module.exports = function processCss(inputSource, inputMap, options, callback) {
135-
136135
var query = options.query;
137136
var root = query.root;
138137
var context = query.context;
@@ -141,6 +140,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
141140
var forceMinimize = query.minimize;
142141
var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize;
143142

143+
var customGetLocalIdent = query.getLocalIdent || getLocalIdent;
144+
144145
var parserOptions = {
145146
root: root,
146147
mode: options.mode,
@@ -166,8 +167,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
166167
extractImports(),
167168
modulesValues,
168169
modulesScope({
169-
generateScopedName: function(exportName) {
170-
return getLocalIdent(options.loaderContext, localIdentName, exportName, {
170+
generateScopedName: function generateScopedName (exportName) {
171+
return customGetLocalIdent(options.loaderContext, localIdentName, exportName, {
171172
regExp: localIdentRegExp,
172173
hashPrefix: query.hashPrefix || "",
173174
context: context

test/customGetLocalIdentTest.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*globals describe */
2+
3+
var testLocals = require("./helpers").testLocals;
4+
5+
describe("customGetLocalIdent", function() {
6+
testLocals("should return only locals",
7+
".abc :local(.def) { color: red; } :local .ghi .jkl { color: blue; }",
8+
{
9+
def: "foo",
10+
ghi: "foo",
11+
jkl: "foo"
12+
},
13+
{
14+
getLocalIdent: function () {
15+
return 'foo'
16+
}
17+
}
18+
);
19+
});

0 commit comments

Comments
 (0)