Microsoft/vscode

[scss] selector specificity works wrong with nested selectors

Open

#63,200 opened on Nov 15, 2018

View on GitHub
 (3 comments) (10 reactions) (1 assignee)TypeScript (74,848 stars) (10,221 forks)batch import
bugcss-less-scsshelp wanted

Description

Issue Type: Bug

Css specifity calculator doesn't respect nested selectors or selectors with &.

#id {} /* (1, 0, 0) */

#id div {} /* (1, 0, 1) */

#id {
  div { /* (0, 0, 1) */
  }
}

.block{ /* (0, 1, 0) */
  &__element { /* (0, 0, 0) */
  }
}

Reproduced without any extensions

VS Code version: Code 1.29.0 (5f24c93878bd4bc645a4a17c620e2487b11005f9, 2018-11-12T07:47:15.448Z) OS version: Windows_NT x64 10.0.17134

Contributor guide

Tech stack
csstypescript
Domain
developer experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS specificity rulesSCSS nesting syntax
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the CSS specificity calculation in the VS Code CSS language service, likely in the `extensions/css language features/server` directory. The bug is that nested selectors and `&` in SCSS are not being expanded correctly before specificity calculation. Look at the parser and selector specificity logic to understand how nested rules are handled. Since the issue is old and has an assignee but no linked PR, check the assignee's activity and consider fixing the expansion of nested selectors before computing specificity.