prettier / prettier/prettier

SCSS `!default` / `!global` inside strings are treated as declaration flags

Open
#19,203 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

lang:css/scss/less
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

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.