From 167cf53c45618dc3b42ad7e84e2e7b983f3452b8 Mon Sep 17 00:00:00 2001 From: Long Ho Date: Sun, 9 Oct 2016 23:35:55 -0400 Subject: [PATCH 1/2] expose getLocalIdent --- README.md | 2 ++ lib/processCss.js | 21 ++++++++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e7a5eb09..5153d714 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,8 @@ 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` to generate classname based on a different schema. + 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..b05ea982 100644 --- a/lib/processCss.js +++ b/lib/processCss.js @@ -15,6 +15,15 @@ var modulesScope = require("postcss-modules-scope"); var modulesValues = require("postcss-modules-values"); var cssnano = require("cssnano"); +function isModulePath (path) { + try { + require.resolve(path); + return true; + } catch (e) { + return false; + } +} + var parserPlugin = postcss.plugin("css-loader-parser", function(options) { return function(css) { var imports = {}; @@ -132,7 +141,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 +149,13 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { var forceMinimize = query.minimize; var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize; + var customGetLocalIdent = query.getLocalIdent; + if (typeof customGetLocalIdent === 'string' && isModulePath(customGetLocalIdent)) { + customGetLocalIdent = require(customGetLocalIdent); + } else { + customGetLocalIdent = getLocalIdent + } + var parserOptions = { root: root, mode: options.mode, @@ -166,8 +181,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 From b54c4f643c7a81dba2af01f88253ea1e6c906676 Mon Sep 17 00:00:00 2001 From: Long Ho Date: Thu, 17 Nov 2016 09:23:51 -0500 Subject: [PATCH 2/2] add test & docs --- README.md | 21 ++++++++++++++++++++- lib/processCss.js | 18 ++---------------- test/customGetLocalIdentTest.js | 19 +++++++++++++++++++ 3 files changed, 41 insertions(+), 17 deletions(-) create mode 100644 test/customGetLocalIdentTest.js diff --git a/README.md b/README.md index 5153d714..55674fc6 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,26 @@ 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` to generate classname based on a different schema. +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. diff --git a/lib/processCss.js b/lib/processCss.js index b05ea982..c6e8d102 100644 --- a/lib/processCss.js +++ b/lib/processCss.js @@ -15,15 +15,6 @@ var modulesScope = require("postcss-modules-scope"); var modulesValues = require("postcss-modules-values"); var cssnano = require("cssnano"); -function isModulePath (path) { - try { - require.resolve(path); - return true; - } catch (e) { - return false; - } -} - var parserPlugin = postcss.plugin("css-loader-parser", function(options) { return function(css) { var imports = {}; @@ -149,13 +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; - if (typeof customGetLocalIdent === 'string' && isModulePath(customGetLocalIdent)) { - customGetLocalIdent = require(customGetLocalIdent); - } else { - customGetLocalIdent = getLocalIdent - } - + var customGetLocalIdent = query.getLocalIdent || getLocalIdent; + var parserOptions = { root: root, mode: options.mode, 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' + } + } + ); +});