Skip to content

larsvankleef/create-css-module

Repository files navigation

Create CSS Module

Quickly create a .module.css or .module.scss file for the currently open JavaScript/TypeScript file — and automatically insert the correct import statement.

Features

  • 📄 Create a CSS/SCSS module next to the active file with one command.
  • 🎨 Choose file type (.module.css or .module.scss or .css and .scss) via a quick pick.
  • 📝 Automatic import insertion into your JS/TS/JSX/TSX file.
  • 🛡️ Duplicate-safe — won’t overwrite an existing module or add duplicate imports.
  • 🎯 Smart import placement — inserted after use client/use strict directives and existing imports.
  • 🚫 Language check — only runs for JS/TS files.

Usage

  1. Open a .js, .jsx, .ts, or .tsx file in VS Code.

  2. Run the command:

    • Press Ctrl+Shift+P / Cmd+Shift+P
    • Search for Create CSS Module for Current File
  3. Pick .module.css or .module.scss in the menu.

  4. The file is created next to your current file, and an import styles from './YourFile.module.css'; is added automatically.

Example

If you’re editing:

src/components/Button.tsx

and run Create CSS Module choosing .module.scss, the extension will create:

src/components/Button.module.scss

and insert:

import styles from './Button.module.scss';

at the top of Button.tsx.

Command

Command Description
Create CSS Module for Current File Creates a css file next to the open file and inserts the import.

Requirements

  • Visual Studio Code 1.103.0 or higher
  • JavaScript/TypeScript file open in the editor

Would you like me to also make you a CHANGELOG.md so it’s fully Marketplace-compliant? That plus this README will make vsce package happy without warnings.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published