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

optimize formatting grid properties (close #7) #8

Merged
merged 4 commits into from
Apr 10, 2024
Merged

optimize formatting grid properties (close #7) #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fd5e670
optimize formatting grid properties
g-plane Apr 9, 2024
624bcfe
optimize formatting grid properties
g-plane Apr 10, 2024
d8c0afb
add tests for grid properties
g-plane Apr 10, 2024
7295d67
refactor
g-plane Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 39 additions & 5 deletions malva/src/doc_gen/stmt.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,23 @@ impl<'s> DocGen<'s> for Declaration<'s> {
})
)
});
if can_break_before_value {
docs.push(Doc::line_or_space().nest(ctx.indent_width));
let space_after_colon = if can_break_before_value {
Doc::line_or_space().nest(ctx.indent_width)
} else {
docs.push(Doc::space());
}
Doc::space()
};

docs.reserve(self.value.len() * 2);
let mut pos = self.colon_span.end;

let mut iter = self.value.iter().peekable();
match &self.name {
InterpolableIdent::Literal(Ident { name, .. })
if name.starts_with("--") || name.eq_ignore_ascii_case("filter") =>
{
use raffia::token::Token;
docs.push(space_after_colon);

let mut iter = self.value.iter().peekable();
while let Some(value) = iter.next() {
let span = value.span();
docs.push(
Expand All @@ -70,7 +72,39 @@ impl<'s> DocGen<'s> for Declaration<'s> {
pos = span.end;
}
}
InterpolableIdent::Literal(Ident { name, .. })
if name.eq_ignore_ascii_case("grid")
|| name
.get(0..13)
.is_some_and(|s| s.eq_ignore_ascii_case("grid-template")) =>
{
pos = self
.value
.iter()
.enumerate()
.fold(pos, |pos, (index, value)| {
let span = value.span();
let comments = ctx.end_spaced_comments(pos, span.start).collect::<Vec<_>>();

if !comments.is_empty() {
docs.push(Doc::space());
} else if index == 0 {
docs.push(Doc::line_or_space().nest(ctx.indent_width));
} else if ctx.line_bounds.line_distance(pos, span.start) == 0 {
docs.push(Doc::space());
} else {
docs.push(Doc::hard_line().nest(ctx.indent_width));
}
docs.push(Doc::list(comments).nest(ctx.indent_width));
docs.push(value.doc(ctx));

span.end
});
}
_ => {
docs.push(space_after_colon);

let mut iter = self.value.iter().peekable();
while let Some(value) = iter.next() {
let span = value.span();
docs.push(
Expand Down
114 changes: 114 additions & 0 deletions malva/tests/fmt/css/grid/grid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/* quotes */
div {
grid-template-areas:
'header header'
'main sidebar'
'footer footer';
}

/* numbers */
div {
grid-template-columns:
[full-start] minmax(1.50em, 1fr)
[main-start] minmax(.40ch, 75ch)
[main-end] minmax(1em, 1.000fr)
[full-end];
}

/* casing */
div {
GRID:
[top] 1fr
[middle] 1fr
bottom;

grid-TEMPLATE:
"a a a" 200px
"b b b" 200px
/ 200px 200px auto;
}

/* break before first line if there are any breaks */
div {
grid-template-columns:
1fr 100px 3em;
grid: [wide-start] "header header header" 200px [wide-end]
"footer footer footer" 25px
/ auto 50px auto;
}

/**
* https://github.com/prettier/prettier/issues/2703#issuecomment-341188126
*/
.container {
display: grid;

/* basic template rows/columns */
grid-template-columns: 1fr 100px 3em;
grid-template-rows: 1fr 100px 3em;
/* template rows/columns with named grid lines */
grid-template-columns:
[wide-start] 1fr
[main-start] 500px
[main-end] 1fr
[wide-end];
grid-template-rows:
[top] 1fr
[middle] 1fr
[bottom];
/* template rows/columns with functions */
grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
/* getting really busy with named lines + functions */
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(1em, 80ch)
[main-end] minmax(1em, 1fr)
[full-end];

grid-template-areas:
"header header header"
"main main sidebar"
"main main sidebar2"
"footer footer footer";

/* Shorthand for grid-template-rows, grid-template-columns, and grid-template
areas. In one. This can get really crazy. */
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;

/* The. Worst. This one is shorthand for like everything here smashed into one. But rarely will you actually specify EVERYTHING. */
grid:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
/* simpler use case: */
grid: 200px auto / 1fr auto 1fr;

/* Okay, the the worst of it. The simpler syntaxes: */

grid-row-gap: 2em;
grid-column-gap: 1em;
/* shorthand for grid-row-gap + grid-column-gap: */
grid-gap: 2em 1em;

grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
}

.container > .item {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: -2;
grid-row-end: -1;

/* shorthands for the above: */
grid-column: 1 / 2;
grid-column: main;
grid-row: -2 / span 1;
grid-row: footer;

grid-area: main;
grid-area: 1 / main-start / 3 / main-end;
}
118 changes: 118 additions & 0 deletions malva/tests/fmt/css/grid/grid.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
---
source: malva/tests/fmt.rs
---
/* quotes */
div {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}

/* numbers */
div {
grid-template-columns:
[full-start] minmax(1.50em, 1fr)
[main-start] minmax(0.40ch, 75ch)
[main-end] minmax(1em, 1.000fr)
[full-end];
}

/* casing */
div {
grid:
[top] 1fr
[middle] 1fr
bottom;

grid-template:
"a a a" 200px
"b b b" 200px
/ 200px 200px auto;
}

/* break before first line if there are any breaks */
div {
grid-template-columns: 1fr 100px 3em;
grid:
[wide-start] "header header header" 200px [wide-end]
"footer footer footer" 25px
/ auto 50px auto;
}

/**
* https://github.com/prettier/prettier/issues/2703#issuecomment-341188126
*/
.container {
display: grid;

/* basic template rows/columns */
grid-template-columns: 1fr 100px 3em;
grid-template-rows: 1fr 100px 3em;
/* template rows/columns with named grid lines */
grid-template-columns:
[wide-start] 1fr
[main-start] 500px
[main-end] 1fr
[wide-end];
grid-template-rows:
[top] 1fr
[middle] 1fr
[bottom];
/* template rows/columns with functions */
grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
/* getting really busy with named lines + functions */
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(1em, 80ch)
[main-end] minmax(1em, 1fr)
[full-end];

grid-template-areas:
"header header header"
"main main sidebar"
"main main sidebar2"
"footer footer footer";

/* Shorthand for grid-template-rows, grid-template-columns, and grid-template
areas. In one. This can get really crazy. */
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;

/* The. Worst. This one is shorthand for like everything here smashed into one. But rarely will you actually specify EVERYTHING. */
grid:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
/* simpler use case: */
grid: 200px auto / 1fr auto 1fr;

/* Okay, the the worst of it. The simpler syntaxes: */

grid-row-gap: 2em;
grid-column-gap: 1em;
/* shorthand for grid-row-gap + grid-column-gap: */
grid-gap: 2em 1em;

grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
}

.container > .item {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: -2;
grid-row-end: -1;

/* shorthands for the above: */
grid-column: 1 / 2;
grid-column: main;
grid-row: -2 / span 1;
grid-row: footer;

grid-area: main;
grid-area: 1 / main-start / 3 / main-end;
}

3 changes: 2 additions & 1 deletion malva/tests/fmt/less/comments/between-decl.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ selector {
"sidebar content content" //
"footer footer footer";

grid-template-areas: "header header header" //
grid-template-areas:
"header header header" //
"sidebar content content" //
"footer footer footer";
}
Expand Down
3 changes: 2 additions & 1 deletion malva/tests/fmt/scss/comments/between-decl.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ selector {
"sidebar content content" //
"footer footer footer";

grid-template-areas: "header header header" //
grid-template-areas:
"header header header" //
"sidebar content content" //
"footer footer footer";
}
Expand Down
Loading