Merge pull request #10 from willowtreeapps/fix/general-updates

general fixes for css-loader compatibility

Author: Scure21

lib/loader.js

@@ -1,6 +1,8 @@
 const path = require('path');
 const loaderUtils = require('loader-utils');
 const postcss = require('postcss');
+const normalizePath = require('normalize-path');
+const cssesc = require('cssesc');
 
 const localByDefault = require('postcss-modules-local-by-default');
 const modulesScope = require('postcss-modules-scope');
@@ -9,16 +11,30 @@ const postCssPlugins = require('./postcss-plugins');
 const extractThemeRulesPlugin = postCssPlugins.extractThemeRulesPlugin;
 const removeCssModuleExports = postCssPlugins.removeCssModuleExports;
 
-// copied from css-loader/lib/getLocalIdent.js
+// copied from css-loader/src/utils.js
 function getLocalIdent(loaderContext, localIdentName, localName, options) {
-	if(!options.context)
-		options.context = loaderContext.options && typeof loaderContext.options.context === "string" ? loaderContext.options.context : loaderContext.context;
-	var request = path.relative(options.context, loaderContext.resourcePath);
-	options.content = options.hashPrefix + request + "+" + localName;
-	localIdentName = localIdentName.replace(/\[local\]/gi, localName);
-	var hash = loaderUtils.interpolateName(loaderContext, localIdentName, options);
-	return hash.replace(new RegExp("[^a-zA-Z0-9\\-_\u00A0-\uFFFF]", "g"), "-").replace(/^([^a-zA-Z_])/, "_$1");
-};
+    if (!options.context) {
+      // eslint-disable-next-line no-param-reassign
+      options.context = loaderContext.rootContext;
+    }
+
+    const request = normalizePath(
+      path.relative(options.context || '', loaderContext.resourcePath)
+    );
+
+    // eslint-disable-next-line no-param-reassign
+    options.content = `${options.hashPrefix + request}+${unescape(localName)}`;
+
+    // Using `[path]` placeholder outputs `/` we need escape their
+    // Also directories can contains invalid characters for css we need escape their too
+    return cssesc(
+      loaderUtils
+        .interpolateName(loaderContext, localIdentName, options)
+        // For `[hash]` placeholder
+        .replace(/^((-?[0-9])|--)/, '_$1'),
+      { isIdentifier: true }
+    ).replace(/\\\[local\\\]/gi, localName);
+}
 
 
 module.exports = function (source, map) {
@@ -72,7 +88,7 @@ module.exports = function (source, map) {
                     return customGetLocalIdent(loader, localIdentName, exportName, {
                         regExp: options.localIdentRegExp,
                         hashPrefix: options.hashPrefix || '',
-                        context: loader.options.context
+                        context: loader.rootContext
                     });
                 }
             }),

package.json

@@ -28,7 +28,9 @@
   },
   "homepage": "https://github.com/willowtreeapps/css-variable-theme-webpack-plugin",
   "dependencies": {
+    "cssesc": "^3.0.0",
     "loader-utils": "^1.0.2",
+    "normalize-path": "^3.0.0",
     "postcss": "^5.2.15",
     "postcss-modules-local-by-default": "^1.1.1",
     "postcss-modules-scope": "^1.0.2"

yarn.lock

@@ -36,6 +36,10 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -78,6 +82,10 @@ loader-utils@^1.0.2:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+
 postcss-modules-local-by-default@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"