Files *.scss.d.ts are not regenerated / updated

[arsel-5lvxa7b1]

Hello! I am a backend dev trying to build a react app, so I don't have much frontend knowledge.

A project I'm using has this library as a dependency, and when I try to npm start or npm run build after I pulled new changes, already existing *.scss.d.ts files are not updated, resulting in errors Property ... does not exist on type .... If I delete the generated file, new file is generated with all the latest fields.

This only happens if a class in scss was added, changing styles on existing classes doesn't trigger this. I see that there's a new class in scss, but there's no new property in generated file.

Webpack config is divided into dev and prod with export default from base config.

Also, is there a way not to use these generated files in production for example?

package.json

{
  "name": "...",
  "version": "...",
  "description": "...",
  "main": "index.js",
  "scripts": {
    "test": "jest --coverage",
    "lint": "concurrently \"npm:lint:*\"",
    "lint:eslint": "eslint --ext ts,tsx .",
    "lint:prettier": "prettier --check *.*",
    "lint:packages": "npmPkgJsonLint ./package.json ./packages/*/package.json",
    "lint:frontend-stylelint": "stylelint ./**/*.scss",
    "build": "webpack --config webpack-prod.config.ts",
    "start": "webpack serve --config webpack-dev.config.ts --progress"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "",
  "dependencies": {
    "@reduxjs/toolkit": "1.8.5",
    "@types/css-minimizer-webpack-plugin": "3.0.1",
    "@types/mini-css-extract-plugin": "1.4.3",
    "@types/terser-webpack-plugin": "5.0.3",
    "class-transformer": "0.3.1",
    "class-validator": "0.12.2",
    "classnames": "2.2.6",
    "date-fns": "2.29.3",
    "dotenv": "15.0.1",
    "dotenv-flow": "3.2.0",
    "history": "5.3.0",
    "html-webpack-plugin": "5.3.1",
    "react": "18.1.0",
    "react-datepicker": "4.8.0",
    "react-dom": "18.0.0",
    "react-redux": "8.0.4",
    "react-router": "6.3.0",
    "react-router-dom": "6.3.0",
    "react-select": "5.4.0",
    "recharts": "2.1.16",
    "redux": "4.2.0",
    "redux-thunk": "2.4.1",
    "reflect-metadata": "0.1.13",
    "reselect": "4.1.6",
    "tsconfig-paths-webpack-plugin": "3.5.1",
    "typesafe-actions": "5.1.0",
    "webpack": "5.39.0",
    "webpack-merge": "5.8.0"
  },
  "devDependencies": {
    "@svgr/webpack": "5.5.0",
    "@teamsupercell/typings-for-css-modules-loader": "2.5.1",
    "@types/classnames": "2.2.10",
    "@types/dotenv-flow": "3.2.0",
    "@types/jest": "26.0.23",
    "@types/node": "14.0.27",
    "@types/react": "18.0.0",
    "@types/react-datepicker": "4.4.2",
    "@types/react-dom": "18.0.0",
    "@types/react-redux": "7.1.24",
    "@types/react-router": "5.1.8",
    "@types/react-router-dom": "5.1.5",
    "@types/sass": "1.16.0",
    "@types/webpack-dev-server": "3.11.4",
    "@types/webpack-env": "1.16.0",
    "@typescript-eslint/eslint-plugin": "4.27.0",
    "@typescript-eslint/parser": "4.27.0",
    "concurrently": "6.1.0",
    "css-loader": "5.2.6",
    "css-minimizer-webpack-plugin": "3.0.1",
    "csstype": "3.0.3",
    "eslint": "7.29.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-import-resolver-typescript": "2.4.0",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-react": "7.23.2",
    "file-loader": "6.2.0",
    "jest": "26.6.3",
    "mini-css-extract-plugin": "1.6.0",
    "npm-package-json-lint": "5.1.0",
    "postcss": "8.3.5",
    "postcss-modules": "3.2.2",
    "prettier": "2.3.0",
    "process": "0.11.10",
    "sass": "1.35.1",
    "sass-loader": "12.1.0",
    "source-map-loader": "3.0.0",
    "style-loader": "3.3.0",
    "stylelint": "13.13.1",
    "stylelint-config-prettier": "8.0.2",
    "stylelint-prettier": "1.2.0",
    "terser-webpack-plugin": "5.1.3",
    "ts-loader": "9.2.3",
    "ts-node": "9.1.1",
    "typescript": "4.3.4",
    "typings-for-css-modules-loader": "1.7.0",
    "url-loader": "4.1.1",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "3.11.2"
  },
  "stylelint": {
    "extends": "stylelint-prettier/recommended"
  },
  "npmpackagejsonlint": {
    "rules": {
      "no-repeated-dependencies": "error",
      "no-archive-dependencies": "error",
      "prefer-absolute-version-dependencies": "error",
      "no-archive-devDependencies": "error",
      "prefer-absolute-version-devDependencies": "error",
      "no-duplicate-properties": "error"
    }
  }
}

webpack config

const commonConfig: Configuration = {
  entry: "./src/index.tsx",
  target: "web",
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html")
    }),
    new ProvidePlugin({
      process: "process/browser"
    }),
    new DefinePlugin({
      // various env vars
    })
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.js.map$/,
        enforce: "pre",
        loader: "source-map-loader"
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource"
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "@svgr/webpack"
          },
          {
            loader: "file-loader"
          }
        ],
        type: "javascript/auto",
        issuer: {
          and: [/\.(ts|tsx|js|jsx|md|mdx)$/]
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: "url-loader"
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    plugins: [new TsconfigPathsPlugin()]
  }
};

export const developmentConfig: Configuration = merge(commonConfig, {
  mode: "development",
  devtool: "eval-cheap-module-source-map",
  devServer: {
    host: "0.0.0.0",
    port: Number(process.env.APP_PORT),
    hot: true,
    quiet: false,
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, "src"),
    publicPath: "/",
    disableHostCheck: true
  },
  plugins: [new HotModuleReplacementPlugin()],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          "style-loader",
          "@teamsupercell/typings-for-css-modules-loader",
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  }
});

export const productionConfig: Configuration = mergeWithRules({
  module: {
    rules: {
      test: CustomizeRule.Match,
      use: CustomizeRule.Prepend
    }
  }
})(commonConfig, {
  mode: "production",
  // yes I know this should not be here, but that's not the problem
  devServer: {
    host: "0.0.0.0",
    port: Number(process.env.APP_PORT),
    hot: false,
    quiet: true,
    historyApiFallback: false,
    contentBase: path.resolve(__dirname, "src"),
    publicPath: "/",
    disableHostCheck: true
  },
  devtool: "nosources-source-map",
  output: {
    path: path.join(__dirname, "build"),
    publicPath: "/",
    filename: "[name].[contenthash].js",
    sourceMapFilename: "[name].[contenthash].js.map"
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "@teamsupercell/typings-for-css-modules-loader",
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: true,
          output: {
            comments: false
          }
        }
      }),
      new CssMinimizerPlugin()
    ]
  }
});