npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tchainstack/typings-for-css-modules-loader

v1.0.0

Published

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

Downloads

6

Readme

typings-for-css-modules-loader

Webpack loader that works as a css-loader drop-in replacement to generate TypeScript typings for CSS modules on the fly

Installation

Install via npm npm install --save-dev typings-for-css-modules-loader

Options

Just like any other loader you can specify options e.g. as query-params

css-loader options

Any option that your installed version of css-loader supports can be used and will be passed to it.

namedExport-option

As your fellow css-developer may tend to use characters like dashes(-) that are not valid characters for a typescript variable the default behaviour for this loader is to export an interface as the default export that contains the classnames as properties. e.g.:

export interface IExampleCss {
  'foo': string;
  'bar-baz': string;
}
declare const styles: IExampleCss;

export default styles;

A cleaner way is to expose all classes as named exports, this can be done if you enable the namedExport-option. e.g.

  { test: /\.css$/, loader: 'typings-for-css-modules-loader?modules&namedExport' }

As mentioned above, this requires classnames to only contain valid typescript characters, thus filtering out all classnames that do not match /^\w+$/i. (feel free to improve that regexp) In order to make sure that even classnames with non-legal characters are used it is highly recommended to use the camelCase-option as well, that - once passed to the css-loader - makes sure all classnames are transformed to valid variables. with:

  { test: /\.css$/, loader: 'typings-for-css-modules-loader?modules&namedExport&camelCase' }

using the following css:

.foo {
  color: white;
}

.bar-baz {
  color: green;
}

will generate the following typings file:

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

css-loader exports mappings to exports.locals which is incompatible with the namedExport-option unless paired with extract-text-webpack-plugin or style-loader. They move the exported properties from exports.locals to exports making them required for namedExport to work, and namedExport required for them to work. Always combine usage of extract-text-webpack-plugin or style-loader with the namedExport-option.

silent-option

To silence the loader because you get annoyed by its warnings or for other reasons, you can simply pass the "silent" query to the loader and it will shut up. e.g.:

  { test: /\.css$/, loader: 'typings-for-css-modules-loader?silent' }

banner-option

To add a "banner" prefix to each generated *.d.ts file, you can pass a string to this option as shown below. The prefix is quite literally prefixed into the generated file, so please ensure it conforms to the type definition syntax.

  { test: /\.css$/, loader: 'typings-for-css-modules?banner="// This file is automatically generated by typings-for-css-modules.\n// Please do not change this file!"' }

Usage

Keep your webpack.config as is just instead of using css-loader use typings-for-css-modules-loader its important you keep all the params that you used for the css-loader before, as they will be passed along in the process

before:

webpackConfig.module.loaders: [
    { test: /\.css$/, loader: 'css?modules' }
    { test: /\.scss$/, loader: 'css?modules&sass' }
];

after:

webpackConfig.module.loaders: [
    { test: /\.css$/, loader: 'typings-for-css-modules-loader?modules' }
    { test: /\.scss$/, loader: 'typings-for-css-modules-loader?modules&sass' }
];

Example

Imagine you have a file ~/my-project/src/component/MyComponent/myComponent.scss in your project with the following content:

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

Adding the typings-for-css-modules-loader will generate a file ~/my-project/src/component/MyComponent/myComponent.scss.d.ts that has the following content:

export interface IMyComponentScss {
  'some-class': string;
  'someOtherClass': string;
  'some-class-sayWhat': string;
}
declare const styles: IMyComponentScss;

export default styles;

using namedExport with the camelCase-option

Using the namedExport as well as the camelCase options the generated file will look as follow:

export const someClass: string;
export const someOtherClass: string;
export const someClassSayWhat: string;

Example in Visual Studio Code

typed-css-modules

If you encounter the following errors:

error TS1192: Module '"xxxxx/xxxx/src/style.sass"' has no default export.

maybe you should export the styles as following:

import * as styles from './style.sass';

Support

As the loader just acts as an intermediary it can handle all kind of css preprocessors (sass, scss, stylus, less, ...). The only requirement is that those preprocessors have proper webpack loaders defined - meaning they can already be loaded by webpack anyways.

Requirements

The loader uses css-loader(https://github.com/webpack/css-loader) under the hood. Thus it is a peer-dependency and the expected loader to create CSS Modules.

Known issues

Webpack rebuilds / builds slow

As the loader generates typing files, it is wise to tell webpack to ignore them. The fix is luckily very simple. Webpack ships with a "WatchIgnorePlugin" out of the box. Simply add this to your webpack plugins:

plugins: [
    new webpack.WatchIgnorePlugin([
      /css\.d\.ts$/
    ]),
    ...
  ]

where css is the file extension of your style files. If you use sass you need to put sass here instead. If you use less, stylus or any other style language use their file ending.

Typescript doesnt find the typings

As the webpack process is independent from your typescript "runtime" it may take a while for typescript to pick up the typings. Any hints on how this could be fixed deterministically are welcome!