@greyskullrocks/css-modules-ts-loaderdeprecated

Drop-in replacement for css-loader to generate typings for your CSS-Modules on the fly in webpack

Usage no npm install needed!

<script type="module">
  import greyskullrocksCssModulesTsLoader from 'https://cdn.skypack.dev/@greyskullrocks/css-modules-ts-loader';
</script>

README

codecov

css-modules-ts-loader

The css-modules-ts-loader creates a .d.ts file with css classes and ids to be imported by typescript.

Getting Started

First, you'll need to install css-modules-ts-loader:

npm install --save-dev @greyskullrocks/css-modules-ts-loader

And then configure your webpack config file:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "@greyskullrocks/css-modules-ts-loader",
            options: {
              banner: "Hey, css-modules-ts-loader created this file for you!"
            }
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localsConvention: "camelCaseOnly"
            }
          }
        ],
        exclude: /\.module\.css$/
      }
    ]
  }
};

How it works?

This loader depends on css-loader and the modules option to be enabled.

Options

Name Type Default Description
banner {Boolean\|String} true Creates a message at the beginning of each generated .d.ts file.

banner

Type: {Boolean\|String} Deafault: true

Creates a message at the beginning of each generated .d.ts file. You can specify your own message by passing your own string.

License

MIT