1606785 - (prettier-css-format) Use Prettier for formatting CSS files

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

It would be great to have unified style formatting for all DevTools CSS files.

• Consistency across our code base
• Easier reviews
• IDE integrations (e.g. VS Code docs)
• Automation through ./mach eslint

WDYT?

Honza

Comment 1

[Sylvestre Ledru [:Sylvestre]]

What about doing it on the whole tree?

Comment 2

[Jason Laster [:jlast]]

Victor, I believe we talked about this when we discussed prettier. What do you think about linting CSS in devtools or all of tree?

Comment 3

[Andrew Halberstadt [:ahal]]

Clearing stale needinfo.

If we decide to move forward, we should dupe bug 1508369 to this.

Comment 4

[Sylvestre Ledru [:Sylvestre]]

It is being discussed (on the roadmap or not)

Comment 5

[:Gijs (he/him)]

Attachment: content browser.css formatted by prettier

Comment 6

[:Gijs (he/him)]

Attachment: Diff of content browser.css before/after prettier usage

Comment 7

[:Gijs (he/him)]

We are not planning to move forward with this at the moment. There's some summarized context in bug 1921088 comment 2.

Instead we probably want to use the stylistic-stylelint rules rolled out more widely than the new tab code, which gives us some of the same benefits described here.

Comment 8

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Enable Prettier for CSS files r=#desktop-theme-reviewers,Standard8,#frontend-codestyle-reviewers,emilio

Comment 9

[Hanna Jones [:hjones]]

Attachment: WIP: Bug 1606785 - Format Firefox CSS files using Prettier

Comment 10

[BugBot [:suhaib / :marco]]

A patch has been attached on this bug, which was already closed. Filing a separate bug will ensure better tracking. If this was not by mistake and further action is needed, please alert the appropriate party. (Or: if the patch doesn't change behavior -- e.g. landing a test case, or fixing a typo -- then feel free to disregard this message)

Comment 11

[Hanna Jones [:hjones]]

I spent some time investigating different options for formatting out CSS files and reached the conclusion that we would be better off going with Prettier over stylistic-stylelint. I wrote a doc (internal access only) covering what I did/my conclusions, but just to summarize briefly Prettier:

• integrates better with our ./mach tooling
• integrates with IDEs and code editors in a way that provides a better developer experience
• should allow us to fix most formatting/stylistic errors before code gets pushed up for review
• is already familiar to most developers and has robust community support

Additionally some of the most objectionable changes Prettier was trying to make to our CSS files are avoidable by configuring printWidth to not break lines so aggressively. Reopening this bug as I've already started the work to enable Prettier for our CSS files.

Comment 12

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=#credential-management-reviewers,mtigley,#desktop-theme-reviewers,dao

Comment 13

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format firefoxview CSS files with Prettier r=#fxview-reviewers,#desktop-theme-reviewers,dao,jsudiaman

Comment 14

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format genai and ml CSS files with Prettier r=#firefox-ai-ml-reviewers,Mardak

Comment 15

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format profiles CSS files with Prettier r=#profiles-reviewers,#desktop-theme-reviewers,dao,mossop

Comment 16

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format shopping CSS files with Prettier r=#shopping-reviewers

Comment 17

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format sidebar CSS files with Prettier r=#sidebar-reviewers,#desktop-theme-reviewers,dao,nsharpley

Comment 18

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format recomp CSS files with Prettier r=#reusable-components-reviewers,#desktop-theme-reviewers,dao,mkennedy

Comment 19

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format devtools CSS files with Prettier r=#devtools-reviewers,nchevobbe,#frontend-codestyle-reviewers

Comment 20

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format layout CSS files with Prettier r=#layout-reviewers,dholbert

Comment 21

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format android CSS files with Prettier r=#geckoview-reviewers,hiro

Comment 22

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format dom CSS files with Prettier r=emilio

Comment 23

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format search CSS files with Prettier r=#search-reviewers,jteow

Comment 24

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format webcompat CSS files with Prettier r=#webcompat-reviewers,denschub

Comment 25

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format urlbar CSS files with Prettier r=#urlbar-reviewers,#desktop-theme-reviewers,dao

Comment 26

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format browser/themes and toolkit/themes CSS files with Prettier r=#desktop-theme-reviewers,#pip-reviewers,#tabbrowser-reviewers,#places-reviewers,dao,mconley

Comment 27

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format Firefox CSS files with Prettier r=#desktop-theme-reviewers,#perftest-reviewers,#places-reviewers,#translations-reviewers,#omc-reviewers,#backup-reviewers,#browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio

Comment 28

[Hanna Jones [:hjones]]

Attachment: Bug 1606785 - Format browser/themes/preferences CSS files with Prettier r=#settings-reviewers,#desktop-theme-reviewers,dao,mconley

Comment 29

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/88eb2d77738d
Format aboutlogins, megalist, and form autofill CSS files with Prettier r=credential-management-reviewers,mtigley,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/23b8b4a15129
Format firefoxview CSS files with Prettier r=fxview-reviewers,desktop-theme-reviewers,dao,jsudiaman
https://hg.mozilla.org/integration/autoland/rev/a7bad4d85a89
Format genai and ml CSS files with Prettier r=firefox-ai-ml-reviewers,Mardak
https://hg.mozilla.org/integration/autoland/rev/72a6ba395571
Format profiles CSS files with Prettier r=profiles-reviewers,desktop-theme-reviewers,dao,mossop
https://hg.mozilla.org/integration/autoland/rev/f44ccd5a720f
Format shopping CSS files with Prettier r=shopping-reviewers,desktop-theme-reviewers,dao,rking
https://hg.mozilla.org/integration/autoland/rev/060fbf636fc5
Format sidebar CSS files with Prettier r=sidebar-reviewers,desktop-theme-reviewers,dao,nsharpley
https://hg.mozilla.org/integration/autoland/rev/e159a4e14f78
Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy
https://hg.mozilla.org/integration/autoland/rev/61d523206fe5
Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers
https://hg.mozilla.org/integration/autoland/rev/fa855659bb41
Format layout CSS files with Prettier r=layout-reviewers,dholbert
https://hg.mozilla.org/integration/autoland/rev/d73e071cbcb4
Format android CSS files with Prettier r=geckoview-reviewers,hiro
https://hg.mozilla.org/integration/autoland/rev/739b2db7da97
Format dom CSS files with Prettier r=emilio
https://hg.mozilla.org/integration/autoland/rev/f585fc0e8692
Format search CSS files with Prettier r=search-reviewers,jteow
https://hg.mozilla.org/integration/autoland/rev/f7e68782eee8
Format webcompat CSS files with Prettier r=webcompat-reviewers,denschub
https://hg.mozilla.org/integration/autoland/rev/af93b4da60bf
Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/85bc8f178bd7
Format browser/themes/preferences CSS files with Prettier r=settings-reviewers,desktop-theme-reviewers,dao,mconley
https://hg.mozilla.org/integration/autoland/rev/73dc5c4fc8d5
Format browser/themes and toolkit/themes CSS files with Prettier r=desktop-theme-reviewers,pip-reviewers,tabbrowser-reviewers,places-reviewers,dao,mconley
https://hg.mozilla.org/integration/autoland/rev/e84a5f22940f
Format Firefox CSS files with Prettier r=desktop-theme-reviewers,perftest-reviewers,places-reviewers,translations-reviewers,omc-reviewers,backup-reviewers,browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio
https://hg.mozilla.org/integration/autoland/rev/cc9827cb71e9
Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio

Comment 30

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bfb13a2be9d5
Revert "Bug 1606785 - Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio" for causing multiple failures.

Comment 31

[agoloman]

Backed out for causing multiple failures.

• Backout link
• Push with failures
• Failure Log dt @browser_rules_copy_styles.js
• Failure Log mozlint
• Failure Log SM @ struct-fields.js

Comment 32

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b10012be5d43
Format aboutlogins, megalist, and form autofill CSS files with Prettier r=credential-management-reviewers,mtigley,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/85fb16265b32
Format firefoxview CSS files with Prettier r=fxview-reviewers,desktop-theme-reviewers,dao,jsudiaman
https://hg.mozilla.org/integration/autoland/rev/9d0eb46721e2
Format genai and ml CSS files with Prettier r=firefox-ai-ml-reviewers,Mardak
https://hg.mozilla.org/integration/autoland/rev/86bb0e6d3c36
Format profiles CSS files with Prettier r=profiles-reviewers,desktop-theme-reviewers,dao,mossop
https://hg.mozilla.org/integration/autoland/rev/4045a0e95372
Format sidebar CSS files with Prettier r=sidebar-reviewers,desktop-theme-reviewers,dao,nsharpley
https://hg.mozilla.org/integration/autoland/rev/4ae3860a63bc
Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy
https://hg.mozilla.org/integration/autoland/rev/fe857c0eaa35
Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers
https://hg.mozilla.org/integration/autoland/rev/0f18da6e25ec
Format layout CSS files with Prettier r=layout-reviewers,dholbert

Comment 33

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/509b0ce5a617
Format android CSS files with Prettier r=geckoview-reviewers,hiro
https://hg.mozilla.org/integration/autoland/rev/f2aac34af2e9
Format dom CSS files with Prettier r=emilio
https://hg.mozilla.org/integration/autoland/rev/a05e0c7a4de3
Format search CSS files with Prettier r=search-reviewers,jteow
https://hg.mozilla.org/integration/autoland/rev/c6654494b739
Format webcompat CSS files with Prettier r=webcompat-reviewers,denschub,twisniewski
https://hg.mozilla.org/integration/autoland/rev/bea2b9e6b9a7
Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/fa19eaf842b6
Format browser/themes/preferences CSS files with Prettier r=settings-reviewers,desktop-theme-reviewers,dao,mconley
https://hg.mozilla.org/integration/autoland/rev/cc2a6d98ffb4
Format browser/themes and toolkit/themes CSS files with Prettier r=desktop-theme-reviewers,pip-reviewers,tabbrowser-reviewers,places-reviewers,dao,mconley
https://hg.mozilla.org/integration/autoland/rev/01b13f86a4ac
Format Firefox CSS files with Prettier r=desktop-theme-reviewers,perftest-reviewers,places-reviewers,translations-reviewers,omc-reviewers,backup-reviewers,browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio

Comment 34

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/593d12c6549d
Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio

Comment 35

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/b10012be5d43
https://hg.mozilla.org/mozilla-central/rev/85fb16265b32
https://hg.mozilla.org/mozilla-central/rev/9d0eb46721e2
https://hg.mozilla.org/mozilla-central/rev/86bb0e6d3c36
https://hg.mozilla.org/mozilla-central/rev/4045a0e95372
https://hg.mozilla.org/mozilla-central/rev/4ae3860a63bc
https://hg.mozilla.org/mozilla-central/rev/fe857c0eaa35
https://hg.mozilla.org/mozilla-central/rev/0f18da6e25ec
https://hg.mozilla.org/mozilla-central/rev/509b0ce5a617
https://hg.mozilla.org/mozilla-central/rev/f2aac34af2e9
https://hg.mozilla.org/mozilla-central/rev/a05e0c7a4de3
https://hg.mozilla.org/mozilla-central/rev/c6654494b739
https://hg.mozilla.org/mozilla-central/rev/bea2b9e6b9a7
https://hg.mozilla.org/mozilla-central/rev/fa19eaf842b6
https://hg.mozilla.org/mozilla-central/rev/cc2a6d98ffb4
https://hg.mozilla.org/mozilla-central/rev/01b13f86a4ac
https://hg.mozilla.org/mozilla-central/rev/593d12c6549d