Add css-loader 4 support

Fixes #33
Adding duplicate tests for css-loader@3 to ensure we're backward compatible

Author: Obi-Dann

package-lock.json

@@ -27,7 +27,8 @@
   },
   "devDependencies": {
     "@types/jest": "^24.0.23",
-    "css-loader": "^3.1.0",
+    "css-loader": "*",
+    "css-loader3": "npm:css-loader@^3.1.0",
     "eslint": "4.18.2",
     "eslint-config-prettier": "^6.0.0",
     "jest": "^24.9.0",

package.json

@@ -37,7 +37,7 @@ const schema = {
         "Validate generated `*.d.ts` files and fail if an update is needed (useful in CI). Defaults to `false`",
       type: "boolean"
     }
-  },
+    },
   additionalProperties: false
 };
 
@@ -48,7 +48,7 @@ const configuration = {
 };
 
 /** @type {((this: import('webpack').loader.LoaderContext, ...args: any[]) => void) & {pitch?: import('webpack').loader.Loader['pitch']}} */
-module.exports = function(content, ...args) {
+module.exports = function (content, ...args) {
   const options = getOptions(this) || {};
 
   validateOptions(schema, options, configuration);
@@ -58,9 +58,12 @@ module.exports = function(content, ...args) {
   }
 
   // let's only check `exports.locals` for keys to avoid getting keys from the sourcemap when it's enabled
-  const cssModuleKeys = getCssModuleKeys(
-    content.substring(content.indexOf("exports.locals"))
-  );
+  // if we cannot find locals, then the module only contains global styles
+  const indexOfLocals = content.indexOf(".locals");
+  const cssModuleKeys =
+    indexOfLocals === -1
+      ? []
+      : getCssModuleKeys(content.substring(indexOfLocals));
 
   /** @type {any} */
   const callback = this.async();

src/index.js

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`default options 1`] = `
+exports[`css-loader@3 default options 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     \\"bar-baz\\": string;
@@ -18,7 +18,7 @@ export = ExampleCssModule;
 "
 `;
 
-exports[`localsConvention asIs 1`] = `
+exports[`css-loader@3 localsConvention asIs 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     \\"bar-baz\\": string;
@@ -36,7 +36,7 @@ export = ExampleCssModule;
 "
 `;
 
-exports[`localsConvention camelCase 1`] = `
+exports[`css-loader@3 localsConvention camelCase 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     \\"bar-baz\\": string;
@@ -55,7 +55,7 @@ export = ExampleCssModule;
 "
 `;
 
-exports[`with banner 1`] = `
+exports[`css-loader@3 with banner 1`] = `
 "// autogenerated by typings-for-css-modules-loader
 declare namespace ExampleCssNamespace {
   export interface IExampleCss {
@@ -74,7 +74,7 @@ export = ExampleCssModule;
 "
 `;
 
-exports[`with locals export disabled 1`] = `
+exports[`css-loader@3 with locals export disabled 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     \\"bar-baz\\": string;
@@ -89,7 +89,7 @@ export = ExampleCssModule;
 "
 `;
 
-exports[`with no formatter 1`] = `
+exports[`css-loader@3 with no formatter 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     'bar-baz': string;
@@ -106,7 +106,7 @@ declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
 export = ExampleCssModule;"
 `;
 
-exports[`with prettier 1`] = `
+exports[`css-loader@3 with prettier 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     \\"bar-baz\\": string;
@@ -124,7 +124,149 @@ export = ExampleCssModule;
 "
 `;
 
-exports[`with sourcemap 1`] = `
+exports[`css-loader@3 with sourcemap 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest default options 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest localsConvention asIs 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest localsConvention camelCase 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    barBaz: string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest with banner 1`] = `
+"// autogenerated by typings-for-css-modules-loader
+declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest with locals export disabled 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss;
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest with no formatter 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    'bar-baz': string;
+    'composed': string;
+    'foo': string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;"
+`;
+
+exports[`css-loader@latest with prettier 1`] = `
+"declare namespace ExampleCssNamespace {
+  export interface IExampleCss {
+    \\"bar-baz\\": string;
+    composed: string;
+    foo: string;
+  }
+}
+
+declare const ExampleCssModule: ExampleCssNamespace.IExampleCss & {
+  /** WARNING: Only available when \`css-loader\` is used without \`style-loader\` or \`mini-css-extract-plugin\` */
+  locals: ExampleCssNamespace.IExampleCss;
+};
+
+export = ExampleCssModule;
+"
+`;
+
+exports[`css-loader@latest with sourcemap 1`] = `
 "declare namespace ExampleCssNamespace {
   export interface IExampleCss {
     \\"bar-baz\\": string;

test/__snapshots__/index.test.js.snap

@@ -0,0 +1,3 @@
+div {
+  background: red;
+}