Repository: prettier/prettier (JavaScript)

Issue:
Formatting SCSS throws TypeError
<!--

BEFORE SUBMITTING AN ISSUE:

1.  Search for your issue on GitHub: https://github.com/prettier/prettier/issues
    A large number of opened issues are duplicates of existing issues.
    If someone has already opened an issue for what you are experiencing,
    you do not need to open a new issue — please add a 👍 reaction to the
    existing issue instead.

2.  If your issue is with a Prettier editor extension or add-on, please open the
    issue in the repo for that extension or add-on, instead of this repo.

-->

**Environments:**

- Prettier Version: 3.6.2
- Running Prettier via: pre-commit, vscExtension
- Runtime: NodeJS (installed via nodejs if what asked), Angular 20 App
- Operating System: Linux (PopOS 22.04)
- Prettier plugins (if any): <!-- e.g. @prettier/plugin-php -->

**Steps to reproduce:**

<!-- shell script, js code, or a link to the minimal reproducible repository -->
This is a valid scss part (used to build inverse border cruve) :
```scss
.element {
  --l: , #0000 calc(100% - 0.5px), var(--p-card-background) calc(100% + 0.5px);
  &::before {
    left: 0;
    background: radial-gradient(0.5em at 0 0 var(--l)) 100% 100% / #{0.5em 0.5em} no-repeat;
    border-width: 0 0.5em 0.5em 0;
    margin-bottom: -0.5em;
    margin-left: calc(-0.5em - 8px);
  }

  &::after {
    right: 0;
    background: radial-gradient(0.5em at 100% 0 var(--l)) 0 100% / #{0.5em 0.5em} no-repeat;
    border-width: 0 0 0.5em 0.5em;
    margin-bottom: -0.5em;
    margin-right: calc(-0.5em - 8px);
  }
}
```
If you run prettier on this file, it will fail.

**Expected behavior:**
It should format the file (on this example, the `no-repeat` should go on a new line)

**Actual behavior:**
```
["INFO" - 10:07:50 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 10:07:50 PM] Prettier Options:
{
  "filepath": "/media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/src/app/layout/app-layout/app-layout.scss",
  "parser": "scss",
  "useTabs": false,
  "tabWidth": 4,
  "printWidth": 100,
  "singleQuote": false,
  "semi": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}
["ERROR" - 10:07:50 PM] Error formatting document.
["ERROR" - 10:07:50 PM] Cannot read properties of undefined (reading 'value')
TypeError: Cannot read properties of undefined (reading 'value')
    at Xn (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/plugins/postcss.mjs:50:1323)
    at oc (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/plugins/postcss.mjs:50:8092)
    at Object._c [as print] (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/plugins/postcss.mjs:54:8453)
    at callPluginPrintFunction (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/index.mjs:16929:20)
    at mainPrintInternal (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/index.mjs:16912:18)
    at mainPrint (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/index.mjs:16895:14)
    at file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/plugins/postcss.mjs:54:980
    at file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/index.mjs:15334:25
    at AstPath.each (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/index.mjs:15320:9)
    at AstPath.map (file:///media/ibaraki/NAS/.Code/NodeJS/Batsuki/WEB/node_modules/prettier/index.mjs:15332:10)
["INFO" - 10:07:50 PM] Formatting completed in 17ms.
```

**Additionnal Infos:**
The cause of the issue is because of the comma at the start of the `--l` var.
I moved the comma on the two pseudo-elements and the formatting worked.


Discussion:

Patch:
diff --git a/changelog_unreleased/css/17899.md b/changelog_unreleased/css/17899.md
new file mode 100644
index 000000000000..f3edb9c4d7ed
--- /dev/null
+++ b/changelog_unreleased/css/17899.md
@@ -0,0 +1,17 @@
+#### Fix crash when formatting special custom properties (#17899 by @fisker)
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+:root {
+  --l: , #000;
+}
+
+/* Prettier stable */
+TypeError: Cannot read properties of undefined (reading 'value')
+
+/* Prettier main */
+:root {
+  --l: , #000;
+}
+```
diff --git a/src/language-css/utils/index.js b/src/language-css/utils/index.js
index d78cab4a5ae9..2d1555c9ef44 100644
--- a/src/language-css/utils/index.js
+++ b/src/language-css/utils/index.js
@@ -95,7 +95,7 @@ function insideAtRuleNode(path, atRuleNameOrAtRuleNames) {
 function insideURLFunctionInImportAtRuleNode(path) {
   const { node } = path;
   return (
-    node.groups[0].value === "url" &&
+    node.groups[0]?.value === "url" &&
     node.groups.length === 2 &&
     path.findAncestor((node) => node.type === "css-atrule")?.name === "import"
   );


Test patch:
diff --git a/tests/format/css/custom-properties/17806.css b/tests/format/css/custom-properties/17806.css
new file mode 100644
index 000000000000..4c2ffe029ad7
--- /dev/null
+++ b/tests/format/css/custom-properties/17806.css
@@ -0,0 +1,3 @@
+:root {
+  --l: , #000;
+}
diff --git a/tests/format/css/custom-properties/__snapshots__/format.test.js.snap b/tests/format/css/custom-properties/__snapshots__/format.test.js.snap
new file mode 100644
index 000000000000..1096697a9789
--- /dev/null
+++ b/tests/format/css/custom-properties/__snapshots__/format.test.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`17806.css format 1`] = `
+====================================options=====================================
+parsers: ["css", "scss", "less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+:root {
+  --l: , #000;
+}
+
+=====================================output=====================================
+:root {
+  --l: , #000;
+}
+
+================================================================================
+`;
diff --git a/tests/format/css/custom-properties/format.test.js b/tests/format/css/custom-properties/format.test.js
new file mode 100644
index 000000000000..19d2938f39ed
--- /dev/null
+++ b/tests/format/css/custom-properties/format.test.js
@@ -0,0 +1,1 @@
+runFormatTest(import.meta, ["css", "scss", "less"]);