testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Preserve spacing style between font size and line height (#18114)

Browse Source 
Co-authored-by: fisker <lionkay@gmail.com>
This commit is contained in:
Konv Suuandfisker authored and GitHub committed 2025-10-27 05:46:13 +08:00
1 parent 53ae3ef479
commit 28aca7bed4
6 files changed
+190 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/css/18114.md
+19
View File
@@ -0,0 +1,19 @@
#### Remove unexpected space between font size and line height (#18114 by @kovsu)
<!-- prettier-ignore -->
```css
/* Input */
a {
font: var(--size)/1;
}
/* Prettier stable */
a {
font: var(--size) / 1;
}
/* Prettier main */
a {
font: var(--size)/1;
}
```
src/language-css/print/comma-separated-value-group.js
+53 -11
View File
@@ -337,17 +337,6 @@ function printCommaSeparatedValueGroup(path, options, print) {
isColorAdjusterFuncNode(parentParentNode) &&
!hasEmptyRawBefore(iNextNode);
const requireSpaceBeforeOperator =
iNextNextNode?.type === "value-func" ||
(iNextNextNode && isWordNode(iNextNextNode)) ||
iNode.type === "value-func" ||
isWordNode(iNode);
const requireSpaceAfterOperator =
iNextNode.type === "value-func" ||
isWordNode(iNextNode) ||
iPrevNode?.type === "value-func" ||
(iPrevNode && isWordNode(iPrevNode));
// Space before unary minus followed by a function call.
if (
options.parser === "scss" &&
@@ -360,6 +349,17 @@ function printCommaSeparatedValueGroup(path, options, print) {
continue;
}
const requireSpaceBeforeOperator =
iNextNextNode?.type === "value-func" ||
(iNextNextNode && isWordNode(iNextNextNode)) ||
iNode.type === "value-func" ||
isWordNode(iNode);
const requireSpaceAfterOperator =
iNextNode.type === "value-func" ||
isWordNode(iNextNode) ||
iPrevNode?.type === "value-func" ||
(iPrevNode && isWordNode(iPrevNode));
// Formatting `/`, `+`, `-` sign
if (
!(isMultiplicationNode(iNextNode) || isMultiplicationNode(iNode)) &&
@@ -441,6 +441,28 @@ function printCommaSeparatedValueGroup(path, options, print) {
continue;
}
// Formatting `font` property
if (
declAncestorProp &&
(declAncestorProp === "font" || declAncestorProp.startsWith("--"))
) {
if (
isDivisionNode(iNextNode) &&
hasEmptyRawBefore(iNextNode) &&
isPossibleFontSize(iNode)
) {
continue;
}
if (
isDivisionNode(iNode) &&
hasEmptyRawBefore(iNode) &&
isPossibleFontSize(iPrevNode)
) {
continue;
}
}
// Add `space` before next math operation
// Note: `grip` property have `/` delimiter and it is not math operation, so
// `grid` property handles above
@@ -517,4 +539,24 @@ function printCommaSeparatedValueGroup(path, options, print) {
return group(indent(fill(parts)));
}
function isPossibleFontSize(node) {
if (node?.type === "value-number") {
return true;
}
if (node?.type !== "value-func") {
return false;
}
const value = node.value.toLowerCase();
return (
value === "var" ||
value === "calc" ||
value === "min" ||
value === "max" ||
value === "clamp" ||
value.startsWith("--")
);
}
export default printCommaSeparatedValueGroup;
src/language-css/utils/index.js
+2 -2
View File
@@ -150,7 +150,7 @@ function isMultiplicationNode(node) {
}
function isDivisionNode(node) {
return node.type === "value-operator" && node.value === "/";
return node?.type === "value-operator" && node.value === "/";
}
function isAdditionNode(node) {
@@ -231,7 +231,7 @@ function hasParensAroundNode(node) {
}
function hasEmptyRawBefore(node) {
return node.raws?.before === "";
return node?.raws?.before === "";
}
function isKeyValuePairNode(node) {
tests/format/css/font/__snapshots__/format.test.js.snap
+81
View File
@@ -0,0 +1,81 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`font.css format 1`] = `
====================================options=====================================
parsers: ["css", "scss", "less"]
printWidth: 80
| printWidth
=====================================input======================================
.font {
/* No space */
font: 1rem/1;
--custom-font: 1rem/1;
font: var(--size)/2;
--custom-font: var(--size)/2;
font: calc(var(--size)/2)/2;
font: min(1px, 2px)/2;
font: max(1px, 2px)/2;
font: clamp(1px, 2px, 3px)/2;
/* Space around */
font: 1rem / 1;
--font: 1rem / 1;
font: --custom(1px) / 2;
--font: --custom(1px) / 2;
font: calc(var(--size) / 2) / 2;
font: min(1px, 2px) / 2;
font: max(1px, 2px) / 2;
font: clamp(1px, 2px, 3px) / 2;
font: --custom(1px) / 2;
/* Space before */
font: 1rem /1;
--font: 1rem /1;
font: --custom(1px) /2; /* Bug*/
--font: --custom(1px) /2; /* Bug*/
/* Space after */
font: 1rem/ 1; /* Bug*/
--font: 1rem/ 1; /* Bug*/
font: --custom(1px)/ 2; /* Bug*/
--font: --custom(1px)/ 2; /* Bug*/
}
=====================================output=====================================
.font {
/* No space */
font: 1rem/1;
--custom-font: 1rem/1;
font: var(--size)/2;
--custom-font: var(--size)/2;
font: calc(var(--size)/2)/2;
font: min(1px, 2px)/2;
font: max(1px, 2px)/2;
font: clamp(1px, 2px, 3px)/2;
/* Space around */
font: 1rem / 1;
--font: 1rem / 1;
font: --custom(1px) / 2;
--font: --custom(1px) / 2;
font: calc(var(--size) / 2) / 2;
font: min(1px, 2px) / 2;
font: max(1px, 2px) / 2;
font: clamp(1px, 2px, 3px) / 2;
font: --custom(1px) / 2;
/* Space before */
font: 1rem /1;
--font: 1rem /1;
font: --custom(1px) / 2; /* Bug*/
--font: --custom(1px) / 2; /* Bug*/
/* Space after */
font: 1rem/1; /* Bug*/
--font: 1rem/1; /* Bug*/
font: --custom(1px)/2; /* Bug*/
--font: --custom(1px)/2; /* Bug*/
}
================================================================================
`;
tests/format/css/font/font.css
+34
View File
@@ -0,0 +1,34 @@
.font {
/* No space */
font: 1rem/1;
--custom-font: 1rem/1;
font: var(--size)/2;
--custom-font: var(--size)/2;
font: calc(var(--size)/2)/2;
font: min(1px, 2px)/2;
font: max(1px, 2px)/2;
font: clamp(1px, 2px, 3px)/2;
/* Space around */
font: 1rem / 1;
--font: 1rem / 1;
font: --custom(1px) / 2;
--font: --custom(1px) / 2;
font: calc(var(--size) / 2) / 2;
font: min(1px, 2px) / 2;
font: max(1px, 2px) / 2;
font: clamp(1px, 2px, 3px) / 2;
font: --custom(1px) / 2;
/* Space before */
font: 1rem /1;
--font: 1rem /1;
font: --custom(1px) /2; /* Bug*/
--font: --custom(1px) /2; /* Bug*/
/* Space after */
font: 1rem/ 1; /* Bug*/
--font: 1rem/ 1; /* Bug*/
font: --custom(1px)/ 2; /* Bug*/
--font: --custom(1px)/ 2; /* Bug*/
}
tests/format/css/font/format.test.js
+1
View File
@@ -0,0 +1 @@
runFormatTest(import.meta, ["css", "scss", "less"]);