Skip to content

Commit 136b816

Browse files
alexander-akaitalexander-akait
committed
fix(css): keep none for outline and column-rule, whose medium width computes as 3px
1 parent f01eabb commit 136b816

6 files changed

Lines changed: 16 additions & 13 deletions

File tree

‎lib/css/syntax-printer.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4158,12 +4158,13 @@ const _standardSpelling = (property) => {
41584158
};
41594159

41604160
/**
4161-
* Whether a shorthand sets a style and the width it zeroes when `none`: a border,
4162-
* a border side, an outline or a column rule, read off its longhands.
4161+
* Whether a shorthand sets a style and the width it zeroes when `none`: a border
4162+
* or a border side. An outline or column rule computes its `medium` width as 3px.
41634163
* @param {string} property the shorthand's lowercased name
4164-
* @returns {boolean} true when its `none` and `0` set the same longhands
4164+
* @returns {boolean} true when its `none` and `0` compute alike
41654165
*/
41664166
const _styleZeroesWidth = (property) => {
4167+
if (!property.startsWith("border")) return false;
41674168
const longhands = getShorthandLonghands().get(property);
41684169
return (
41694170
longhands !== undefined &&

‎test/configCases/css/minimize-pseudo-classes/__snapshots__/ConfigCacheTest.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`ConfigCacheTestCases css minimize-pseudo-classes minimize-pseudo-classes should compile 1`] = `
44
Array [
55
"/*! a pseudo-class the caller asked to be written as a class */.button.focus-visible{outline:2px solid}",
6-
"/*! ...at any depth, since the argument holds selectors of its own */.button:not(.focus-visible){outline:0}",
6+
"/*! ...at any depth, since the argument holds selectors of its own */.button:not(.focus-visible){outline:none}",
77
"/*! ...while one nothing named stays the pseudo-class it is */.button:focus{color:red}",
88
]
99
`;

‎test/configCases/css/minimize-pseudo-classes/__snapshots__/ConfigTest.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`ConfigTestCases css minimize-pseudo-classes minimize-pseudo-classes should compile 1`] = `
44
Array [
55
"/*! a pseudo-class the caller asked to be written as a class */.button.focus-visible{outline:2px solid}",
6-
"/*! ...at any depth, since the argument holds selectors of its own */.button:not(.focus-visible){outline:0}",
6+
"/*! ...at any depth, since the argument holds selectors of its own */.button:not(.focus-visible){outline:none}",
77
"/*! ...while one nothing named stays the pseudo-class it is */.button:focus{color:red}",
88
]
99
`;

‎test/configCases/css/minimize-values/__snapshots__/ConfigCacheTest.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ Array [
210210
"/*! webpack: a zero time keeps a unit, and \`s\` is the shorter one it can carry */.t98{transition-duration:0s}",
211211
"/*! webpack: a shorthand slot holding its own initial goes, and a slot taking a
212212
length or a color is read by the classes a sibling's own value is in — every
213-
slot holding its initial leaves the shortest of them saying all of them */.t98a{border:0}.t98b{column-rule:0}.t98c{border:solid red}",
213+
slot holding its initial leaves the shortest of them saying all of them */.t98a{border:0}.t98b{column-rule:none}.t98c{border:solid red}",
214214
"/*! declined: a sibling filling the slot keeps the initial there */.t98d{border:medium 1px}.t98e{border:currentcolor red}",
215215
"/*! webpack: a component spelling the property's own initial says nothing beside
216216
another — omitting its group leaves exactly that keyword */.t99{grid-auto-flow:dense}",

‎test/configCases/css/minimize-values/__snapshots__/ConfigTest.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ Array [
210210
"/*! webpack: a zero time keeps a unit, and \`s\` is the shorter one it can carry */.t98{transition-duration:0s}",
211211
"/*! webpack: a shorthand slot holding its own initial goes, and a slot taking a
212212
length or a color is read by the classes a sibling's own value is in — every
213-
slot holding its initial leaves the shortest of them saying all of them */.t98a{border:0}.t98b{column-rule:0}.t98c{border:solid red}",
213+
slot holding its initial leaves the shortest of them saying all of them */.t98a{border:0}.t98b{column-rule:none}.t98c{border:solid red}",
214214
"/*! declined: a sibling filling the slot keeps the initial there */.t98d{border:medium 1px}.t98e{border:currentcolor red}",
215215
"/*! webpack: a component spelling the property's own initial says nothing beside
216216
another — omitting its group leaves exactly that keyword */.t99{grid-auto-flow:dense}",

‎test/unitCases/CssSyntax.unittest.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4755,7 +4755,7 @@ describe("CssSyntax minify — the value transforms' rejection paths", () => {
47554755
// A family reads each slot by what it takes, so a width and a color are
47564756
// answered for as well as a keyword: both of these hold their initial.
47574757
["a{column-rule:medium none red}", "a{column-rule:red}"],
4758-
["a{outline:medium none}", "a{outline:0}"],
4758+
["a{outline:medium none}", "a{outline:none}"],
47594759
["a{flex-flow:row wrap}", "a{flex-flow:wrap}"],
47604760
// Both slots hold their initial, so the shortest one says both — whichever
47614761
// order they were written in.
@@ -4787,7 +4787,7 @@ describe("CssSyntax minify — the value transforms' rejection paths", () => {
47874787
["a{border:medium solid red}", "a{border:solid red}"],
47884788
["a{border:medium none currentcolor}", "a{border:0}"],
47894789
["a{border:none medium}", "a{border:0}"],
4790-
["a{column-rule:medium none currentcolor}", "a{column-rule:0}"],
4790+
["a{column-rule:medium none currentcolor}", "a{column-rule:none}"],
47914791
// ...and a sibling that is one keeps it.
47924792
["a{border:medium 1px}", "a{border:medium 1px}"],
47934793
["a{border:currentcolor red}", "a{border:currentcolor red}"]
@@ -9369,10 +9369,10 @@ describe("CssSyntax minify — vendor prefixes (spellings an engine dropped)", (
93699369
// `-moz-outline` went in Firefox 3.6; the property it stood for is filed as
93709370
// complete only from 88, which is not where the spelling stopped working.
93719371
expect(minifyFor("a{outline:none}", ["firefox 40"])).toBe(
9372-
"a{outline:0}"
9372+
"a{outline:none}"
93739373
);
93749374
expect(minifyFor("a{outline:none}", ["firefox 3"])).toBe(
9375-
"a{-moz-outline:0;outline:0}"
9375+
"a{-moz-outline:none;outline:none}"
93769376
);
93779377
});
93789378

@@ -15070,10 +15070,12 @@ describe("CssSyntax minify — what a comparison with other minifiers found", ()
1507015070

1507115071
it.each([
1507215072
["a{border:none}", "a{border:0}"],
15073-
["a{outline:NONE!important}", "a{outline:0!important}"],
15073+
["a{border:NONE!important}", "a{border:0!important}"],
1507415074
["a{border-top:none}", "a{border-top:0}"],
1507515075
["a{border-block-end:none}", "a{border-block-end:0}"],
15076-
["a{column-rule:none}", "a{column-rule:0}"],
15076+
// `medium` computes as 3px for these whatever the style, so `0` differs.
15077+
["a{outline:none}", "a{outline:none}"],
15078+
["a{column-rule:none}", "a{column-rule:none}"],
1507715079
// No width beside the style here, so `none` stays the one word.
1507815080
["a{border-style:none}", "a{border-style:none}"],
1507915081
["a{text-decoration:none}", "a{text-decoration:none}"]

0 commit comments

Comments
 (0)