make typings-for-css-modules-loader compatible with css-loader >= 1.0.0 + webpack 4

[piscis]

I'm trying to integrate typings-for-css-modules-loader into a webpack 4 build together with sass-loader. I noticed that my build works with css-loader but of course no typings get generated.

How ever when I replace css-loader with typings-for-css-modules-loader typings get generated but I end up with errors down the line in style-loader that my sass files are invalid. (see below)

Here are my storybook 4 webpack configs:

working webpack config:

const pluginConf = [
  {
    loader: MiniCssExtractPlugin.loader,
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: true,
      root: path.resolve(__dirname, '..', 'src'),
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        autoprefixer({
          'browsers': ['last 2 versions', 'ie >= 10'],
        }),
      ],
      sourceMap: true,
    },
  },
  {
    loader: 'resolve-url-loader'
  },
  {
      loader: "sass-loader",
      options:
      {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:20]'
      }
  }
];

// .....

defaultConfig.module.rules.push({
    test: /\.(sa|sc|c)ss$/,
    use: pluginConf,
    include: path.resolve(__dirname, "../src/app"),
    exclude: [
      path.resolve(__dirname, "../node_modules")
	]
});

none working webpack config:

const pluginConf = [
  {
    loader: MiniCssExtractPlugin.loader,
  },
  {
    loader: 'typings-for-css-modules-loader',
    options:
    {
        importLoaders: 1,
        modules: true,
        namedExport: true,
        camelCase: true,
        sourceMap: true,
        localIdentName: '[name]_[local][hash:base64:5]',
        banner: "// *** Generated File - Do not Edit ***"
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        autoprefixer({
          'browsers': ['last 2 versions', 'ie >= 10'],
        }),
      ],
      sourceMap: true,
    },
  },
  {
    loader: 'resolve-url-loader'
  },
  {
      loader: "sass-loader",
      options:
      {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:20]'
      }
  }
];

// .....

defaultConfig.module.rules.push({
    test: /\.(sa|sc|c)ss$/,
    use: pluginConf,
    include: path.resolve(__dirname, "../src/app"),
    exclude: [
      path.resolve(__dirname, "../node_modules")
     ]
});

**Stacktrace: (and many more) **

ERROR in ./src/app/components/Base/Headline/styles.sass (./node_modules/css-loader??ref--10-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/typings-for-css-modules-loader/lib??ref--12-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--12-4!./src/app/components/Base/Headline/styles.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  text-transform: uppercase
              ^
      Invalid CSS after "module.exports": expected selector, was '= {"headline":"styl'
      in /path/to/project/src/app/components/Base/Headline/styles.sass (line 2, column 16)
 @ ./src/app/components/Base/Headline/styles.sass 2:14-554 21:1-42:3 22:19-559
 @ ./src/app/components/Base/Headline/index.tsx
 @ ./src/app/components/Base/index.ts
 @ ./src/app/stories/Base/Headline.stories.tsx
 @ ./src/app/stories sync \.stories\.(js|tsx|ts|jsx)$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

I noticed that starting with css-loader 1.x are some breaking changes.
for example:

• remove minimize option, use postcss-loader with cssnano or use optimize-cssnano-plugin plugin
• remove module option, use modules option instead
• remove camelcase option, use camelCase option instead
• remove root option, use postcss-loader with postcss-url plugin
• remove alias option, use resolve.alias feature or use postcss-loader with postcss-url plugin
• update postcss to 6 version
• minimum require nodejs version is 6.9
• minimum require webpack version is 4

package.json

{
  "name": "the-project-name",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.4.0",
    "@material-ui/icons": "^3.0.1",
    "async": "^2.6.1",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "chroma-js": "^1.4.0",
    "classnames": "^2.2.6",
    "core-js": "^2.5.7",
    "formik": "^1.2.0",
    "global": "^4.3.2",
    "immutable": "^3.8.2",
    "lodash": "^4.17.11",
    "material-design-icons": "^3.0.1",
    "mobx": "^5.6.0",
    "mobx-react": "^5.3.6",
    "mobx-state-tree": "^3.7.1",
    "raf": "^3.4.1",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-resize-detector": "^3.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.1.1",
    "spinkit": "^1.2.5",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "@babel/core": "7.1.0",
    "@svgr/webpack": "2.4.1",
    "@types/jest": "23.3.9",
    "@types/node": "10.12.5",
    "@types/react": "16.7.3",
    "@types/react-dom": "16.0.9",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.2.3",
    "babel-preset-react-app": "^6.1.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.5",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.6.1",
    "react-app-polyfill": "^0.1.3",
    "react-dev-utils": "^6.1.1",
    "react-dom": "^16.6.1",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "typescript": "3.1.6",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3",
    "@babel/polyfill": "^7.0.0",
    "@storybook/addon-a11y": "^4.0.4",
    "@storybook/addon-actions": "^4.0.4",
    "@storybook/addon-backgrounds": "^4.0.4",
    "@storybook/addon-centered": "^4.0.4",
    "@storybook/addon-events": "^4.0.4",
    "@storybook/addon-info": "^4.0.4",
    "@storybook/addon-jest": "^4.0.4",
    "@storybook/addon-knobs": "^4.0.4",
    "@storybook/addon-links": "^4.0.4",
    "@storybook/addon-notes": "^4.0.4",
    "@storybook/addon-options": "^4.0.4",
    "@storybook/addon-storyshots": "^4.0.4",
    "@storybook/addon-viewport": "^4.0.4",
    "@storybook/addons": "^4.0.4",
    "@storybook/client-logger": "^4.0.4",
    "@storybook/react": "^4.0.4",
    "@types/async": "^2.0.50",
    "@types/classnames": "^2.2.6",
    "@types/enzyme": "^3.1.15",
    "@types/lodash": "^4.14.118",
    "@types/react-resize-detector": "^3.1.0",
    "@types/react-router": "^4.4.1",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-select": "^2.0.6",
    "@types/react-swipeable": "^4.2.1",
    "@types/react-test-renderer": "^16.0.3",
    "@types/storybook__react": "^4.0.0",
    "@types/yup": "^0.26.1",
    "autoprefixer": "^9.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "axios-mock-adapter": "^1.15.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^23.2.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "cache-loader": "^1.2.5",
    "canvas": "^2.1.0",
    "deploy-to-git": "^0.1.5",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
    "enzyme-to-json": "^3.3.4",
    "http-parser-js": "^0.5.0",
    "http-proxy-middleware": "^0.19.0",
    "imports-loader": "^0.8.0",
    "install": "^0.12.2",
    "node-sass": "^4.10.0",
    "normalize.css": "^8.0.1",
    "npm": "^6.4.1",
    "npm-check": "^5.9.0",
    "object-assign": "4.1.1",
    "promise": "^8.0.2",
    "react-scripts": "^2.1.1",
    "react-scripts-ts": "^4.0.8",
    "react-test-renderer": "^16.6.1",
    "resolve-url-loader": "^3.0.0",
    "rimraf": "^2.6.2",
    "source-map-explorer": "^1.5.0",
    "source-map-loader": "^0.2.1",
    "sw-precache-webpack-plugin": "^0.11.5",
    "thread-loader": "^1.2.0",
    "ts-jest": "^23.10.4",
    "ts-loader": "^5.3.0",
    "tslint": "^5.11.0",
    "tslint-config-prettier": "^1.10.0",
    "tslint-react": "^3.6.0",
    "typescript-babel-jest": "^1.0.5",
    "typings-for-css-modules-loader": "^1.7.0",
    "whatwg-fetch": "^3.0.0",
    "worker-loader": "^2.0.0"
  }
}