fix: support css import completion recursively

Author: Q-Peppa

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## [Unreleased]
 
+## [1.7.1] - 2026-04-26
+
+### Bug Fixes
+
+- fix: restore completion stability by removing runtime linkage to Sass/SCSS PSI classes
+- fix: resolve selectors from CSS `@import` chains without binding to version-specific `CssImport.resolve()` ABI
+
+### Tests
+
+- test: add completion coverage for CSS `@import` and circular `@import` chains
+
+### Docs
+
+- docs: align README, plugin metadata, and CLAUDE.md with the current CSS-only feature scope
+
 ## [1.7.0] - 2026-04-26
 
 ### Bug Fixes
@@ -184,7 +199,9 @@
 - support a little complex parents selector
 - support css selector has pseudo
 
-[Unreleased]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.6.0...HEAD
+[Unreleased]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.7.1...HEAD
+[1.7.1]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.7.0...v1.7.1
+[1.7.0]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.6.0...v1.7.0
 [1.6.0]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.5.4...v1.6.0
 [1.5.4]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.5.3...v1.5.4
 [1.5.3]: https://github.com/Q-Peppa/react-css-modules-all/compare/v1.5.2...v1.5.3

CLAUDE.md

@@ -37,17 +37,14 @@ This is an IntelliJ Platform plugin that provides CSS Modules intelligence for J
 - `IndexAccessCompletionProvider` for bracket syntax (`styles['...']`) — matches literal inside indexed access
 - `DotAccessCompletionProvider` for dot syntax (`styles.className`) — matches reference expressions preceded by `.`; auto-converts hyphenated names to bracket syntax on insertion
 
-### Annotation & quick fix (warnings on unknown classes)
-**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.
-
 ### Hover documentation
 **Entry:** `SimpleDocumentationProvider` — renders the CSS ruleset content when hovering over a class name in JS/TS.
 
 ### Core utility
 
 `src/main/kotlin/com/peppa/css/completion/QCssModulesUtil.kt` is the central utility file:
 
-- **`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).
+- **`restoreAllSelector(stylesheetFile)`** — parses a stylesheet and returns a map of class name → pointer to CSS ruleset. Handles nested selector expansion via `processAmpersandSelectors`, plain class selectors via `processAllSelectorSuffixes`, and recursively resolves CSS `@import` statements.
 - **`findReferenceStyleFile(element)`** — resolves a JS expression back to the `StylesheetFile` it imports (handles direct imports, default imports, re-exports).
 - **`generateLookupElementList(stylesheetFile)`** — builds completion `LookupElement`s from the parsed selector map.
 

README.md

@@ -4,16 +4,15 @@
 ![Rating](https://img.shields.io/jetbrains/plugin/r/rating/react.css.module.all)
 ![Version](https://img.shields.io/jetbrains/plugin/v/react.css.module.all)
 
-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'`.
+IntelliJ/WebStorm plugin for CSS Modules in JavaScript and TypeScript. Provides code completion, go-to-definition navigation, and quick documentation for `import styles from './file.css'`.
 
 ## Features
 
 - **Completion** — class name completion for bracket syntax (`styles['...']`) and dot syntax (`styles....`); hyphenated names auto-convert to bracket syntax on insertion
 - **Navigation** — Ctrl+Click / Go to Definition on a class name jumps to the CSS ruleset
 - **Quick documentation** — hover over a class name to see the corresponding CSS block
-- **Annotations** — unknown class names are highlighted with a quick fix to create the missing ruleset
-- **Sass/SCSS/LESS** — resolves parent selectors (`&`), `@import`, `@use`, and `@forward`
-- **Circular import safety** — gracefully short-circuits circular `@import`/`@use` chains
+- **CSS imports** — resolves selectors from CSS `@import` chains
+- **Circular import safety** — gracefully short-circuits circular CSS `@import` chains
 
 ## Install
 

build.gradle.kts

@@ -18,6 +18,9 @@ kotlin {
 
 
 repositories {
+    maven(url = uri("/home/demo/jetbrains-mirror/local-maven"))
+    maven(url = "https://maven.aliyun.com/repository/public")
+    maven(url = "https://maven.aliyun.com/repository/central")
     mavenCentral()
     intellijPlatform {
         defaultRepositories()
@@ -31,11 +34,16 @@ dependencies {
     intellijPlatform {
         webstorm("2024.2")
         bundledPlugin("JavaScript")
-        bundledPlugin("org.jetbrains.plugins.sass")
         testFramework(TestFrameworkType.Platform)
     }
 }
 
+tasks.test {
+    testLogging {
+        showStandardStreams = true
+    }
+}
+
 intellijPlatform {
     pluginConfiguration {
         version = providers.gradleProperty("version")

gradle.properties

@@ -4,8 +4,8 @@ pluginGroup = com.peppa.css
 pluginName = CSS Modules
 pluginRepositoryUrl = https://github.com/Q-Peppa/react-css-modules-all
 # SemVer format -> https://semver.org
-pluginVersion = 1.7.0
-version = 1.7.0
+pluginVersion = 1.7.1
+version = 1.7.1
 # Supported build number ranges and IntelliJ Platform versions -> https://plugins.jetbrains.com/docs/intellij/build-number-ranges.html
 pluginSinceBuild=242
 # pluginUntilBuild = 242.*  # for Supported all version > 231
@@ -20,4 +20,7 @@ kotlin.stdlib.default.dependency = false
 org.gradle.configuration-cache = true
 
 # Enable Gradle Build Cache -> https://docs.gradle.org/current/userguide/build_cache.html
-org.gradle.caching = true
+org.gradle.caching = true
+
+# Prefer direct JetBrains repository URLs over Cache Redirector in restricted networks.
+useCacheRedirector = false

src/main/kotlin/com/peppa/css/completion/QCssModulesUtil.kt

@@ -47,28 +47,67 @@ fun restoreAllSelector(stylesheetFile: StylesheetFile): Map<String, SmartPsiElem
 
     return CachedValuesManager.getCachedValue(stylesheetFile) {
         val result = linkedMapOf<String, SmartPsiElementPointer<PsiElement>>()
-        val scope = GlobalSearchScope.fileScope(stylesheetFile.project, stylesheetFile.virtualFile)
-
-        // Resolve parent selector (&) for SCSS/LESS nesting
-        CssIndexUtil.processAmpersandSelectors(stylesheetFile.project, scope) { selector ->
-            selector.processAmpersandEvaluatedSelectors { evaluated ->
-                recessivesClassInCssSelector(selector, evaluated, result, pointerManager)
-            }
-            true
-        }
+        val dependencies = linkedSetOf<PsiElement>()
+        val visitedFiles = linkedSetOf<StylesheetFile>()
+        collectSelectorsRecursively(stylesheetFile, result, pointerManager, visitedFiles, dependencies)
 
-        // Resolve all class selectors
-        CssIndexUtil.processAllSelectorSuffixes(
-            CssSelectorSuffixType.CLASS,
-            stylesheetFile.project,
-            scope
-        ) { name, css ->
-            css.ruleset?.let { result[name] = pointerManager.createSmartPsiElementPointer(it) }
-            true
+        CachedValueProvider.Result.create(result.toMap(), *dependencies.toTypedArray())
+    }
+}
+
+private fun collectSelectorsRecursively(
+    stylesheetFile: StylesheetFile,
+    result: MutableMap<String, SmartPsiElementPointer<PsiElement>>,
+    pointerManager: SmartPointerManager,
+    visitedFiles: MutableSet<StylesheetFile>,
+    dependencies: MutableSet<PsiElement>
+) {
+    if (!visitedFiles.add(stylesheetFile)) return
+    dependencies += stylesheetFile
+
+    val scope = GlobalSearchScope.fileScope(stylesheetFile.project, stylesheetFile.virtualFile)
+
+    CssIndexUtil.processAmpersandSelectors(stylesheetFile.project, scope) { selector ->
+        selector.processAmpersandEvaluatedSelectors { evaluated ->
+            recessivesClassInCssSelector(selector, evaluated, result, pointerManager)
         }
+        true
+    }
 
-        CachedValueProvider.Result.create(result.toMap(), stylesheetFile)
+    CssIndexUtil.processAllSelectorSuffixes(
+        CssSelectorSuffixType.CLASS,
+        stylesheetFile.project,
+        scope
+    ) { name, css ->
+        css.ruleset?.let { result[name] = pointerManager.createSmartPsiElementPointer(it) }
+        true
     }
+
+    findImportedStylesheetFiles(stylesheetFile).forEach { importedFile ->
+        collectSelectorsRecursively(importedFile, result, pointerManager, visitedFiles, dependencies)
+    }
+}
+
+private fun findImportedStylesheetFiles(stylesheetFile: StylesheetFile): Sequence<StylesheetFile> {
+    return PsiTreeUtil.findChildrenOfType(stylesheetFile, CssImport::class.java).asSequence()
+        .flatMap { resolveCssImportTargets(it) }
+        .mapNotNull { it as? StylesheetFile }
+}
+
+private fun resolveCssImportTargets(cssImport: CssImport): Sequence<PsiFile> {
+    val resolvedByMethod = runCatching {
+        CssImport::class.java.getMethod("resolve").invoke(cssImport) as? Array<*>
+    }.getOrNull()
+        ?.asSequence()
+        ?.mapNotNull { it as? PsiFile }
+
+    if (resolvedByMethod != null) {
+        return resolvedByMethod
+    }
+
+    return cssImport.uriElements.asSequence()
+        .flatMap { uriElement -> uriElement.references.asSequence() }
+        .mapNotNull { it.resolve() as? PsiFile }
 }
 
 

src/main/resources/META-INF/plugin.xml

@@ -13,15 +13,13 @@
     <li><b>Smart Completion</b> - Auto-complete CSS class names from imported style modules</li>
     <li><b>Dual Syntax Support</b> - Works with both <code>styles['className']</code> and <code>styles.className</code></li>
     <li><b>Go to Definition</b> - Click on class name to navigate directly to CSS/SCSS definition</li>
-    <li><b>Unknown Class Detection</b> - Highlights undefined CSS classes with warnings</li>
-    <li><b>Quick Fix</b> - Instantly create missing CSS selectors with one click</li>
-    <li><b>Parent Selector Support</b> - Full support for SCSS/LESS <code>&amp;</code> (parent selector) syntax</li>
+    <li><b>CSS Import Support</b> - Follows CSS <code>@import</code> chains for completion and navigation</li>
     <li><b>Hover Documentation</b> - Preview CSS rules on mouse hover</li>
 </ul>
 
 <h3>Supported File Types</h3>
 <ul>
-    <li>CSS, SCSS, LESS modules</li>
+    <li>CSS modules</li>
     <li>JavaScript, TypeScript, JSX, TSX</li>
 </ul>
     ]]>

src/test/kotlin/com/peppa/css/css/ImportedStylesheetCompletionTest.kt

@@ -0,0 +1,49 @@
+package com.peppa.css.css
+
+import com.intellij.codeInsight.completion.CompletionType
+import com.intellij.testFramework.fixtures.BasePlatformTestCase
+
+class ImportedStylesheetCompletionTest : BasePlatformTestCase() {
+
+    override fun getTestDataPath() = "src/test/resources"
+
+    private fun assertAndPrintCompletion(expected: List<String>) {
+        val actual = myFixture.lookupElementStrings
+        println("actual completion strings: ${actual?.sorted()}")
+        println("expected completion strings: ${expected.sorted()}")
+        assertNotNull(actual)
+        assertContainsElements(actual!!, *expected.toTypedArray())
+    }
+
+    fun testCssImportCompletionIncludesImportedSelectors() {
+        myFixture.copyFileToProject("imports/main.css")
+        myFixture.copyFileToProject("imports/imported.css")
+
+        myFixture.configureByText(
+            "test.js", """
+            import s from "./imports/main.css";
+            s['<caret>'];
+        """.trimIndent()
+        )
+
+        myFixture.complete(CompletionType.BASIC)
+
+        assertAndPrintCompletion(listOf("localCard", "sharedCard", "importedCard"))
+    }
+
+    fun testCircularCssImportsDoNotLoopAndStillResolveSelectors() {
+        myFixture.copyFileToProject("imports/cycle-a.css")
+        myFixture.copyFileToProject("imports/cycle-b.css")
+
+        myFixture.configureByText(
+            "test.js", """
+            import s from "./imports/cycle-a.css";
+            s['<caret>'];
+        """.trimIndent()
+        )
+
+        myFixture.complete(CompletionType.BASIC)
+
+        assertAndPrintCompletion(listOf("cycleA", "cycleB"))
+    }
+}

src/test/resources/imports/cycle-a.css

@@ -0,0 +1,5 @@
+@import "./cycle-b.css";
+
+.cycleA {
+  color: black;
+}

src/test/resources/imports/cycle-b.css

@@ -0,0 +1,5 @@
+@import "./cycle-a.css";
+
+.cycleB {
+  color: white;
+}