Closed Bug 1659444 Opened 4 years ago Closed 1 year ago

[meta] Remove the use of the preprocessor from CSS files to enable linting and other tooling


(Firefox :: General, task)




Tracking Status
firefox81 --- affected


(Reporter: Gijs, Unassigned)


(Blocks 3 open bugs)


(Keywords: meta)

This is a metabug for a project to stop using the preprocessor for our CSS. This will enable the use of tooling/linting on more of our CSS, which will help with keeping a consistent code style and making sure our CSS is accessible/understandable for new folks.

The plan was developed in conversation with Dave and Dão, and articulated in .

Roughly, it involves the following steps (for which I'll file deps):

  1. Rename CSS file ending in .inc to .inc.css
  2. Replace our use of preprocessor variables (%define) with CSS variables.
  3. Replace conditionals with other constructs (removing obsolete things, or changing to comments, variables, selectors or commented out preprocessor conditionals for UA sheets)
  4. Package shared theme files into a shared/ subdirectory of the skin (theme) package, instead of packaging them into the same directory as the OS-specific ones.
  5. Replace includes by either unifying files so we just have 1 shared file, inlining them, or using @import from a shared location.
Depends on: 1659445
Depends on: 1580487
Depends on: 1659576
Depends on: 1659579
Depends on: 1659583
Depends on: 1659584
See Also: → 1661676
Assignee: nobody → bigiri
Assignee: bigiri → nobody

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: General → CSS Parsing and Computation
Product: Firefox → Core
Component: CSS Parsing and Computation → General
Product: Core → Firefox
Depends on: 1747459
No longer depends on: 1580487

I'm removing bug 1659576 as dependency, as while that is something we might still want to do, it is orthogonal to removing our use of the preprocessor. Linting CSS files should now be possible. Enabling tools to traverse the tree of stylesheets will need those tools to have knowledge of the manifests and how we package CSS however - which I think was the intention behind bug 1659576.

No longer depends on: 1659576
Depends on: 1761391
See Also: prettier-css-format
See Also: 1508369
See Also: → 1756540

I think we managed to check all the boxes from comment #0. All the preprocessor directives from .css files across mozilla-central were removed, we got all the .inc files into .css and these are now @imported. We were able to rationalize most of the shared stylesheet paths. This bug blocks 1762027 and I think its fair to say that blocker is removed at this point.

Closed: 1 year ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.