You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4
+
5
+
## Build & Test
6
+
7
+
```bash
8
+
# Build the plugin
9
+
./gradlew buildPlugin
10
+
11
+
# Run all tests
12
+
./gradlew check
13
+
14
+
# Run a single test class (use --tests with fully-qualified class name)
15
+
./gradlew test --tests "com.peppa.css.css.CssModulesClassNameCompletionContributorTest"
16
+
17
+
# Run plugin verification
18
+
./gradlew verifyPlugin
19
+
20
+
# Show plugin version
21
+
./gradlew properties --property version --quiet --console=plain
22
+
```
23
+
24
+
All commands use the Gradle wrapper (`./gradlew`). JVM 21 is required (set via `kotlin.jvmToolchain(21)`).
25
+
26
+
## Architecture
27
+
28
+
This is an IntelliJ Platform plugin that provides CSS Modules intelligence for JavaScript/TypeScript files. It adds four IDE capabilities, each implemented as a standard IntelliJ extension point registered in `src/main/resources/META-INF/plugin.xml`:
29
+
30
+
### Reference resolution (Ctrl+Click / Go to Definition)
31
+
**Entry:**`CssModulesIndexedStylesVarPsiReferenceContributor` — matches `JSLiteralExpression` inside `JSIndexedPropertyAccessExpression` (i.e., `styles['className']` bracket syntax). For each match it creates a `CssModuleClassReference`, which dynamically resolves the class name against the imported stylesheet via `restoreAllSelector()`.
32
+
33
+
**Key file:**`src/main/kotlin/com/peppa/css/psi/CssModulesUnknownClassPsiReference.kt` — `CssModuleClassReference` uses `modificationStamp`-based caching to avoid re-parsing the CSS on every resolve call. The caching can be toggled off via constructor parameter for testing.
34
+
35
+
### Code completion (Ctrl+Space)
36
+
**Entry:**`CssModulesClassNameCompletionContributor` — two providers:
-`DotAccessCompletionProvider` for dot syntax (`styles.className`) — matches reference expressions preceded by `.`; auto-converts hyphenated names to bracket syntax on insertion
39
+
40
+
### Annotation & quick fix (warnings on unknown classes)
41
+
**Entry:**`CssModulesClassAnnotator` — for both bracket and dot syntax, checks if the referenced class exists in the stylesheet. If not, shows a warning with `SimpleCssSelectorFix` which creates the missing CSS ruleset and navigates the editor to it.
42
+
43
+
### Hover documentation
44
+
**Entry:**`SimpleDocumentationProvider` — renders the CSS ruleset content when hovering over a class name in JS/TS.
45
+
46
+
### Core utility
47
+
48
+
`src/main/kotlin/com/peppa/css/completion/QCssModulesUtil.kt` is the central utility file:
49
+
50
+
-**`restoreAllSelector(stylesheetFile)`** — parses a stylesheet and returns a map of class name → pointer to CSS ruleset. Handles `&` parent selectors (SCSS/LESS) via `processAmpersandSelectors`, plain class selectors via `processAllSelectorSuffixes`, and recursively resolves `@import`/`@use` statements (with partial/underscore naming conventions and `~` node-style resolution).
51
+
-**`findReferenceStyleFile(element)`** — resolves a JS expression back to the `StylesheetFile` it imports (handles direct imports, default imports, re-exports).
52
+
-**`generateLookupElementList(stylesheetFile)`** — builds completion `LookupElement`s from the parsed selector map.
support css module in react code completion, navigation, quick documentation.
7
+
IntelliJ/WebStorm plugin for CSS Modules in JavaScript and TypeScript. Provides code completion, go-to-definition navigation, quick documentation, and missing-class quick fixes for `import styles from './file.css'`.
8
8
9
-
### Origin
10
-
- fork by https://github.com/jimkyndemeyer/react-css-modules-intellij-plugin/tree/master
11
-
- template by https://github.com/JetBrains/intellij-platform-plugin-template
9
+
## Features
12
10
13
-
### Install Plugin
11
+
-**Completion** — class name completion for bracket syntax (`styles['...']`) and dot syntax (`styles....`); hyphenated names auto-convert to bracket syntax on insertion
12
+
-**Navigation** — Ctrl+Click / Go to Definition on a class name jumps to the CSS ruleset
13
+
-**Quick documentation** — hover over a class name to see the corresponding CSS block
14
+
-**Annotations** — unknown class names are highlighted with a quick fix to create the missing ruleset
15
+
-**Sass/SCSS/LESS** — resolves parent selectors (`&`), `@import`, `@use`, and `@forward`
0 commit comments