CSS Preprocessing in moz-central

[Sam Foster]

tldr; please don't add new preprocessor instructions to CSS files in moz-central

We've had an initiative on the books for a while to remove our use of the preprocessor on CSS files. This has been an obstacle to enabling linting and other tooling and analysis of our stylesheets. As of last week, we have reworked all the conditional preprocessor logic, preprocessor variables and %includes to use valid CSS idioms.

You can track the bugs involved in Bug 1659444 - [meta] Remove the use of the preprocessor from CSS files to enable linting and other tooling

The next steps are to wire up a linter. That is tracked as Bug 1762027 - [meta] CSS linting tracking bug. In the meantime, please avoid adding new preprocessor use to our CSS. You can look at the resolved bugs for the patterns we used, but in summary:

# Platform-specific rules:
Use @media (-moz-platform: {windows|macos|linux|android} ) media queries. The per-platform directories under browser/themes and toolkit/themes still exists, but in most cases maintenance is easier with the shared rules and exceptions in-context in the same file.

# %include
We're using @import rather than glueing together everything into one big stylesheet. (We have been keeping any eye on tests to see if there was any performance impact from this change and didn't see anything significant.)

# Variables
We had used preprocessor variables to help build complex selectors as well as property values. Nowadays we can use :is() clauses to help make a lot of complex selectors more legible, and CSS has its own variables mechanism.

If you have questions, or want to be involved in the linting effort (which isn't scheduled to start in earnest until a bit later this year) ping me on via email bugzilla, or in matrix in #fx-desktop-dev

thanks,
/Sam