teamsupercell / typings-for-css-modules-loader Goto Github PK

When chained after css-loader 6.x with options.esModule: true (the default), and options.modules.namedExport: true (not the default), typings-for-css-modules-loader dies on this line, since it does not find exports.locals in the emitted source:

Getting error using the loader is this a known issue?

CssSyntaxError

(1:1) Unknown word

Now that typings-for-css-modules-loader (in this fork) requires most configuration to lie on css-loader, I'm hitting an issue that namedExport is not a supported option in css-loader, see https://github.com/webpack-contrib/css-loader/issues/509. My current setup generates *.d.ts files in a form of:

export const myClass: string;
export const anotherClass: string;
export const yetAnotherClass: string;

Using this fork, the only thing I can achieve is:

export interface IMyStylesScss {
  myClass: string;
  anotherClass: string;
  yetAnotherClass: string;
}

export const locals: IMyStylesScss;
export default locals;

This is quite a big breaking change from what we had before. Is there any way to make it work with existing setup without major changes to the codebase?

Thanks for this project, it works great and is amazingly useful.

I noticed that type files are being generated for scss files loaded from libraries under node_modules, and being written to the library folder. This seems like a bad idea since these files aren't committed. In my case it meant that one of our commit checks passed on my machine but failed on the server, since the type files didn't exist there.

I think it would be best to avoid writing to node_modules by default.

Hi-

First of all, thanks for the fork - it is very helpful to have an active repo for this.

Question:

Am I supposed to check in the generated typings file to source control?

There is this issue in the old repo: Jimdo/typings-for-css-modules-loader#79 (comment)
And without checking in the typings files, the same issue will happen.

Is there any known issues with checking in the typings file?

Expect:

.foo {
  color: white;
}

.bar-baz {
  color: green;
}

export const foo: string;
export const barBaz: string;

This library, typings-for-css-modules-loader, currently has a dependency on loader-utils version 1.2.3 specifically, which has a critical-severity vulnerability:

• https://nvd.nist.gov/vuln/detail/CVE-2022-37601
• webpack/loader-utils#212

Please update the dependency to address this critical vulnerability that is being flagged in Dependabot alerts of projects that depend on typings-for-css-modules-loader

I am following the example in the readme:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader",
          "@teamsupercell/typings-for-css-modules-loader",
          {
            loader: "css-loader",
            options: { modules: true }
          }
        ]
      }
    ]
  }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": [
      "dom",
      "esnext"
    ],
    "jsx": "react",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "build",
    "removeComments": true,
    "noEmitOnError": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules"],
  "include": ["src"]
}

App.tsx

import React from 'react';

import TodoList from './components/TodoList';
import NewTodo from './components/NewTodo';
import styles from './assets/styles/index.css';  // unable to read this file


const App: React.FC = () => {
  const todos = [{ id: 't1', text: 'React Course' }]
  console.log(styles);

  return (
    <div className="App">
      <NewTodo />
      <TodoList items={todos} />
      <div className={styles.boots}>here</div>
    </div>
  );
};


export default App;

I keep getting this typescript error:

Cannot find module './assets/styles/index.css' or its corresponding type declarations.ts(2307)

Any thoughts on this?

After upgrading to [email protected], it seems that I'm generating properties in my *.d.ts files from my *.scss file AND a source map file. The latter is an assumption due to what comes up in the list, { file, mappings, names, sources, sourcesContent, version, ...cssClasses }.

config

{
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: '@teamsupercell/typings-for-css-modules-loader',
            options: {
                banner:
                    '// generated by packages/components/.storybook/main.js\n\n',
            },
        },
        {
            loader: 'css-loader',
            options: {
                modules: {
                    auto: true,
                    exportLocalsConvention: 'camelCaseOnly',
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            },
        },
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: () => [postcssPresetEnv()],
            },
        },
        'sass-loader',
    ],
}

Expected behaviour:
Only CSS classes from a .scss file should be generated as types.

css-loader has an option modules, when it is set to true, only files match /\.module\.\w+$/i.test(filename) will be treated as CSS modules, but typings-for-css-modules-loader cannot filtering files like css-loader, is it possible to add support for this feature? Thanks in advance.

Thank you for bringing this package up to the latest version!

While working with this package, I found several issues that can be clarified in the documentation:

• This package no longer replaces css-loader, but it has to be added after css-loader
• There's mentioned of peer dependency to css-loader, but due to the requirement above, this is no longer relevant
• css-loader will need to be configured to output CSS Modules (e.g. options: { modules: true; })

Hi, thanks for this plugin. My question is whether it is possible to drop non-camelCased types from the generated files?

E.g. this CSS

.nav-breadcrumb {}

produces the following types

declare namespace HeaderModuleScssNamespace {
  export interface IHeaderModuleScss {
    'nav-breadcrumb': string;
    navBreadcrumb: string;
  }
}

So I now have a choice when use the class names whether I want to use camelCase or dashed-case name. I'd like to eliminate this choice and keep only the camelCased version.

example syntax from here

.some-class {
  // some styles
  &.someOtherClass {
    // some other styles
  }
  &-sayWhat {
    // more styles
  }
}

produces this

// ...
"someClass-sayWhat": string
// ...

which is not camel case.

Hello,

Thanks for taking over this project - I have a project template for React projects that depended on its predecessor and its nice to see someone picked it up.

Anyways, I've updated all deps (npx npm-check-updates -u && npm install) and after a bit of a configuration update The only error I'm getting that's preventing my compilation from completing successfully is:

ERROR in ./src/components/NodeKitCore/styles.scss (./node_modules/@teamsupercell/typings-for-css-modules-loader/src/index.js??ruleSet[1].rules[5].use[1]!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[3]!./src/components/NodeKitCore/styles.scss) 10:13
Module parse failed: Unexpected token (10:13)
File was processed with these loaders:
 * ./node_modules/@teamsupercell/typings-for-css-modules-loader/src/index.js
 * ./node_modules/css-loader/dist/cjs.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| export const standard = "_1FcZ2DoWKoMNzwvFsPE8n5";
| export const titleCapture = "_17mdMcJ5k7O5pYNkH6zUEi";
> export const +fullHeight = "_9aH9R-E-_bPyqa-v7dM67";
| export const +inverseColors = "_3Ur4Mt3ewSPWrwd_rncbkO";
| export const +flex = "_2AQUPgQwN28XGDEtM17H7A";
 @ ./src/components/NodeKitCore/styles.scss 2:12-306 9:17-24 13:15-29
 @ ./src/components/NodeKitCore/index.ts 12:15-39
 @ ./src/containers/App/App.tsx 18:22-61
 @ ./src/containers/App/index.ts 14:12-28
 @ ./src/app.tsx 15:14-41

I'd bother posting the source files, but I can just tell you that in a scss file somewhere along the way I have:

&.\+full-height {
        height: 100%;
    }

And according to the error, what's happening is that @teamsupercell/typings-for-css-modules-loader is attempting to create the export: export const +fullHeight = "_9a...";.

This is causing an error of course.

• I'm leveraging the exportsLocalConvention: "camelCaseOnly" and namedExports: true options in css-loader.

Any idea on how I can get around this error? Could you ensure that named exports will generate only codeSafeNames ( String.replace() any special chars not allowed in variable names) in a subsequent release?

I might very well compile a pull request myself - but if this is a simple enough fix for you I'd imagine being the one to have been maintaining the plug-in you know exactly where to implement said check.

If I'm off about who's to blame for the issue please let me know . Thanks!

Thanks for this project, it works great and is amazingly useful.

One improvement would be an option to specify the output directory. I like to keep my generated files in a separate folder.

Thanks!
Phil

Thanks for supporting this library, I am facing issues integrating it with less and the latest version for loaders, I tried different setups but only this managed to "work" (kinda)

I got the following setup:

package.json

{
    "@teamsupercell/typings-for-css-modules-loader": "2.0.0",
    "css-loader": "3.2.0",
    "less-loader": "5.0.0",
    "style-loader": "1.0.0",
    "ts-loader": "6.1.0",
    "typescript": "3.6.3",
    "url-loader": "2.1.0",
    "webpack": "4.40.2",
    "webpack-dev-server": "3.8.0"
  }

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["node_modules/@types", "./typings"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

webpack.config.js

{
        test: /\.(less)$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: { modules: true },
          },
          {
            loader: '@teamsupercell/typings-for-css-modules-loader',
          },
          { loader: 'less-loader', options: { sourceMap: true } },
        ],
}

less/components/logo.less

.logo {
  background-color: red;
  width: 100px;
  height: 100px;
}

After running webpack in dev it generates the logo.d.ts file that contents:

export interface ILogoLess {
    logo: string
}

export const locals: ILogoLess
export default locals

I tried importing the styles in several ways but this is the only one that "seems to work":

import * as styles from '../../less/component/logo.less' // {logo: "_3_lAqxKX6-Al3YE3MgBx_J"}

This works on the DOM, but I get the error:

TS2339: Property 'logo' does not exist on type 'typeof import(".../less/component/logo.less")'.

I dont know how to fix this, I tried several times now

Originally posted by @CoericK in #7 (comment)

The generated d.ts files contain the following:

{
  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
  locals: AnimalScssNamespace.IAnimalScss;
};

As stated, this code is not always useful.
In this case, it takes space and complexifies the type readability.

It would be great to add an option to disable the generation of this code.

Hello, I have a project that is run using create-react-app and customize-cra, here is what I do in my config-overrides.js

  addWebpackModuleRule({
    test: /\.scss$/i,
    use: [
      "style-loader",
      {
        loader: "@teamsupercell/typings-for-css-modules-loader",
        options: {
          banner:
            "// autogenerated by typings-for-css-modules-loader. \n// Please do not change this file!"
        }
      },
      {
        loader: "css-loader",
        options: { modules: true }
      },
      "sass-loader"
    ]
  }),

The issue that I'm having is that if the types are only getting generated if I do this:

import './colors.scss';

and not if i do:

import {background} from './colors.scss';
OR 
import styles from './colors.scss';

I feel like I must be missing something obvious... any help would be appreciated :)

I'm trying to import bootstrap in the following way:

.my-class {
    :global {
        @import "~bootstrap/scss/bootstrap";
    }
}

I'm getting the following error:

Error: Missing whitespace after :global

I tried to import separate bootstrap internal modules and the problem seems to be with forms:

.my-class {
    :global {
        @import "~bootstrap/scss/functions";
        @import "~bootstrap/scss/variables";
        @import "~bootstrap/scss/mixins";
        @import "~bootstrap/scss/forms"; /* error here */
        ...
    }
}

I'm using boostrap 4.6.0, typings-for-css-modules-loader 2.4.0, css-loader 5.1.3.

Hello. I noticed all style definitions is packed in bundle.js and appears in my html as inline styles.

Is there a way to receive styles in separated bundle or event better .css files ?

In my webpack config:

test: /\.s[ac]ss$/,
use: [
    "style-loader",
    '@teamsupercell/typings-for-css-modules-loader',
    {
        loader: "css-loader",
        options: {
            modules: true,
        }
    },
    "sass-loader"
]

Hello, @Obi-Dann , while deploying my project which located in /var/www/projectName/deployer/releases/RELEASE_NUMBER i'm getting this error.

Owner of folder /var/www/projectName and /var/www is different. But i can't understand why typings-for-css-modules-loader need to access files that out of my project folder.

I implemented the style-loader and css-loader combo as seen in this example: https://github.com/webpack-contrib/style-loader#modules

// styles.css
.foo-baz {
  color: red;
}
.bar {
  color: blue;
}

// index.js
import { fooBaz, bar } from './styles.css';
console.log(fooBaz, bar);

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              esModule: true,
              modules: {
                namedExport: true,
              },
            },
          },
          {
            loader: 'css-loader',
            options: {
              esModule: true,
              modules: {
                namedExport: true,
                //exportLocalsConvention: 'camelCaseOnly'  -- default when namedExport is true
              },
            },
          },
        ],
      },
    ],
  },
};

By default, using the namedExport in css-loader automatically sets the exportLocalsConvention: 'camelCaseOnly’. Note the css class foo-baz in the styles.css file and how it is imported in the index.js file (.foo-baz, fooBaz)

Applying typings-for-css-modules-loader to the webpack configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              esModule: true,
              modules: {
                namedExport: true,
              },
            },
          },
          {loader: '@teamsupercell/typings-for-css-modules-loader'},
          {
            loader: 'css-loader',
            options: {
              esModule: true,
              modules: {
                namedExport: true,
                //exportLocalsConvention: 'camelCaseOnly'  -- default when namedExport is true
              },
            },
          },
        ],
      },
    ],
  },
};

The following error shows up

ERROR in [at-loader] ./index.tsx:5:10
    TS2305: Module '"./styles.css"' has no exported member 'fooBaz'.

What is the configuration missing to enable typings-for-css-modules-loader to work with the default camelCasing? Is this something the generated *.d.ts* files need to adjust for?

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?

{
  "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"
    }
  }
}

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()
    ]
  }
});

Hi guys,
I'am working on a Chrome extension and I'm trying to inject style in a DOM element created in the injection script. When I trying to access to the style, webpack return me only the identification.

This is my styles.css file

.editor { position: fixed !important; width: 364px !important; height: 735px !important; top: -17px !important; right: -17px !important; z-index: 2147483647 !important; border-width: initial !important; border-style: none !important; border-color: initial !important; border-image: initial !important; background-color: grey !important; }

This is my webpack.config.js

I import the script in this way:
import { locals } from "./config/styles.css";

If I try to print the content: console.log(locals.editor) the output is: editor: "Yg12g2sN0qvycR0iIliqg" and the DOM element doesn't have the style.

Where is the problem?

Thank you very much!

Is it possible to do something like this?

import styles from './styles.module.scss'

styles['somedynamicindex']

Getting this error

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IIconModuleScss'.
  No index signature with a parameter of type 'string' was found on type 'IIconModuleScss'.

We have encountered an issue with CSS modules that don't contain any "default" classes but include :root pseudo-class. For example for declarations.scss file with the following content:

:root { --background: green; }

the build result is:

Adding any "default" class to this file solves the problem.

It looks like this no longer functions under css-loader v5. It doesn't produce an error, but no .d.ts file is generated

Hello there,

My typescript compiler is babel and using babel plugin-transform-typescript. I believe changes on this #14 would effect babel loader and started get error above.

Babel clearly warned that export = can't work for them.
https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats

I'd like to make PR for it but want to ask your opinion because you've recently removed it and introduce export = style.

What do you suggest to change? I am more than happy to contribute.
(maybe pass loader as parameter and change export expression accordingly?)

How do I go to the scss file when ctrl-click/F12 ?
It navigates me to the definition file...
Maybe some tsconfig special...
Tried "declarationMap": true,
Didn't help

Does it work for you fine?

It would be great to use a different name for the namespace and const.
They conflict when a linter checks for no-redeclare.

When you have a file like _react_date_picker.scss it generated an invalid TypeScript interface type. The recommended eslint rules for TypeScript enforce pascal case names for types.

I had moved to this package from original Jimdo/typings-for-css-modules-loader and got an error

 Module Error (from ../node_modules/@teamsupercell/typings-for-css-modules-loader/src/index.js):
    Unterminated string literal. (3:7)
      1 | declare namespace IndexStylModule {
      2 |   export interface IIndexStyl {
    > 3 |     ';
        |       ^
      4 | var exports = ___CSS_LOADER_API_IMPORT___(false);
      5 | // Module
      6 | exports.push([module.id, ': string;

My loaders config was

const loaders = [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {…},
    },
    {
        loader: '@teamsupercell/typings-for-css-modules-loader',
        options: {…}
    },
    {
        loader: 'css-loader',
        options: {…}
    }
]

I spend a day to find a solution and the trick was in the order of loaders. typings-for-css-modules-loader should be last in order:

const loaders = [
    {
        loader: '@teamsupercell/typings-for-css-modules-loader',
        options: {…}
    },
    {
        loader: MiniCssExtractPlugin.loader,
        options: {…},
    },
    {
        loader: 'css-loader',
        options: {…}
    }
]

Please add in readme this solution.

I have keyframes in scss file, which are used for transition value. When I generate definition for this scss file, the keyframe is also exported as variable.

Sample code:

@keyframes pathAnimation {
    0% {
        stroke-dasharray: 200 0;
        stroke-width: 25;
    }
    99% {
        stroke-dasharray: 0 200;
        stroke-width: 25;
    }
    100% {
        stroke-dasharray: 0 200;
        stroke-width: 0;
    }
}

.shrinkArc {
    stroke-width: 0;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation: pathAnimation 2s linear;
}

Generated definition file has pathAnimation in it.

The project I am working on uses eslint for formatting. Would it be possible to add in support for the formatter option to use eslint?

Any idea how to make this loader work with nextjs?

I tried the following in next.config.js based on the old example from https://github.com/vercel/next.js/pull/9910/files

const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");

module.exports = withCss(
  withSass({
    cssModules: true,
    webpack(config, options) {
      if (!options.isServer) {
        options.defaultLoaders.sass = [
          options.defaultLoaders.sass[0],
          options.defaultLoaders.sass[1],
          "@teamsupercell/typings-for-css-modules-loader",
          options.defaultLoaders.sass[2],
          options.defaultLoaders.sass[3],
        ];
        console.log(options.defaultLoaders.sass);
      }
      return config;
    },
  })
);

The console.log gives me this:

  'extracted-loader',
  '/path/to/my_app/node_modules/mini-css-extract-plugin/dist/loader.js',
  '@teamsupercell/typings-for-css-modules-loader',
  {
    loader: 'css-loader',
    options: {
      modules: true,
      minimize: false,
      sourceMap: true,
      importLoaders: 1
    }
  },
  { loader: 'sass-loader', options: {} }
]

But it does not generate any typings for my scss files.

I will be happy to push a reproduction repo if anyone wants to help.