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

Fix rule of fill violations in CSS (#16570)

Browse Source
This commit is contained in:
Seiya authored and GitHub committed 2024-09-08 18:03:46 +08:00
1 parent 08b698f924
commit 3fd32a0258
9 files changed
+243 -67
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/css/16570.md
+30
View File
@@ -0,0 +1,30 @@
#### Resolve some types of overrun in CSS (#16570 by @seiyab)
<!-- prettier-ignore -->
```css
/* Input */
@media (prefers-reduced-data: no-preference) {
@font-face {
unicode-range: U+0000-00FF, U+0131,
U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
/* Prettier stable */
@media (prefers-reduced-data: no-preference) {
@font-face {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
}
/* Prettier main */
@media (prefers-reduced-data: no-preference) {
@font-face {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
}
```
src/language-css/print/comma-separated-value-group.js
+42 -16
View File
@@ -38,6 +38,10 @@ import {
isWordNode,
} from "../utils/index.js";
/**
* @typedef {import("../../document/builders.js").Doc} Doc
*/
function printCommaSeparatedValueGroup(path, options, print) {
const { node } = path;
const parentNode = path.parent;
@@ -59,14 +63,23 @@ function printCommaSeparatedValueGroup(path, options, print) {
);
const printed = path.map(print, "groups");
const parts = [];
/*
* We assume parts always meet following conditions:
* - parts.length is odd
* - odd (0-indexed) elements are line-like doc
* We can achieve this by following way:
* - if we push line-like doc, we push empty string after it
* - if we push non-line-like doc, push [parts.pop(), doc] instead
*/
/** @type {Doc[]} */
let parts = [""];
const insideURLFunction = insideValueFunctionNode(path, "url");
let insideSCSSInterpolationInString = false;
let didBreak = false;
for (let i = 0; i < node.groups.length; ++i) {
parts.push(printed[i]);
parts.push([parts.pop(), printed[i]]);
const iPrevNode = node.groups[i - 1];
const iNode = node.groups[i];
@@ -75,11 +88,24 @@ function printCommaSeparatedValueGroup(path, options, print) {
if (insideURLFunction) {
if ((iNextNode && isAdditionNode(iNextNode)) || isAdditionNode(iNode)) {
parts.push(" ");
parts.push([parts.pop(), " "]);
}
continue;
}
// Align key after comment in SCSS map
if (
isColonNode(iNextNode) &&
iNode.type === "value-word" &&
parts.length > 2 &&
node.groups
.slice(0, i)
.every((group) => group.type === "value-comment") &&
!isInlineValueCommentNode(iPrevNode)
) {
parts[parts.length - 2] = dedent(parts.at(-2));
}
// Ignore SCSS @forward wildcard suffix
if (
insideAtRuleNode(path, "forward") &&
@@ -272,7 +298,7 @@ function printCommaSeparatedValueGroup(path, options, print) {
iNextNode.type === "value-func" &&
locEnd(iNode) !== locStart(iNextNode)
) {
parts.push(" ");
parts.push([parts.pop(), " "]);
continue;
}
@@ -309,10 +335,10 @@ function printCommaSeparatedValueGroup(path, options, print) {
// Add `hardline` after inline comment (i.e. `// comment\n foo: bar;`)
if (isInlineValueCommentNode(iNode)) {
if (parentNode.type === "value-paren_group") {
parts.push(dedent(hardline));
parts.push(dedent(hardline), "");
continue;
}
parts.push(hardline);
parts.push(hardline, "");
continue;
}
@@ -325,7 +351,7 @@ function printCommaSeparatedValueGroup(path, options, print) {
isEachKeywordNode(iNode) ||
isForKeywordNode(iNode))
) {
parts.push(" ");
parts.push([parts.pop(), " "]);
continue;
}
@@ -335,7 +361,7 @@ function printCommaSeparatedValueGroup(path, options, print) {
atRuleAncestorNode &&
atRuleAncestorNode.name.toLowerCase() === "namespace"
) {
parts.push(" ");
parts.push([parts.pop(), " "]);
continue;
}
@@ -347,11 +373,11 @@ function printCommaSeparatedValueGroup(path, options, print) {
iNextNode.source &&
iNode.source.start.line !== iNextNode.source.start.line
) {
parts.push(hardline);
parts.push(hardline, "");
didBreak = true;
} else {
parts.push(" ");
parts.push([parts.pop(), " "]);
}
continue;
@@ -361,7 +387,7 @@ function printCommaSeparatedValueGroup(path, options, print) {
// Note: `grip` property have `/` delimiter and it is not math operation, so
// `grid` property handles above
if (isNextMathOperator) {
parts.push(" ");
parts.push([parts.pop(), " "]);
continue;
}
@@ -383,12 +409,12 @@ function printCommaSeparatedValueGroup(path, options, print) {
isParenGroupNode(iNextNode) &&
locEnd(iNode) === locStart(iNextNode.open)
) {
parts.push(softline);
parts.push(softline, "");
continue;
}
if (iNode.value === "with" && isParenGroupNode(iNextNode)) {
parts.push(" ");
parts = [[fill(parts), " "]];
continue;
}
@@ -401,15 +427,15 @@ function printCommaSeparatedValueGroup(path, options, print) {
}
// Be default all values go through `line`
parts.push(line);
parts.push(line, "");
}
if (hasInlineComment) {
parts.push(breakParent);
parts.push([parts.pop(), breakParent]);
}
if (didBreak) {
parts.unshift(hardline);
parts.unshift("", hardline);
}
if (isControlDirective) {
src/language-css/print/parenthesized-value-group.js
+18 -3
View File
@@ -15,6 +15,7 @@ import {
DOC_TYPE_INDENT,
} from "../../document/constants.js";
import { getDocType } from "../../document/utils.js";
import { assertDocArray } from "../../document/utils/assert-doc.js";
import isNextLineEmpty from "../../utils/is-next-line-empty.js";
import isNonEmptyArray from "../../utils/is-non-empty-array.js";
import { locEnd, locStart } from "../loc.js";
@@ -84,7 +85,9 @@ function printParenthesizedValueGroup(path, options, print) {
if (!node.open) {
const forceHardLine = shouldBreakList(path);
const parts = join([",", forceHardLine ? hardline : line], groupDocs);
assertDocArray(groupDocs);
const withComma = chunk(join(",", groupDocs), 2);
const parts = join(forceHardLine ? hardline : line, withComma);
return indent(forceHardLine ? [hardline, parts] : group(fill(parts)));
}
@@ -102,8 +105,6 @@ function printParenthesizedValueGroup(path, options, print) {
getDocType(doc.contents) === DOC_TYPE_INDENT &&
getDocType(doc.contents.contents) === DOC_TYPE_FILL
) {
const { parts } = doc.contents.contents;
parts[1] = group(parts[1]);
doc = group(dedent(doc));
}
@@ -164,4 +165,18 @@ function shouldBreakList(path) {
);
}
/**
* @template {*} T
* @param {T[]} array
* @param {number} size
* @returns {T[][]}
*/
function chunk(array, size) {
const result = [];
for (let i = 0; i < array.length; i += size) {
result.push(array.slice(i, i + size));
}
return result;
}
export { printParenthesizedValueGroup, shouldBreakList };
src/language-css/printer-postcss.js
+2 -2
View File
@@ -534,7 +534,7 @@ function genericPrint(path, options, print) {
case "value-colon": {
const { previous } = path;
return [
return group([
node.value,
// Don't add spaces on escaped colon `:`, e.g: grid-template-rows: [row-1-00\:00] auto;
(typeof previous?.value === "string" &&
@@ -543,7 +543,7 @@ function genericPrint(path, options, print) {
insideValueFunctionNode(path, "url")
? ""
: line,
];
]);
}
case "value-string":
return printString(
tests/format/markdown/code/__snapshots__/format.test.js.snap
+3 -3
View File
@@ -1269,9 +1269,9 @@ U+0152-0153, U+02BB-02BC, U+02C6,
local("Montserrat Regular"),
local("Montserrat-Regular"),
url("fonts/montserrat-regular.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
}
\`\`\`
tests/format/scss/map/__snapshots__/format.test.js.snap
+112 -28
View File
@@ -1,5 +1,103 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`comment.scss - {"trailingComma":"es5"} format 1`] = `
====================================options=====================================
parsers: ["scss"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
$map: (
/* comment */
key1: value,
// comment
key2: value,
/* comment */ /* comment */
key3: value,
/* comment */
key4: (
key: value,
key: value,
key: value,
key: value,
key: value,
),
);
=====================================output=====================================
$map: (
/* comment */ key1: value,
// comment
key2: value,
/* comment */ /* comment */ key3: value,
/* comment */
key4: (
key: value,
key: value,
key: value,
key: value,
key: value,
)
);
================================================================================
`;
exports[`comment.scss - {"trailingComma":"none"} format 1`] = `
====================================options=====================================
parsers: ["scss"]
printWidth: 80
trailingComma: "none"
| printWidth
=====================================input======================================
$map: (
/* comment */
key1: value,
// comment
key2: value,
/* comment */ /* comment */
key3: value,
/* comment */
key4: (
key: value,
key: value,
key: value,
key: value,
key: value,
),
);
=====================================output=====================================
$map: (
/* comment */ key1: value,
// comment
key2: value,
/* comment */ /* comment */ key3: value,
/* comment */
key4: (
key: value,
key: value,
key: value,
key: value,
key: value
)
);
================================================================================
`;
exports[`key-values.scss - {"trailingComma":"es5"} format 1`] = `
====================================options=====================================
parsers: ["scss"]
@@ -28,8 +126,7 @@ $map: (
"key": "value",
"key": "value",
"key": "value",
):
(
): (
"key": "value",
),
(
@@ -38,8 +135,7 @@ $map: (
"key": "value",
"key": "value",
"key": "value",
):
(
): (
"list",
),
(
@@ -53,8 +149,7 @@ $map: (
"list",
"list",
"list",
):
(
): (
"list",
),
(
@@ -68,8 +163,7 @@ $map: (
"list",
"list",
"list",
):
(
): (
"key": "value",
),
(
@@ -78,8 +172,7 @@ $map: (
"key": "value",
"key": "value",
"key": "value",
):
1,
): 1,
);
================================================================================
@@ -113,8 +206,7 @@ $map: (
"key": "value",
"key": "value",
"key": "value"
):
(
): (
"key": "value"
),
(
@@ -123,8 +215,7 @@ $map: (
"key": "value",
"key": "value",
"key": "value"
):
(
): (
"list"
),
(
@@ -138,8 +229,7 @@ $map: (
"list",
"list",
"list"
):
(
): (
"list"
),
(
@@ -153,8 +243,7 @@ $map: (
"list",
"list",
"list"
):
(
): (
"key": "value"
),
(
@@ -163,8 +252,7 @@ $map: (
"key": "value",
"key": "value",
"key": "value"
):
1
): 1
);
================================================================================
@@ -198,14 +286,12 @@ $map: (
(
"list",
"long long long long long long long long long long long long long list",
):
"hello world",
): "hello world",
(
"key": "value",
"long long long long long long long long long long long long long map":
"value",
):
"hello world",
): "hello world",
);
// #10000
@@ -244,14 +330,12 @@ $map: (
(
"list",
"long long long long long long long long long long long long long list"
):
"hello world",
): "hello world",
(
"key": "value",
"long long long long long long long long long long long long long map":
"value"
):
"hello world"
): "hello world"
);
// #10000
tests/format/scss/map/comment.scss
+19
View File
@@ -0,0 +1,19 @@
$map: (
/* comment */
key1: value,
// comment
key2: value,
/* comment */ /* comment */
key3: value,
/* comment */
key4: (
key: value,
key: value,
key: value,
key: value,
key: value,
),
);
tests/format/scss/map/function-argument/__snapshots__/format.test.js.snap
+6 -3
View File
@@ -28,7 +28,8 @@ $display-breakpoints: map-deep-merge(
=====================================output=====================================
$display-breakpoints: map-deep-merge(
(
"sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
"sm-only":
"only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
"sm-only":
"inside a long long long long long long long long long long long long long long string #{call("")}",
"sm-only":
@@ -149,8 +150,10 @@ $display-breakpoints: map-deep-merge(
(
"print-only": "only print",
"screen-only": "only screen",
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm") - 1})",
"sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md") - 1})",
"xs-only":
"only screen and (max-width: #{map-get($grid-breakpoints, "sm") - 1})",
"sm-only":
"only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md") - 1})",
),
$display-breakpoints
);
tests/format/scss/parens/__snapshots__/format.test.js.snap
+11 -12
View File
@@ -29,8 +29,8 @@ $icons: (
top: 73,
),
/* Should preserve empty lines */ cal-week-group:
(
/* Should preserve empty lines */
cal-week-group: (
left: 1,
top: 169,
),
@@ -52,8 +52,7 @@ printWidth: 80
=====================================output=====================================
@if true {
$newKey: (
$key:
(
$key: (
$theme-name: $value,
),
);
@@ -466,14 +465,14 @@ a {
prop22: 2 / @width 2 / @width 2 / @width 2 / @width;
prop23: (@width / 2) (@width / 2) (@width / 2) (@width / 2);
prop24: (2 / @width) (2 / @width) (2 / @width) (2 / @width);
prop25-1: #{$width}/#{$width} #{$width} /#{$width} #{$width}/ #{$width} #{$width} /
#{$width};
prop25-2: #{$width}*#{$width} #{$width} *#{$width} #{$width}* #{$width} #{$width} *
#{$width};
prop25-3: #{$width}+#{$width} #{$width} +#{$width} #{$width}+ #{$width} #{$width} +
#{$width};
prop25-4: #{$width}-#{$width} #{$width} -#{$width} #{$width}- #{$width} #{$width} -
#{$width};
prop25-1: #{$width}/#{$width} #{$width} /#{$width} #{$width}/ #{$width}
#{$width} / #{$width};
prop25-2: #{$width}*#{$width} #{$width} *#{$width} #{$width}* #{$width}
#{$width} * #{$width};
prop25-3: #{$width}+#{$width} #{$width} +#{$width} #{$width}+ #{$width}
#{$width} + #{$width};
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;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;