or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-processing.mdfile-matching.mdindex.mdplugin-configuration.mdtype-generation.md
tile.json

tessl/npm-typescript-plugin-css-modules

CSS modules support for TypeScript language service providing intelligent type information and auto-completion for CSS module imports

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/typescript-plugin-css-modules@5.2.x

To install, run

npx @tessl/cli install tessl/npm-typescript-plugin-css-modules@5.2.0

index.mddocs/

TypeScript Plugin CSS Modules

TypeScript Plugin CSS Modules is a TypeScript language service plugin that provides comprehensive CSS Modules support for TypeScript development environments. It enables intelligent type information, auto-completion, and go-to-definition functionality for CSS module imports, supporting multiple CSS preprocessors including SASS, SCSS, Less, and Stylus.

Package Information

  • Package Name: typescript-plugin-css-modules
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D typescript-plugin-css-modules

Core Imports

The plugin is configured in tsconfig.json rather than imported directly:

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

Note: This package is a TypeScript language service plugin and does not export types for direct import. Types are used internally by the plugin for configuration and custom renderer/template development.

Basic Usage

  1. Installation and Configuration:
npm install -D typescript-plugin-css-modules
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "classnameTransform": "camelCase",
          "customMatcher": "\\.module\\.((c|le|sa|sc)ss|styl)$"
        }
      }
    ]
  }
}
  1. Using CSS Modules in TypeScript:
// Import CSS module
import styles from './component.module.css';

// Access class names with full type safety
const className = styles.myClass;
const anotherClass = styles['my-other-class'];

// Named exports for compatible class names
import styles, { myClass } from './component.module.css';
  1. Type Declarations (if needed):
declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

Architecture

The plugin integrates with TypeScript's language service architecture through several key components:

  • Plugin Factory: Main entry point that creates the language service plugin
  • File Matchers: Regex-based system for identifying CSS module files
  • CSS Processors: Support for CSS, SCSS, Sass, Less, and Stylus compilation
  • Type Generation: Automatic TypeScript declaration generation for CSS classes
  • Module Resolution: Custom resolution logic for CSS module imports
  • Transform System: Configurable class name transformations (camelCase, dashes, etc.)
  • Custom Renderers: Extensible system for custom CSS processing pipelines

Capabilities

Plugin Configuration

Core plugin configuration interface and options for customizing CSS module processing behavior, file matching patterns, and compilation settings.

interface Options {
  additionalData?: string;
  allowUnknownClassnames?: boolean;
  classnameTransform?: ClassnameTransformOptions;
  customMatcher?: string;
  customRenderer?: string;
  customTemplate?: string;
  dotenvOptions?: Omit<DotenvConfigOptions, 'path'> & { path?: string };
  goToDefinition?: boolean;
  namedExports?: boolean;
  noUncheckedIndexedAccess?: boolean;
  postcssOptions?: PostcssOptions;
  /** @deprecated To align with naming in other projects. */
  postCssOptions?: PostcssOptions;
  rendererOptions?: RendererOptions;
}

type ClassnameTransformOptions = 
  | 'asIs' 
  | 'camelCase' 
  | 'camelCaseOnly' 
  | 'dashes' 
  | 'dashesOnly';

Plugin Configuration

CSS Processing

CSS file compilation and processing system supporting multiple preprocessors, PostCSS integration, and custom rendering pipelines.

enum FileType {
  css = 'css',
  less = 'less',
  sass = 'sass',
  scss = 'scss',
  styl = 'styl'
}

type CustomRenderer = (
  css: string,
  options: CustomRendererOptions
) => string | {
  css: string;
  sourceMap?: RawSourceMap;
};

CSS Processing

Type Generation

Automatic TypeScript declaration generation system that creates type-safe interfaces for CSS module class names and handles class name transformations.

type CustomTemplate = (
  dts: string,
  options: CustomTemplateOptions
) => string;

interface CustomTemplateOptions {
  classes: CSSExports;
  fileName: string;
  logger: Logger;
}

Type Generation

File Matching

File pattern matching system for identifying CSS module files and handling custom file extensions and naming conventions.

type isCSSFn = (fileName: string) => boolean;
type isRelativeCSSFn = (fileName: string) => boolean;

function createIsCSS(customMatcher?: RegExp): isCSSFn;
function createIsRelativeCSS(isCSS: isCSSFn): isRelativeCSSFn;

File Matching

Types

Core Configuration Types

interface PostcssOptions {
  excludePlugins?: string[];
  useConfig?: boolean;
}

interface RendererOptions {
  less?: Partial<Less.Options>;
  sass?: Partial<SassOptions<'sync'>>;
  stylus?: Partial<StylusRenderOptions>;
}

interface CustomRendererOptions {
  fileName: string;
  logger: Logger;
  compilerOptions: tsModule.CompilerOptions;
}

Logging Interface

interface Logger {
  log: (message: string) => void;
  error: (error: unknown) => void;
}

function createLogger(
  info: tsModule.server.PluginCreateInfo
): Logger;