Reverts #7865, keeping class names on the same line (#11827)

* Reverts #7865, keeping class names on the same line

* Add changelog

* Fix lint

* Fix

Co-authored-by: fisker Cheung <lionkay@gmail.com>
This commit is contained in:
James Longandfisker Cheung authored and GitHub committed 2021-11-18 16:10:41 +09:00
1 parent 722418ed2c
commit 6bf6b20aed
5 files changed
+76 -360

No files matched your search

+1
View File
@@ -0,0 +1 @@
#### Reverts #7865, keeping class names on the same line (#11827 by @jlongster)
+2 -45
View File
@@ -1,9 +1,8 @@
"use strict";
const parseSrcset = require("parse-srcset");
const getLast = require("../utils/get-last.js");
const {
builders: { group, ifBreak, indent, join, line, softline },
builders: { ifBreak, join, line },
} = require("../document/index.js");
function printImgSrcset(value) {
@@ -60,50 +59,8 @@ function printImgSrcset(value) {
);
}
const prefixDelimiters = [":", "__", "--", "_", "-"];
function getClassPrefix(className) {
const startIndex = className.search(/[^_-]/);
if (startIndex !== -1) {
for (const delimiter of prefixDelimiters) {
const delimiterIndex = className.indexOf(delimiter, startIndex);
if (delimiterIndex !== -1) {
return className.slice(0, delimiterIndex);
}
}
}
return className;
}
function printClassNames(value) {
const classNames = value.trim().split(/\s+/);
// Try keeping consecutive classes with the same prefix on one line.
const groupedByPrefix = [];
let previousPrefix;
for (let i = 0; i < classNames.length; i++) {
const prefix = getClassPrefix(classNames[i]);
if (
prefix !== previousPrefix &&
// "home-link" and "home-link_blue_yes" should be considered same-prefix
prefix !== classNames[i - 1]
) {
groupedByPrefix.push([]);
}
getLast(groupedByPrefix).push(classNames[i]);
previousPrefix = prefix;
}
return [
indent([
softline,
join(
line,
groupedByPrefix.map((classNames) => group(join(line, classNames)))
),
]),
softline,
];
return value.trim().split(/\s+/).join(" ");
}
module.exports = {
@@ -110,9 +110,7 @@ printWidth: 1
</div>
<div
class="
common--error-message
"
class="common--error-message"
test-hook="upper-error-message"
ng-if="
!$ctrl.showsFormBelowPlain() &&
@@ -3471,16 +3469,7 @@ printWidth: 1
}}
</label>
<div
class="
Nemo
possimus
non
voluptates
dicta
accusamus
id
quia
"
class="Nemo possimus non voluptates dicta accusamus id quia"
>
{{
copyTypes[
@@ -8063,9 +8052,7 @@ can be found in the LICENSE file at http://angular.io/license
</p>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8086,9 +8073,7 @@ can be found in the LICENSE file at http://angular.io/license
[hidden]="isUnchanged")
</p>
<div
class="
context
"
class="context"
>
{{
title
@@ -8135,9 +8120,7 @@ can be found in the LICENSE file at http://angular.io/license
(keyup)="
(0)
"
class="
context
"
class="context"
>
Type
something:
@@ -8150,9 +8133,7 @@ can be found in the LICENSE file at http://angular.io/license
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8174,9 +8155,7 @@ can be found in the LICENSE file at http://angular.io/license
)
</p>
<div
class="
context
"
class="context"
>
<button
(click)="
@@ -8195,9 +8174,7 @@ can be found in the LICENSE file at http://angular.io/license
context
</p>
<div
class="
context
"
class="context"
>
<button
(click)="
@@ -8221,9 +8198,7 @@ can be found in the LICENSE file at http://angular.io/license
</p>
<!-- template hides the following; plenty of examples later -->
<div
class="
context
"
class="context"
>
<button
*ngFor="
@@ -8250,9 +8225,7 @@ can be found in the LICENSE file at http://angular.io/license
(#heroForm)
</p>
<div
class="
context
"
class="context"
>
<form
#heroForm
@@ -8267,9 +8240,7 @@ can be found in the LICENSE file at http://angular.io/license
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8287,9 +8258,7 @@ can be found in the LICENSE file at http://angular.io/license
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div
class="
special
"
class="special"
>
Mental
Model
@@ -8307,9 +8276,7 @@ can be found in the LICENSE file at http://angular.io/license
<div>
<!-- Normal HTML -->
<div
class="
special
"
class="special"
>
Mental
Model
@@ -8421,9 +8388,7 @@ can be found in the LICENSE file at http://angular.io/license
</button>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8466,9 +8431,7 @@ can be found in the LICENSE file at http://angular.io/license
/>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8545,9 +8508,7 @@ can be found in the LICENSE file at http://angular.io/license
</button>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8709,9 +8670,7 @@ can be found in the LICENSE file at http://angular.io/license
</p>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8805,9 +8764,7 @@ can be found in the LICENSE file at http://angular.io/license
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8823,11 +8780,7 @@ can be found in the LICENSE file at http://angular.io/license
<!-- standard class attribute setting -->
<div
class="
bad
curly
special
"
class="bad curly special"
>
Bad
curly
@@ -8836,11 +8789,7 @@ can be found in the LICENSE file at http://angular.io/license
<!-- reset/override all class names with a binding -->
<div
class="
bad
curly
special
"
class="bad curly special"
[class]="
badCurly
"
@@ -8864,9 +8813,7 @@ can be found in the LICENSE file at http://angular.io/license
<!-- binding to \`class.special\` trumps the class attribute -->
<div
class="
special
"
class="special"
[class.special]="
!isSpecial
"
@@ -8893,9 +8840,7 @@ can be found in the LICENSE file at http://angular.io/license
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -8948,9 +8893,7 @@ can be found in the LICENSE file at http://angular.io/license
</button>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9025,9 +8968,7 @@ can be found in the LICENSE file at http://angular.io/license
</app-big-hero-detail>
<div
class="
parent-div
"
class="parent-div"
(click)="
onClickMe(
$event
@@ -9038,9 +8979,7 @@ can be found in the LICENSE file at http://angular.io/license
Click
me
<div
class="
child-div
"
class="child-div"
>
Click
me
@@ -9087,9 +9026,7 @@ can be found in the LICENSE file at http://angular.io/license
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9147,9 +9084,7 @@ can be found in the LICENSE file at http://angular.io/license
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9222,9 +9157,7 @@ bindon-ngModel
(ngModelChange)="setUppercaseName($event)"
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9349,11 +9282,7 @@ bindon-ngModel
</div>
<div
class="
bad
curly
special
"
class="bad curly special"
>
Bad
curly
@@ -9371,9 +9300,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9506,9 +9433,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9636,9 +9561,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9653,9 +9576,7 @@ bindon-ngModel
</h2>
<div
class="
box
"
class="box"
>
<div
*ngFor="
@@ -9670,9 +9591,7 @@ bindon-ngModel
<br />
<div
class="
box
"
class="box"
>
<!-- *ngFor w/ hero-detail Component -->
<app-hero-detail
@@ -9686,9 +9605,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9708,9 +9625,7 @@ bindon-ngModel
separator
</p>
<div
class="
box
"
class="box"
>
<div
*ngFor="
@@ -9737,9 +9652,7 @@ bindon-ngModel
separator
</p>
<div
class="
box
"
class="box"
>
<!-- Ex: "1 - Hercules" -->
<div
@@ -9760,9 +9673,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -9805,9 +9716,7 @@ bindon-ngModel
trackBy
</p>
<div
class="
box
"
class="box"
>
<div
#noTrackBy
@@ -9846,9 +9755,7 @@ bindon-ngModel
trackBy
</p>
<div
class="
box
"
class="box"
>
<div
#withTrackBy
@@ -9895,9 +9802,7 @@ bindon-ngModel
separator
</p>
<div
class="
box
"
class="box"
>
<div
*ngFor="
@@ -9924,9 +9829,7 @@ bindon-ngModel
separator
</p>
<div
class="
box
"
class="box"
>
<div
*ngFor="
@@ -9953,9 +9856,7 @@ bindon-ngModel
separator
</p>
<div
class="
box
"
class="box"
>
<div
*ngFor="
@@ -9981,9 +9882,7 @@ bindon-ngModel
function
</p>
<div
class="
box
"
class="box"
>
<div
*ngFor="
@@ -10001,9 +9900,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10096,9 +9993,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10166,9 +10061,7 @@ bindon-ngModel
></app-hero-form>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10222,9 +10115,7 @@ bindon-ngModel
}}
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10302,9 +10193,7 @@ bindon-ngModel
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10401,9 +10290,7 @@ See console log:
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10440,9 +10327,7 @@ See console log:
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10494,9 +10379,7 @@ See console log:
</div>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10558,9 +10441,7 @@ See console log:
</p>
<a
class="
to-toc
"
class="to-toc"
href="#toc"
>top</a
>
@@ -10583,17 +10464,13 @@ can be found in the LICENSE file at http://angular.io/license
#heroForm="ngForm"
>
<div
class="
form-group
"
class="form-group"
>
<label
for="name"
>Name
<input
class="
form-control
"
class="form-control"
name="name"
required
[(ngModel)]="
@@ -253,29 +253,17 @@ printWidth: 80
=====================================output=====================================
<div
class="
ProviderMeasuresContainer__heading-row
d-flex
flex-column flex-lg-row
justify-content-start justify-content-lg-between
align-items-start align-items-lg-center
"
class="ProviderMeasuresContainer__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
>
Foo
</div>
<div class="a-bem-block a-bem-block--with-modifer">
<div
class="
a-bem-block__element a-bem-block__element--with-modifer
also-another-block
"
class="a-bem-block__element a-bem-block__element--with-modifer also-another-block"
>
<div
class="
a-bem-block__element a-bem-block__element--with-modifer
also-another-block__element
"
class="a-bem-block__element a-bem-block__element--with-modifer also-another-block__element"
></div>
</div>
</div>
@@ -316,11 +304,7 @@ printWidth: 80
<div class="news__tabs">
<h1 class="news__tab-wrapper news__head-item">
<a
class="
home-link home-link_blue_yes
news__tab news__tab_selected_yes
mix-tabber__tab mix-tabber__tab_selected_yes
"
class="home-link home-link_blue_yes news__tab news__tab_selected_yes mix-tabber__tab mix-tabber__tab_selected_yes"
tabindex="0"
aria-selected="true"
aria-controls="news_panel_news"
@@ -351,12 +335,7 @@ printWidth: 80
=====================================output=====================================
<my-tag
class="
md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color
xl:foo xl:prefix2
--prefix2--something-else
unrelated_class_to_fill_80_chars
"
class="md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color xl:foo xl:prefix2 --prefix2--something-else unrelated_class_to_fill_80_chars"
></my-tag>
================================================================================
@@ -374,21 +353,11 @@ printWidth: 80
=====================================output=====================================
<my-tag
class="
__prefix1__foo __prefix1__bar
__prefix2__foo
prefix2 prefix2--something
--prefix2--something-else
"
class="__prefix1__foo __prefix1__bar __prefix2__foo prefix2 prefix2--something --prefix2--something-else"
></my-tag>
<my-tag
class="
--prefix1--foo --prefix1--bar
--prefix2--foo
prefix2 prefix2__something
__prefix2__something_else
"
class="--prefix1--foo --prefix1--bar --prefix2--foo prefix2 prefix2__something __prefix2__something_else"
></my-tag>
================================================================================
@@ -408,18 +377,7 @@ printWidth: 80
=====================================output=====================================
<div
aria-hidden="true"
class="
border
rounded-1
flex-shrink-0
bg-gray
px-1
text-gray-light
ml-1
f6
d-none d-on-nav-focus
js-jump-to-badge-jump
"
class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"
>
Jump to
<span class="d-inline-block ml-1 v-align-middle">x</span>
@@ -490,41 +448,11 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
=====================================output=====================================
<img class="foo bar" />
<img class="" />
<img class=" " />
<img class />
<img
class="
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
a-long-long-long-long-long-class-name
another-long-long-long-class-name
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
foo
bar
"
class="looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong a-long-long-long-long-long-class-name another-long-long-long-class-name foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar"
/>
<img class="{{ ...classes }}" />
@@ -537,34 +465,10 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
<!-- from yahoo website -->
<div
id="header-wrapper"
class="
Bgc(#fff)
Bdbc(t)
Bdbs(s)
Bdbw(1px)
D(tb)
Pos(f)
Tbl(f)
W(100%)
Z(4)
has-scrolled_Bdc($c-fuji-grey-d)
Scrolling_Bdc($c-fuji-grey-d)
has-scrolled_Bxsh($headerShadow)
Scrolling_Bxsh($headerShadow)
"
class="Bgc(#fff) Bdbc(t) Bdbs(s) Bdbw(1px) D(tb) Pos(f) Tbl(f) W(100%) Z(4) has-scrolled_Bdc($c-fuji-grey-d) Scrolling_Bdc($c-fuji-grey-d) has-scrolled_Bxsh($headerShadow) Scrolling_Bxsh($headerShadow)"
>
<div
class="
Bgc(#fff)
M(a)
Maw(1301px)
Miw(1000px)
Pb(12px)
Pt(22px)
Pos(r)
TranslateZ(0)
Z(6)
"
class="Bgc(#fff) M(a) Maw(1301px) Miw(1000px) Pb(12px) Pt(22px) Pos(r) TranslateZ(0) Z(6)"
>
<h1 class="Fz(0) Pstart(15px) Pos(a)">
<a
@@ -599,14 +503,7 @@ printWidth: 80
=====================================output=====================================
<div
aria-hidden="true"
class="
border
rounded-1
flex-shrink-0
bg-gray
px-1
loooooooooooooooooooooooong
"
class="border rounded-1 flex-shrink-0 bg-gray px-1 loooooooooooooooooooooooong"
></div>
================================================================================
@@ -3316,18 +3316,14 @@ printWidth: 1
<ul>
123
<li
class="
foo
"
class="foo"
id="bar"
>
First
</li>
456
<li
class="
baz
"
class="baz"
>
Second
</li>
@@ -3469,25 +3465,13 @@ printWidth: 1
</div>
<span>
<i
class="
fa
fa-refresh
fa-spin
"
class="fa fa-refresh fa-spin"
/>
<i
class="
fa
fa-refresh
fa-spin
"
class="fa fa-refresh fa-spin"
/>
<i
class="
fa
fa-refresh
fa-spin
"
class="fa fa-refresh fa-spin"
/>
</span>