Refactor options and upgrade dependencies

Author: mrmckeb

README.md

@@ -69,15 +69,15 @@ const b = styles['my_other-class'];
 
 Please note that no options are required. However, depending on your configuration, you may need to customise these options.
 
-| Option                        | Default value                      | Description                                                                  |
-| ----------------------------- | ---------------------------------- | ---------------------------------------------------------------------------- |
-| `classnameTransform`          | `asIs`                             | See [`classnameTransform`](#classnameTransform) below.                       |
-| `customMatcher`               | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes.                      |
-| `customRenderer`              | `false`                            | See [`customRenderer`](#customRenderer) below.                               |
-| `customTypescriptTransformer` | `false`                            | See [`customTypescriptTransformer`](#customTypescriptTransformer) below.     |
-| `dotenvOptions`               | `{}`                               | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
-| `postCssOptions`              | `{}`                               | See [`postCssOptions`](#postCssOptions) below.                               |
-| `rendererOptions`             | `{}`                               | See [`rendererOptions`](#rendererOptions) below.                             |
+| Option               | Default value                      | Description                                                                  |
+| -------------------- | ---------------------------------- | ---------------------------------------------------------------------------- |
+| `classnameTransform` | `asIs`                             | See [`classnameTransform`](#classnameTransform) below.                       |
+| `customMatcher`      | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes.                      |
+| `customRenderer`     | `false`                            | See [`customRenderer`](#customRenderer) below.                               |
+| `customTemplate`     | `false`                            | See [`customTemplate`](#customTemplate) below.                               |
+| `dotenvOptions`      | `{}`                               | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
+| `postCssOptions`     | `{}`                               | See [`postCssOptions`](#postCssOptions) below.                               |
+| `rendererOptions`    | `{}`                               | See [`rendererOptions`](#rendererOptions) below.                             |
 
 ```json
 {
@@ -118,7 +118,7 @@ The custom renderer itself should be a JavaScript file. The function will be cal
 ```js
 module.exports = (css, { fileName, logger }) => {
   try {
-    // ...process css here
+    // ...process css here.s
     return renderedCss;
   } catch (error) {
     logger.error(error.message);
@@ -130,32 +130,32 @@ You can find an example custom renderer in our test fixtures ([`customRenderer.j
 
 The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
 
-#### `customTypescriptTransformer`
+#### `customTemplate`
 
-The `customTypescriptTransformer` is an advanced option, letting you provide a transformer of the generated typescript declarations.
+The `customTemplate` is an advanced option, letting you provide a template for the generated TypeScript declarations.
 
-When a custom typescript transformer is provided, its output is used as the virtual typescript file.
+When a custom template is provided, its output is used as the virtual declaration (`*.d.ts`) file.
 
-The path to the `customTypescriptTransformer` must be relative to the project root (i.e. `./myTypescriptTransformer.js`).
+The path to the `customTemplate` must be relative to the project root (i.e. `./customTemplate.js`).
 
 The custom renderer itself should be a JavaScript file. The function will be called with two arguments: a `dts` string, and an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L43-L52)). It must be synchronous, and must return valid TypeScript Declaration code (code found in a .d.ts file only).
 
 ```js
 module.exports = (dts, { classes, fileName, logger }) => {
   try {
-    // ...transform the dts here
-    return transformedDts;
+    // ...create your template here.
+    return customTemplate;
   } catch (error) {
     logger.error(error.message);
   }
 };
 ```
 
-You can find an example custom typescript transformer in our test fixtures ([`customTypescriptTransformer.js`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/__tests__/fixtures/customTypescriptTransformer.js)).
+You can find an example custom template in our test fixtures ([`customTemplate.js`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/__tests__/fixtures/customTemplate.js)).
 
 The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
 
-The `classes` object represents all the classnames extracted form the CSS Module. They are available if you want to add a custom representation of the CSS classes.
+The `classes` object represents all the classnames extracted from the CSS Module. They are available if you want to add a custom representation of the CSS classes.
 
 #### `postCssOptions`
 
@@ -199,7 +199,7 @@ If your project doesn't already have global declarations for CSS Modules, you wi
 
 Where you store global declarations is up to you. An example might look like: `./src/custom.d.ts`.
 
-The below is an example that you can copy or modify. If you use a [`customMatcher`], you'll need to modify this.
+The below is an example that you can copy or modify. If you use a `customMatcher`, you'll need to modify this.
 
 ```ts
 declare module '*.module.css' {

package.json

@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "build": "rm -rf ./lib && tsc",
-    "lint": "eslint './src/**/*.ts' --max-warnings 0 && yarn prettier './**/*.{json,md,ts,yml}' -c",
+    "lint": "eslint './src/**/*.{js,ts}' --max-warnings 0 && yarn prettier './**/*.{json,md,js,ts,yml}' -c",
     "prepublishOnly": "yarn build",
     "test": "jest ./src"
   },
@@ -64,42 +64,42 @@
     "trailingComma": "all"
   },
   "resolutions": {
-    "postcss": "7.0.23"
+    "postcss": "7.0.27"
   },
   "dependencies": {
     "dotenv": "^8.2.0",
     "icss-utils": "^4.1.1",
-    "less": "^3.9.0",
+    "less": "^3.11.1",
     "lodash.camelcase": "^4.3.0",
-    "postcss": "^7.0.23",
+    "postcss": "^7.0.27",
     "postcss-filter-plugins": "^3.0.1",
     "postcss-icss-selectors": "^2.0.3",
     "postcss-load-config": "^2.1.0",
     "reserved-words": "^0.1.2",
-    "sass": "^1.23.7"
+    "sass": "^1.26.1"
   },
   "devDependencies": {
     "@types/icss-utils": "^4.1.0",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^25.1.3",
     "@types/less": "^3.0.1",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/node": "^12.12.17",
     "@types/postcss-load-config": "^2.0.1",
     "@types/postcss-nested": "^4.1.0",
     "@types/reserved-words": "^0.1.0",
     "@types/sass": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
+    "@typescript-eslint/eslint-plugin": "^2.21.0",
+    "@typescript-eslint/parser": "^2.21.0",
     "bootstrap": "4.4.1",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.7.0",
-    "husky": "^3.1.0",
-    "jest": "^24.8.0",
-    "lint-staged": "^9.5.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "husky": "^4.2.3",
+    "jest": "^25.1.0",
+    "lint-staged": "^10.0.8",
     "postcss-import-sync2": "^1.1.0",
     "prettier": "^1.19.1",
-    "ts-jest": "^24.2.0",
-    "typescript": "^3.7.3"
+    "ts-jest": "^25.2.1",
+    "typescript": "^3.8.2"
   },
   "peerDependencies": {
     "typescript": "^3.0.0"

src/helpers/__tests__/fixtures/customTemplate.js

@@ -0,0 +1,9 @@
+module.exports = (dts, { classes, logger }) => {
+  logger.log('Example log');
+  return [
+    '/* eslint-disable */',
+    dts,
+    'export const __cssModule: true;',
+    `export type AllClassNames = '${Object.keys(classes).join("' | '")}';`,
+  ].join('\n');
+};

src/helpers/__tests__/fixtures/customTypescriptTransformer.js

@@ -21,35 +21,35 @@ const testFileNames = [
   'import.module.less',
 ];
 
-const mockLogger: Logger = {
+const logger: Logger = {
   log: jest.fn(),
   error: jest.fn(),
 };
 
-const mockOptions: Options = {};
+const options: Options = {};
 
 const processor = postcss([
   postcssImportSync(),
   postcssIcssSelectors({ mode: 'local' }),
 ]);
 
 describe('utils / cssSnapshots', () => {
-  testFileNames.forEach((fileName) => {
+  testFileNames.forEach((testFile) => {
     let classes: CSSExports;
-    const fullFileName = join(__dirname, 'fixtures', fileName);
-    const testFile = readFileSync(fullFileName, 'utf8');
+    const fileName = join(__dirname, 'fixtures', testFile);
+    const css = readFileSync(fileName, 'utf8');
 
     beforeAll(() => {
-      classes = getClasses(
+      classes = getClasses({
+        css,
+        fileName,
+        logger,
+        options,
         processor,
-        testFile,
-        fullFileName,
-        mockOptions,
-        mockLogger,
-      );
+      });
     });
 
-    describe(`with file '${fileName}'`, () => {
+    describe(`with file '${testFile}'`, () => {
       describe('getClasses', () => {
         it('should return an object matching expected CSS', () => {
           expect(classes).toMatchSnapshot();
@@ -58,88 +58,94 @@ describe('utils / cssSnapshots', () => {
 
       describe('createExports', () => {
         it('should create an exports file', () => {
-          const exports = createExports(classes, {}, fullFileName, mockLogger);
+          const exports = createExports({
+            classes,
+            fileName,
+            logger,
+            options: {},
+          });
           expect(exports).toMatchSnapshot();
         });
       });
 
       describe('with a custom typescript transformer', () => {
         it('should transform the generated dts', () => {
-          const customTypescriptTransformer = join(
+          const customTemplate = join(
             __dirname,
             'fixtures',
-            'customTypescriptTransformer.js',
+            'customTemplate.js',
           );
-          const overrideOptions: Options = { customTypescriptTransformer };
 
-          const dts = createExports(
+          const options: Options = { customTemplate };
+
+          const dts = createExports({
             classes,
-            overrideOptions,
-            fullFileName,
-            mockLogger,
-          );
+            fileName,
+            logger,
+            options,
+          });
           expect(dts).toMatchSnapshot();
         });
       });
     });
   });
 
   describe('with a Bootstrap import', () => {
-    const fullFileName = join(__dirname, 'fixtures', 'bootstrap.module.scss');
-    const testFile = readFileSync(fullFileName, 'utf8');
+    const fileName = join(__dirname, 'fixtures', 'bootstrap.module.scss');
+    const css = readFileSync(fileName, 'utf8');
 
     it('should find external files', () => {
-      const classes = getClasses(
+      const classes = getClasses({
+        css,
+        fileName,
+        logger,
+        options,
         processor,
-        testFile,
-        fullFileName,
-        mockOptions,
-        mockLogger,
-      );
+      });
 
       expect(classes.test).toMatchSnapshot();
     });
   });
 
   describe('with a custom renderer', () => {
-    const fullFileName = 'exampleFileContents';
-    const testFile = 'exampleFileName';
+    const fileName = 'exampleFileContents';
+    const css = 'exampleFileName';
     const customRenderer = join(__dirname, 'fixtures', 'customRenderer.js');
 
+    const options: Options = { customRenderer };
+
     it('should process a file and log', () => {
-      const classes = getClasses(
+      const classes = getClasses({
+        css,
+        fileName,
+        logger,
+        options,
         processor,
-        testFile,
-        fullFileName,
-        { customRenderer },
-        mockLogger,
-      );
+      });
 
       expect(classes).toMatchSnapshot();
-      expect(mockLogger.log).toHaveBeenCalledWith('Example log');
+      expect(logger.log).toHaveBeenCalledWith('Example log');
     });
   });
 
   describe('with includePaths in sass options', () => {
-    const fullFileName = join(
-      __dirname,
-      'fixtures',
-      'include-path.module.scss',
-    );
-    const testFile = readFileSync(fullFileName, 'utf8');
+    const fileName = join(__dirname, 'fixtures', 'include-path.module.scss');
+    const css = readFileSync(fileName, 'utf8');
+
+    const options: Options = {
+      rendererOptions: {
+        sass: { includePaths: [join(__dirname, 'external')] },
+      },
+    };
 
     it('should find external file from includePaths', () => {
-      const classes = getClasses(
+      const classes = getClasses({
+        css,
+        fileName,
+        logger,
+        options,
         processor,
-        testFile,
-        fullFileName,
-        {
-          rendererOptions: {
-            sass: { includePaths: [join(__dirname, 'external')] },
-          },
-        },
-        mockLogger,
-      );
+      });
 
       expect(classes).toMatchSnapshot();
     });