Registry / type-stubs / dts-css-modules-loader

dts-css-modules-loader

JSON →
library2.0.2jsnpmunverified

Webpack loader that generates TypeScript definition files (.d.ts) for CSS Modules, acting as a replacement for the abandoned typings-for-css-modules-loader. Current stable version is 2.0.2. It integrates with css-loader (v2-v7) and requires webpack 5+ (breaking change from v1). Key differentiators: lightweight, no style content modification, supports named exports and custom typings generation via callback. Release cadence is low; last update was 2023.

type-stubsdevops
package ↗
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

When namedExport is false (default), use default import. Requires a .d.ts declaration for *.scss modules.

import styles from './button.scss';

Only valid when namedExport: true is set in loader options. css-loader must use camelCase for class names.

import { button, buttonActive } from './button.scss';

Works with both namedExport: true/false. With namedExport: true, the module exports both named and default (the object). With namedExport: false, the module exports a single default object (use = styles).

import * as styles from './button.scss';

Configures webpack to use dts-css-modules-loader with named exports and css-loader camelCase convention. Imports individual class names in TypeScript.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', { loader: 'dts-css-modules-loader', options: { namedExport: true } }, { loader: 'css-loader', options: { modules: { exportLocalsConvention: 'camelCaseOnly', localIdentName: '[local]' } } }, 'sass-loader' ] } ] } }; // YourComponent.ts import { button, buttonActive } from './button.scss'; console.log(button, buttonActive);
Debug
Known footguns
breakingdts-css-modules-loader v2 requires webpack 5; it will not work with webpack 4.x.
gotchaWhen using namedExport: true, css-loader must be configured with exportLocalsConvention: 'camelCaseOnly' to avoid invalid JavaScript identifiers.
gotchaTypeScript may complain about missing module declarations for .scss files until generated .d.ts files exist.
breakingPeer dependency css-loader must be >=2.0.0; older versions are not supported.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
16 hits · last 30 days
gptbot
4
ahrefsbot
3
amazonbot
2
script
1
Resources
packagehttps://www.npmjs.com/package/dts-css-modules-loader ↗