Skip to content

fix(scss): don't treat !default/!global inside strings as flags#19245

Closed
xfocus3 wants to merge 3 commits into
prettier:mainfrom
xfocus3:fix/scss-directive-in-string-19203
Closed

fix(scss): don't treat !default/!global inside strings as flags#19245
xfocus3 wants to merge 3 commits into
prettier:mainfrom
xfocus3:fix/scss-directive-in-string-19203

Conversation

@xfocus3

@xfocus3 xfocus3 commented May 30, 2026

Copy link
Copy Markdown
Contributor

Description

Closes #19203.

When !default or !global appeared inside a string or function argument in SCSS, Prettier treated it as a Sass declaration flag and split it off the value, injecting a stray space:

/* input */
$a: "!default";
$b: unquote("!default");
$c: url("x!global");

/* output before this PR */
$a: " !default";
$b: unquote(" !default");
$c: url("x !global");

Cause

The flag was detected with value.match(/(\s*)(!default).*$/), which matches the raw !default / !global text anywhere in the value — including inside strings and url(...) / function arguments — and then sliced everything after it off the value.

Fix

Detect the directive structurally. A genuine trailing flag parses as the final top-level value-word node whose value is exactly !default / !global (optionally followed only by comments). Text inside a string parses as a value-string, and text inside a function parses as a value-func, so those are correctly left untouched. The comma-separated case (where the flag lives in the last comma item) is handled too. If the value can't be parsed structurally, it falls back to the original regex so existing behavior is preserved.

/* output after this PR */
$a: "!default";
$b: unquote("!default");
$c: url("x!global");

/* genuine flags still work, including alongside a string value */
$d: "!default" !default;
$e: "x!global" !global;
$f: map-get($map, "!default") !default;

Checklist

  • Added a regression fixture (tests/format/scss/flag/19203.scss) covering in-string, function-argument, and mixed string-plus-genuine-flag cases.
  • yarn jest tests/format/scss tests/format/css tests/format/less passes (358/358).
  • yarn eslint src/language-css/parser-postcss.js passes.
  • yarn lint:prettier passes.

xfocus3 added 2 commits May 30, 2026 15:42
`!default` and `!global` were detected with a regex that matched the raw
text anywhere in the value, so values containing those substrings inside a
string or function argument (e.g. `$a: "!default"`) were incorrectly split
as if they had a trailing declaration flag, injecting a stray space.

Detect the flag structurally instead: it is only a real flag when it parses
as the final top-level `value-word`. Falls back to the previous regex when
the value cannot be parsed.

Closes prettier#19203
@netlify

netlify Bot commented May 30, 2026

Copy link
Copy Markdown

Deploy Preview for prettier ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit a2468c2
🔍 Latest deploy log https://app.netlify.com/projects/prettier/deploys/6a1af74ff568030008de28a2
😎 Deploy Preview https://deploy-preview-19245--prettier.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 30, 2026

Copy link
Copy Markdown

Deploy Preview for prettier ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit df51cdb
🔍 Latest deploy log https://app.netlify.com/projects/prettier/deploys/6a1d89386ae53c000925e9d8
😎 Deploy Preview https://deploy-preview-19245--prettier.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Comment thread src/language-css/parser-postcss.js Outdated
@@ -22,6 +22,77 @@ import isSCSSNestedPropertyNode from "./utilities/is-scss-nested-property-node.j
const DEFAULT_SCSS_DIRECTIVE = /(\s*)(!default).*$/;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we update this pattern to only match /(\s*)(!default)\s?$/; instead?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants