1531099 - Reduce CSS regressions with automation (e.g., selectors that become unused)

Status: RESOLVED DUPLICATE of bug 1531104

(Firefox :: New Tab Page, enhancement, P3)

Description

[Ed Lee :Mardak]

There were a number of recent visual regressions, e.g., bug 1527437, bug 1526861, bug 1527195, and parts of various design tweaks related ones re-adjusting styles.

Potentially all of these would have been caught by some automation that noticed CSS rules no longer being applied because html structure changed or selector incorrectly updated.

One tricky aspect is that there would need to be a relatively complete set of components to render making sure we get appropriate coverage.

I believe k88hudson said there should be tooling available for something like this?

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

There are a variety of tools to do this sort of thing, some pointers are available at

https://stackoverflow.com/questions/135657/how-to-identify-unused-css-definitions

and there's undoubtedly plenty more, probably including stuff based on PostCSS.

We could probably do something without depending on complete component coverage (a la Storybook) for at least the home page (eg by snapshotting dev-test-all regularly and rendering that).

Comment 2

[Jessilyn Davis]

Moving to backlog. Punam to link to JEST conversion that needs to happen before this work can be tackled.

Comment 3

[Punam Dahiya [:pdahiya]]

Unit tests work need to chalked out and is tracked under meta bug https://bugzilla.mozilla.org/show_bug.cgi?id=1459773

I propose tackling this work with https://bugzilla.mozilla.org/show_bug.cgi?id=1531104 which explore using story book to avoid regressing visual components.