@@ -0,0 +1,21 @@
+#### Prevent addition space in `type()` with `+` (#19516 by @bigandy)
+
+This fixes the addition space before `+` in CSS `type()` declaration. For example `type(<number>+)` was being converted into `type(<number> +)` which is invalid CSS and does not work.
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+div {
+  border-radius: attr(br type(<length>+));
+}
+
+/* Prettier stable */
+div {
+  border-radius: attr(br type(<length> +));
+}
+
+/* Prettier main */
+div {
+  border-radius: attr(br type(<length>+));
+}
+```
@@ -311,6 +311,17 @@ function printCommaSeparatedValueGroup(path, options, print) {
       continue;
     }
 
+    // Prevent the addition of a space inside type() declarations that include an + operator
+    // due to the fact that it is not valid syntax
+    // (i.e. `type(<number> +)`, `type(<color> +)`)
+    if (
+      isAdditionNode(iNextNode) &&
+      insideValueFunctionNode(path, "type") &&
+      hasEmptyRawBefore(iNextNode)
+    ) {
+      continue;
+    }
+
     // absolute paths are only parsed as one token if they are part of url(/abs/path) call
     // but if you have custom -fb-url(/abs/path/) then it is parsed as "division /" and rest
     // of the path. We don't want to put a space after that first division in this case.
 
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`type.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+div {
+  border-radius: attr(br type(<length>+));
+}
+
+div {
+  background: attr(bg type(<color>+));
+}
+
+div {
+  background: attr(bg type(<color>#));
+}
+
+div {
+  margin: attr(data-margin type(<percentage> | <number> | auto));
+}
+
+div {
+  margin: attr(data-margin type(<percentage>+ | <number>+ | auto));
+}
+
+div {
+  aspect-ratio: attr(data-ar type(*));
+}
+
+=====================================output=====================================
+div {
+  border-radius: attr(br type(<length>+));
+}
+
+div {
+  background: attr(bg type(<color>+));
+}
+
+div {
+  background: attr(bg type(<color>#));
+}
+
+div {
+  margin: attr(data-margin type(<percentage> | <number> | auto));
+}
+
+div {
+  margin: attr(data-margin type(<percentage>+ | <number>+ | auto));
+}
+
+div {
+  aspect-ratio: attr(data-ar type(*));
+}
+
+================================================================================
+`;
@@ -0,0 +1 @@
+runFormatTest(import.meta, ["css"]);
@@ -0,0 +1,23 @@
+div {
+  border-radius: attr(br type(<length>+));
+}
+
+div {
+  background: attr(bg type(<color>+));
+}
+
+div {
+  background: attr(bg type(<color>#));
+}
+
+div {
+  margin: attr(data-margin type(<percentage> | <number> | auto));
+}
+
+div {
+  margin: attr(data-margin type(<percentage>+ | <number>+ | auto));
+}
+
+div {
+  aspect-ratio: attr(data-ar type(*));
+}