SCSS `!default` / `!global` inside strings are treated as declaration flags
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 52.3k
- Forks
- 5k
- Avg merge
- 19h 2m
- Merged PRs (30d)
- 117
Description
Prettier 3.8.3
When !default or !global appears inside a string or function argument in SCSS, Prettier treats it as a Sass declaration flag instead of part of the value.
Input:
$a: "!default";
$b: unquote("!default");
$c: url("x!global");
Actual output:
$a: " !default";
$b: unquote(" !default");
$c: url("x !global");
Expected output:
$a: "!default";
$b: unquote("!default");
$c: url("x!global");
This looks like the SCSS directive detection is matching raw !default / !global text before the value is parsed, so values containing those strings get split as if they had trailing Sass flags.
I can send a fix with regression tests.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with the three SCSS inputs shown and trace the SCSS directive detection described in the report, especially where raw !default and !global text is matched before value parsing. Add regression coverage for strings, function arguments, and URLs, then confirm the formatter preserves the expected output without inserting spaces.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100