Checking Generated Typings of CSS Modules

15 Apr 2020 - Open Source, TypeScript, CI

As an extensive user of the typings-for-css-modules-loader Webpack loader to generate TypeScript typings from SCSS files I often missed a way to verify them in CI pipelines.

Context

When using this loader it is recommended to commit the generated typings as the Webpack process is independent of the TypeScript compiler process: sometimes, due to a race condition, TypeScript may not find the typings.

Solution

With this PR we now have the verifyOnly option to ask the loader to not emit any typings but instead to validate them: if the typings stored in the repository are missing or have changed then an error is emitted.

Usage:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "@teamsupercell/typings-for-css-modules-loader",
            options: {
              verifyOnly: process.env.NODE_ENV === "production"
            }
          },
          {
            loader: "css-loader",
            options: { modules: true }
          }
        ]
      }
    ]
  }
};

Don’t forget to upgrade if necessary: the verifyOnly option has been released with the version 2.1.1, which is already available on npm.

Thank you a lot to the maintainer of the repository for the review & its reactivity!