make work with webpack 4

.gitignore

@@ -2,3 +2,4 @@ node_modules
 lib
 bundle.js
 example*.css.d.ts
+.idea

package.json

@@ -27,27 +27,27 @@
     "css modules webpack typings"
   ],
   "dependencies": {
-    "colour": "0.7.1",
-    "graceful-fs": "4.1.4",
-    "loader-utils": "0.2.16"
+    "graceful-fs": "^4.1.15",
+    "loader-utils": "^1.1.0"
   },
   "devDependencies": {
-    "babel-cli": "6.10.1",
-    "babel-core": "~6.21.0",
-    "babel-eslint": "6.1.0",
-    "babel-loader": "~6.2.5",
-    "babel-polyfill": "~6.13.0",
-    "babel-preset-es2015": "6.9.0",
-    "babel-preset-stage-0": "6.5.0",
-    "css-loader": "~0.26.1",
-    "eslint": "2.13.1",
-    "eslint-plugin-babel": "3.3.0",
-    "ts-loader": "~0.8.2",
-    "typescript": "~1.8.10",
-    "webpack": "~1.13.2"
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^7.0.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^1.0.1",
+    "eslint": "^5.9.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "ts-loader": "~5.3.0",
+    "typescript": "~3.1.6",
+    "webpack": "~4.26.1",
+    "webpack-cli": "^3.1.2"
   },
   "peerDependencies": {
-    "css-loader": ">=0.23.1"
+    "css-loader": ">=1.0.0"
   },
   "repository": {
     "type": "git",

src/index.js

@@ -1,7 +1,6 @@
 import cssLoader from 'css-loader';
 import cssLocalsLoader from 'css-loader/locals';
 import loaderUtils from 'loader-utils';
-import 'colour';
 
 import {
   filterNonWordClasses,
@@ -24,12 +23,12 @@ module.exports = function(...input) {
   // mock async step 1 - css loader is async, we need to intercept this so we get async ourselves
   const callback = this.async();
 
-  const query = loaderUtils.parseQuery(this.query);
+  const query = this.query ? loaderUtils.parseQuery(this.query) : {};
   const logger = loggerCreator(query.silent);
 
   const moduleMode = query.modules || query.module;
   if (!moduleMode) {
-    logger('warn','Typings for CSS-Modules: option `modules` is not active - skipping extraction work...'.red);
+    logger('warn','Typings for CSS-Modules: option `modules` is not active - skipping extraction work...');
     return delegateToCssLoader(this, input, callback);
   }
 
@@ -59,17 +58,17 @@ module.exports = function(...input) {
       if (skippedDefinitions.length > 0 && !query.camelCase) {
         logger('warn', `Typings for CSS-Modules: option 'namedExport' was set but 'camelCase' for the css-loader not.
 The following classes will not be available as named exports:
-${skippedDefinitions.map(sd => ` - "${sd}"`).join('\n').red}
-`.yellow);
+${skippedDefinitions.map(sd => ` - "${sd}"`).join('\n')}
+`);
       }
 
       const [nonReservedWordDefinitions, reservedWordDefinitions,] = filterReservedWordClasses(cleanedDefinitions);
       if (reservedWordDefinitions.length > 0) {
         logger('warn', `Your css contains classes which are reserved words in JavaScript.
 Consequently the following classes will not be available as named exports:
-${reservedWordDefinitions.map(rwd => ` - "${rwd}"`).join('\n').red}
+${reservedWordDefinitions.map(rwd => ` - "${rwd}"`).join('\n')}
 These can be accessed using the object literal syntax; eg styles['delete'] instead of styles.delete.
-`.yellow);
+`);
       }
 
       cssModuleDefinition = generateNamedExports(nonReservedWordDefinitions);

test/webpack.config.babel.js

@@ -1,18 +1,21 @@
+const loader   = require.resolve('../lib/index.js');
 module.exports = {
-  entry: './test/entry.ts',
+  entry : './test/entry.ts',
   output: {
-    path: __dirname,
-    filename: 'bundle.js'
+    path    : __dirname,
+    filename: 'bundle.js',
   },
+  mode  : 'development',
   module: {
-    loaders: [
-      { test: /\.ts$/, loaders: ['babel', 'ts'] },
-      { test: /example\.css$/, loader: '../src/index.js?modules' },
-      { test: /example-camelcase\.css$/, loader: '../src/index.js?modules&camelCase' },
-      { test: /example-namedexport\.css$/, loader: '../src/index.js?modules&namedExport' },
-      { test: /example-camelcase-namedexport\.css$/, loader: '../src/index.js?modules&camelCase&namedExport' },
-      { test: /example-no-css-modules\.css$/, loader: '../src/index.js' },
-      { test: /example-compose\.css$/, loader: '../src/index.js?modules&camelCase&namedExport' }
-    ]
-  }
+
+    rules: [
+      {test: /\.ts$/, use: ['babel-loader', 'ts-loader',],},
+      {test: /example\.css$/, use: `${loader}?modules`,},
+      {test: /example-camelcase\.css$/, use: `${loader}?modules&camelCase`,},
+      {test: /example-namedexport\.css$/, use: `${loader}?modules&namedExport`,},
+      {test: /example-camelcase-namedexport\.css$/, use: `${loader}?modules&camelCase&namedExport`,},
+      {test: /example-no-css-modules\.css$/, use: loader,},
+      {test: /example-compose\.css$/, use: `${loader}?modules&camelCase&namedExport`,},
+    ],
+  },
 };