Each first nested css rule isn't highlighted properly

Open
#40 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
css
Domain
tooling

Research direction

Reproduce the nested-rule examples in VS Code and inspect the CSS TextMate grammar in this repository, which provides the syntax highlighting. Compare the first nested rule with subsequent rules and verify the behavior for class selectors, element selectors, and pseudo-selectors. Done means each first nested rule receives the same highlighting as the following rules.

Written by the indexing model from the issue text.

Description

bug

Type: Bug

  1. Create a css file
  2. Add a rule
  3. Nest a few rules inside

Example:

.useful-class {
    .rule-without-highlight {
        background-color: red;
    }

    .rule-with-highlight {
        background-color: green;
    }

    .another-rule-with-highlight {
        background-color: green;
    }
}

useful-selector {
    selector-without-highlight {
        background-color: red;
    }

    selector-with-highlight {
        background-color: green;
    }

    another-selector-with-highlight {
        background-color: green;
    }
}

:first {
    :first-child {
        background-color: red;
    }

    :nth-child(2) {
        background-color: green;
    }

    :last-child {
        background-color: green;
    }
}

Example output:

Image

VS Code version: Code - Insiders 1.98.0-insider (21525b01bf68bf9250cb856f192628fffc449234, 2025-02-11T05:04:43.535Z)
OS version:
Modes:

System Info: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Extensions (16)

Extension Author (truncated) Version
anycode-kotlin ms- 0.0.5
anycode ms- 0.0.73
anycode-python ms- 0.0.5
anycode-java ms- 0.0.5
anycode-cpp ms- 0.0.5
anycode-typescript ms- 0.0.5
anycode-go ms- 0.0.5
anycode-c-sharp ms- 0.0.5
anycode-php ms- 0.0.6
anycode-rust ms- 0.0.6
remotehub Git 0.65.2024112101
remote-explorer ms- 0.5.2025010909
remote-repositories ms- 0.43.2024112101
codespaces Git 1.17.3
remote-server ms- 1.6.2025010809
azure-repos ms- 0.41.2024112101
Dominant language
JavaScript
Stars
27
Forks
25
Avg merge
3d 19h
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/vscode-css

All issues in microsoft/vscode-css

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.