Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Insert spaces around slash in CSS ratio #15906

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Insert spaces around slash in CSS ratio #15906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0e221ab
Insert spaces around slash in CSS ratio
FloEdelmann Jan 10, 2024
e166329
Add changelog message
FloEdelmann Jan 10, 2024
7a72f9b
Rename function to avoid word failing spellcheck
FloEdelmann Jan 11, 2024
adc92e2
Merge branch 'main' into aspect-ratio
FloEdelmann Jan 24, 2024
87eb353
Switch to `runFormatTest`
FloEdelmann Feb 5, 2024
be7a56f
Merge branch 'main' into aspect-ratio
FloEdelmann Feb 5, 2024
6e705e1
Merge branch 'main' into aspect-ratio
FloEdelmann Feb 20, 2024
3852510
Merge branch 'main' into aspect-ratio
FloEdelmann Mar 12, 2024
a7c1523
Merge branch 'main' into aspect-ratio
FloEdelmann Apr 5, 2024
fcc9f86
Merge branch 'main' into aspect-ratio
FloEdelmann Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 22 additions & 0 deletions changelog_unreleased/css/15906.md
View file
Open in desktop
@@ -0,0 +1,22 @@
#### `aspect-ratio` formatting (#15906 by @FloEdelmann)

<!-- prettier-ignore -->
```css
/* Input */
div {
aspect-ratio: 16 / 9;
aspect-ratio: 3/2;
}

/* Prettier stable */
div {
aspect-ratio: 16 / 9;
aspect-ratio: 3/2;
}

/* Prettier main */
div {
aspect-ratio: 16 / 9;
aspect-ratio: 3 / 2;
}
```
13 changes: 11 additions & 2 deletions src/language-css/print/comma-separated-value-group.js
View file
Open in desktop
Expand Up @@ -29,6 +29,7 @@ import {
isLeftCurlyBraceNode,
isMathOperatorNode,
isMultiplicationNode,
isNumberNodeWithoutUnit,
isParenGroupNode,
isPostcssSimpleVarNode,
isRelationalOperatorNode,
Expand Down Expand Up @@ -257,12 +258,20 @@ function printCommaSeparatedValueGroup(path, options, print) {
iNextNextNode?.type === "value-func" ||
(iNextNextNode && isWordNode(iNextNextNode)) ||
iNode.type === "value-func" ||
isWordNode(iNode);
isWordNode(iNode) ||
(isDivisionNode(iNextNode) &&
parentNode.type === "value-value" &&
isNumberNodeWithoutUnit(iNode) &&
isNumberNodeWithoutUnit(iNextNextNode));
const requireSpaceAfterOperator =
iNextNode.type === "value-func" ||
isWordNode(iNextNode) ||
iPrevNode?.type === "value-func" ||
(iPrevNode && isWordNode(iPrevNode));
(iPrevNode && isWordNode(iPrevNode)) ||
(isDivisionNode(iNode) &&
parentNode.type === "value-value" &&
isNumberNodeWithoutUnit(iNextNode) &&
isNumberNodeWithoutUnit(iPrevNode));

// Space before unary minus followed by a function call.
if (
Expand Down
5 changes: 5 additions & 0 deletions src/language-css/utils/index.js
View file
Open in desktop
Expand Up @@ -385,6 +385,10 @@ function isParenGroupNode(node) {
);
}

function isNumberNodeWithoutUnit(node) {
return node?.type === "value-number" && node.unit === "";
}

export {
getPropOfDeclNode,
hasComposesNode,
Expand Down Expand Up @@ -418,6 +422,7 @@ export {
isMediaAndSupportsKeywords,
isModuloNode,
isMultiplicationNode,
isNumberNodeWithoutUnit,
isParenGroupNode,
isPostcssSimpleVarNode,
isRelationalOperatorNode,
Expand Down
25 changes: 25 additions & 0 deletions tests/format/css/aspect-ratio/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
@@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`aspect-ratio.css format 1`] = `
====================================options=====================================
parsers: ["css", "scss", "less"]
printWidth: 80
| printWidth
=====================================input======================================
div {
aspect-ratio: 3 /2;
aspect-ratio: 3/ 2;
aspect-ratio: 3/2;
aspect-ratio: 3 / 2;
}

=====================================output=====================================
div {
aspect-ratio: 3 / 2;
aspect-ratio: 3 / 2;
aspect-ratio: 3 / 2;
aspect-ratio: 3 / 2;
}

================================================================================
`;
6 changes: 6 additions & 0 deletions tests/format/css/aspect-ratio/aspect-ratio.css
View file
Open in desktop
@@ -0,0 +1,6 @@
div {
aspect-ratio: 3 /2;
aspect-ratio: 3/ 2;
aspect-ratio: 3/2;
aspect-ratio: 3 / 2;
}
1 change: 1 addition & 0 deletions tests/format/css/aspect-ratio/jsfmt.spec.js
View file
Open in desktop
@@ -0,0 +1 @@
runFormatTest(import.meta, ["css", "scss", "less"]);
2 changes: 1 addition & 1 deletion tests/format/css/parens/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -369,7 +369,7 @@ a {
prop15: (round(1.5) / 2) (round(1.5) / 2) (round(1.5) / 2) (round(1.5) / 2);
prop16: (2 / round(1.5)) (2 / round(1.5)) (2 / round(1.5)) (2 / round(1.5));
prop26: 8px/2px 8px /1 1/ 2px 1 / 2;
prop27: 8px/2px 8px/1 1/2px 1/2;
prop27: 8px/2px 8px/1 1/2px 1 / 2;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;
prop29: (8px/2px) (8px/1) (1/2px) (1/2);
prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2);
Expand Down
2 changes: 1 addition & 1 deletion tests/format/less/parens/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -397,7 +397,7 @@ a {
prop15: (round(1.5) / 2) (round(1.5) / 2) (round(1.5) / 2) (round(1.5) / 2);
prop16: (2 / round(1.5)) (2 / round(1.5)) (2 / round(1.5)) (2 / round(1.5));
prop26: 8px/2px 8px /1 1/ 2px 1 / 2;
prop27: 8px/2px 8px/1 1/2px 1/2;
prop27: 8px/2px 8px/1 1/2px 1 / 2;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;
prop29: (8px/2px) (8px/1) (1/2px) (1/2);
prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2);
Expand Down
2 changes: 1 addition & 1 deletion tests/format/scss/parens/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -452,7 +452,7 @@ a {
prop25-4: #{$width}-#{$width} #{$width} -#{$width} #{$width}- #{$width} #{$width} -
#{$width};
prop26: 8px/2px 8px /1 1/ 2px 1 / 2;
prop27: 8px/2px 8px/1 1/2px 1/2;
prop27: 8px/2px 8px/1 1/2px 1 / 2;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;
prop29: (8px/2px) (8px/1) (1/2px) (1/2);
prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2);
Expand Down