CtrlK
BlogDocsLog inGet started
Tessl Logo

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
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/typescript-plugin-css-modules@5.2.x
Publish Source
CLI
Badge
tessl/npm-typescript-plugin-css-modules badge