Merge pull request TeamSupercell#20 from vhiairrassary/vhiairrassary/add-check-option

Add verifyOnly option

Author: Obi-Dann

README.md

@@ -38,11 +38,12 @@ module.exports = {
 
 ## Options
 
-|             Name              |    Type    | Description                                                                  |
-| :---------------------------: | :--------: | :--------------------------------------------------------------------------- |
-|    **[`banner`](#banner)**    | `{String}` | To add a 'banner' prefix to each generated `*.d.ts` file                     |
-| **[`formatter`](#formatter)** | `{String}` | Formats the generated `*.d.ts` file with specified formatter, eg. `prettier` |
-|       **[`eol`](#eol)**       | `{String}` | Newline character to be used in generated `*.d.ts` files                     |
+|             Name                        |    Type     | Description                                                                      |
+| :-------------------------------------: | :---------: | :------------------------------------------------------------------------------: |
+|         **[`banner`](#banner)**         | `{String}`  | To add a 'banner' prefix to each generated `*.d.ts` file                         |
+|      **[`formatter`](#formatter)**      | `{String}`  | Formats the generated `*.d.ts` file with specified formatter, eg. `prettier`     |
+|            **[`eol`](#eol)**            | `{String}`  | Newline character to be used in generated `*.d.ts` files                         |
+|     **[`verifyOnly`](#verifyOnly)**     | `{Boolean}` | Validate generated `*.d.ts` files and fail if an update is needed (useful in CI) |
 
 ### `banner`
 
@@ -103,7 +104,7 @@ module.exports = {
 
 ### `eol`
 
-"Newline character to be used in generated d.ts files. By default a value from `require('os').eol` is used.
+Newline character to be used in generated `*.d.ts` files. By default a value from `require('os').eol` is used.
 This option is ignored when [`formatter`](#formatter) `prettier` is used.
 
 ```js
@@ -130,6 +131,34 @@ module.exports = {
 };
 ```
 
+### `verifyOnly`
+
+Validate generated `*.d.ts` files and fail if an update is needed (useful in CI).
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: "@teamsupercell/typings-for-css-modules-loader",
+            options: {
+              verifyOnly: process.env.NODE_ENV === 'production'
+            }
+          },
+          {
+            loader: "css-loader",
+            options: { modules: true }
+          }
+        ]
+      }
+    ]
+  }
+};
+```
+
 ## Example
 
 Imagine you have a file `~/my-project/src/component/MyComponent/myComponent.scss` in your project with the following content:

src/index.js

@@ -6,6 +6,7 @@ const {
   generateGenericExportInterface
 } = require("./utils");
 const persist = require("./persist");
+const verify = require("./verify");
 const { getOptions } = require("loader-utils");
 const validateOptions = require("schema-utils");
 
@@ -25,6 +26,11 @@ const schema = {
       description:
         "Possible options: none and prettier (requires prettier package installed). Defaults to prettier if `prettier` module can be resolved",
       enum: ["prettier", "none"]
+    },
+    verifyOnly: {
+      description:
+        "Validate generated `*.d.ts` files and fail if an update is needed (useful in CI). Defaults to `false`",
+      type: "boolean"
     }
   },
   additionalProperties: false
@@ -74,7 +80,11 @@ module.exports = function(content, ...args) {
 
   applyFormattingAndOptions(cssModuleDefinition, options)
     .then(output => {
-      persist(cssModuleInterfaceFilename, output);
+      if (options.verifyOnly === true) {
+        return verify(cssModuleInterfaceFilename, output);
+      } else {
+        persist(cssModuleInterfaceFilename, output);
+      }
     })
     .catch(err => {
       this.emitError(err);

src/verify.js

@@ -0,0 +1,27 @@
+// @ts-check
+const fs = require('fs');
+const util = require('util');
+const fsStat = util.promisify(fs.stat);
+const fsReadFile = util.promisify(fs.readFile);
+/**
+ * @param {string} filename
+ * @param {string} content
+ * @returns {Promise<void>}
+ */
+module.exports = async (filename, content) => {
+  const fileExists = await fsStat(filename)
+    .then(() => true).catch(() => false);
+
+  if (!fileExists) {
+    throw new Error(`Verification failed: Generated typings for css-module file '${filename}' is not found. ` +
+      "It typically happens when the generated typings were not committed.");
+  }
+
+  const existingFileContent = await fsReadFile(filename, 'utf-8');
+
+  // let's not fail the build if there are whitespace changes only
+  if (existingFileContent.replace(/\s+/g, "") !== content.replace(/\s+/g, "")) {
+    throw new Error(`Verification failed: Generated typings for css-modules file '${filename}' is out of date. ` +
+      "It typically happens when the up-to-date generated typings are not committed.");
+  }
+};

test/index.test.js

@@ -6,6 +6,7 @@ const memoryfs = require("memory-fs");
 
 beforeEach(() => {
   jest.mock("../src/persist");
+  jest.mock("../src/verify");
 });
 
 it("default options", async () => {
@@ -14,6 +15,9 @@ it("default options", async () => {
   const persisteMock = jest.requireMock("../src/persist");
   expect(persisteMock).toBeCalledTimes(1);
   expect(persisteMock.mock.calls[0][1]).toMatchSnapshot();
+
+  const verifyMock = jest.requireMock("../src/verify");
+  expect(verifyMock).toBeCalledTimes(0);
 });
 
 it("with sourcemap", async () => {
@@ -99,6 +103,20 @@ it("with banner", async () => {
   expect(persisteMock.mock.calls[0][1]).toMatchSnapshot();
 });
 
+it("with verify only", async () => {
+  await runTest({
+    options: {
+      verifyOnly: true
+    }
+  });
+
+  const persisteMock = jest.requireMock("../src/persist");
+  expect(persisteMock).toBeCalledTimes(0);
+
+  const verifyMock = jest.requireMock("../src/verify");
+  expect(verifyMock).toBeCalledTimes(1);
+});
+
 async function runTest({ options = {}, cssLoaderOptions = {} } = {}) {
   const compiler = webpack({
     entry: path.resolve(__dirname, "./example.css"),