tessl/npm-typescript-plugin-css-modules

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

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-typescript-plugin-css-modules
Author: tessl

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

Capabilities

Options Interface

Main configuration interface for the TypeScript plugin.

/**
 * Main plugin configuration interface
 */
interface Options {
  /** String to append to the top of source files */
  additionalData?: string;
  /** Disables TypeScript warnings on unknown classnames */
  allowUnknownClassnames?: boolean;
  /** Class name transformation mode */
  classnameTransform?: ClassnameTransformOptions;
  /** Custom regex pattern for CSS files */
  customMatcher?: string;
  /** Path to custom CSS renderer */
  customRenderer?: string;
  /** Path to custom TypeScript template */
  customTemplate?: string;
  /** Dotenv configuration options */
  dotenvOptions?: Omit<DotenvConfigOptions, 'path'> & { path?: string };
  /** Enable jump to definition functionality */
  goToDefinition?: boolean;
  /** Enable named exports for classnames */
  namedExports?: boolean;
  /** TypeScript compatibility option */
  noUncheckedIndexedAccess?: boolean;
  /** PostCSS configuration */
  postcssOptions?: PostcssOptions;
  /** @deprecated To align with naming in other projects. */
  postCssOptions?: PostcssOptions;
  /** Renderer-specific options */
  rendererOptions?: RendererOptions;
}

Class Name Transformations

Configuration options for transforming CSS class names to match different naming conventions.

/**
 * Class name transformation options
 */
type ClassnameTransformOptions = 
  | 'asIs'          // Leave class names unchanged
  | 'camelCase'     // Add camelCase variants alongside original
  | 'camelCaseOnly' // Transform to camelCase only
  | 'dashes'        // Add dashCase variants alongside original
  | 'dashesOnly';   // Transform to dashCase only

Usage Examples:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "classnameTransform": "camelCase"
        }
      }
    ]
  }
}

With "classnameTransform": "camelCase", a CSS class .my-component becomes accessible as both styles['my-component'] and styles.myComponent.

PostCSS Configuration

Options for integrating with PostCSS configuration and plugins.

/**
 * PostCSS integration options
 */
interface PostcssOptions {
  /** Array of async plugins to exclude */
  excludePlugins?: string[];
  /** Whether to load plugins from PostCSS config */
  useConfig?: boolean;
}

Usage Examples:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "postcssOptions": {
            "useConfig": true,
            "excludePlugins": ["postcss-mixins"]
          }
        }
      }
    ]
  }
}

Renderer Options

Preprocessor-specific configuration options for CSS compilation.

/**
 * Renderer-specific options for CSS preprocessors
 */
interface RendererOptions {
  /** Less compiler options */
  less?: Partial<Less.Options>;
  /** Sass compiler options */
  sass?: Partial<SassOptions<'sync'>>;
  /** Stylus compiler options */
  stylus?: Partial<StylusRenderOptions>;
}

Usage Examples:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "rendererOptions": {
            "sass": {
              "includePaths": ["node_modules", "src/styles"]
            }
          }
        }
      }
    ]
  }
}

Custom File Matching

Configure custom patterns for identifying CSS module files.

/**
 * Custom matcher configuration
 */
interface CustomMatcherConfig {
  /** Regular expression pattern as string */
  customMatcher?: string;
}

Usage Examples:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "customMatcher": "\\.m\\.(css|scss|sass)$"
        }
      }
    ]
  }
}

The default pattern is \\.module\\.((c|le|sa|sc)ss|styl)$ which matches files like:

component.module.css
styles.module.scss
theme.module.sass
layout.module.less
animations.module.styl

Dotenv Integration

Configure environment variable loading for CSS processing.

/**
 * Dotenv configuration options
 */
interface DotenvConfig {
  /** Path to .env file (relative to project root) */
  path?: string;
  /** Additional dotenv options */
  [key: string]: any;
}

Usage Examples:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "dotenvOptions": {
            "path": ".env.local"
          }
        }
      }
    ]
  }
}

This enables loading environment variables like SASS_PATH for configuring preprocessor search paths.

Advanced Options

Additional configuration options for specialized use cases.

/**
 * Advanced configuration options
 */
interface AdvancedOptions {
  /** Enable go-to-definition for CSS classes */
  goToDefinition?: boolean;
  /** Enable named exports for compatible classnames */
  namedExports?: boolean;
  /** Allow unknown classnames without TypeScript warnings */
  allowUnknownClassnames?: boolean;
  /** Compatibility with TypeScript's noUncheckedIndexedAccess */
  noUncheckedIndexedAccess?: boolean;
  /** String to prepend to all CSS files */
  additionalData?: string;
}

Usage Examples:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "goToDefinition": true,
          "namedExports": true,
          "additionalData": "@import 'variables.scss';"
        }
      }
    ]
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-typescript-plugin-css-modules

docs

css-processing.md

file-matching.md

index.md

plugin-configuration.md

type-generation.md

tile.json

tessl/npm-typescript-plugin-css-modules