typescript-plugin-css-module-types

TS Types for CSS Modules

This Typescript plugin hooks itself into the Typescript Language Service to provide intellisense and validation for SCSS imports as CSS Modules.

It supports .module.scss imports containing valid SCSS code.

Features

The following SCSS (and CSS Modules) feature are supported:

// :global and :local identifier and functions 
:global .global-class { }
:global(.global-class) { }
:local .local-class { }
:local(.local-class) { }
 
// Variables 
$color: red;
.className {
  color: $color;
}
 
// Loops 
$color: red;
@for $section from 1 to 5 {
    .section-#{$section} {
        color: $color;
    }
}

Also imports are supported.
As of now there's also a limited path-resolution support to allow module imports.

@import "./relative/path/some/file";
 
@import "absolute/path/some/file";

Thanks

Thanks to Microsoft and their nice Language-Service-Plugin documentation.

• motivated by facebook/create-react-app#5677
• inspired by timothykang/css-module-types