Are you tired of dealing with untyped CSS modules in your TypeScript projects? If so, the typescript-plugin-css-modules is here to save the day! This handy TypeScript language service plugin provides type information for CSS Modules, enhancing your development experience. In this blog post, we’ll guide you through the installation process, options, and usage in Visual Studio Code.
Table of Contents
About this Plugin
This plugin acts like a skilled interpreter, making sure your IDE understands the relationships between your TypeScript code and CSS styles. This means you’ll get type safety while integrating CSS Modules, which is currently not supported during compilation in TypeScript. If you’re looking for partial solutions, consider jest-css-modules-transform for Jest or check out the Webpack configuration guide.
Installation
Ready to install? Follow these simple steps:
- If you’re using Yarn, run:
yarn add -D typescript-plugin-css-modules - If you prefer npm, run:
npm install -D typescript-plugin-css-modules - Add the plugin to your
tsconfig.json:compilerOptions: { plugins: [ { name: "typescript-plugin-css-modules" } ] }
Importing CSS
Once you have the plugin set up, you can easily import your CSS modules:
import styles from 'my.module.css';
const a = styles.myClass;
const b = styles['my_other-class'];As of version 1.1.0, you can even use named exports:
import styles, { myClass } from 'my.module.css';
const a = myClass;
const b = styles['my_other-class'];Options
This plugin is quite flexible! While no options are mandatory, you can customize them based on your needs. Here’s a quick overview of some important options:
- classnameTransform: Adjusts how class names are formatted.
- customRenderer: Allows you to provide a custom CSS renderer.
- postcssOptions: Specific options for PostCSS processing.
For a more detailed layout of all options and their usage, please refer to the documentation.
Visual Studio Code
This plugin works best in Visual Studio Code. Set your workspace’s TypeScript version to ensure it loads the plugins properly:
typescript.tsserver.pluginPaths: ["typescript-plugin-css-modules"]Custom Definitions
If you’re not on Create React App, you may need to define how TypeScript interprets CSS Modules. Here’s a sample definition you can use:
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}Troubleshooting
If you encounter issues, check the TypeScript server log in Visual Studio Code by running Typescript: Open TS Server log in the command palette. If you are experiencing issues outside of Visual Studio Code, consider setting the TSS_LOG environment variable for additional logging.
To temporarily disable the plugin, set the DISABLE_TS_PLUGIN_CSS_MODULES environment variable. Restart your IDE to apply the changes.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
About This Project
This project is inspired by the improvements in Create React App and builds upon existing frameworks for CSS modules. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.