Move CSS longhands outside of mako

[emilio]

We use the mako template system to autogenerate code.

Ideally, we'd like to use a manifest and use Rust to generate it instead. For that, we need to move all the remaining CSS properties (most of them have been moved already) outside of Mako. That is the same as saying: We should make all those use ${helpers.predefined_type(..)}.

This is mostly moving and cleaning up code in the same way as #19002 and #19005, but there are probably bugs along the way that may need fixing (like the calc() bug I added a test for in #19005).

If you want to help out with this, please comment on this issue or reach out on IRC (#servo in irc.mozilla.org) and we'll find one which is interesting to you.

Or, you can also file an issue and mention this one and I'll get it assigned to you.

Known properties still using mako:

• In text.mako.rs:
  • text-overflow (style: Move text-overflow outside of mako #19044)
  • text-decoration-line (Move text-decoration-line out of mako #19211)
• In inherited_text.mako.rs:
  • text-align (style: Move text-align outside of the mako file. #19576)
  • -servo-text-decorations-in-effect (style: Remove -servo-text-decorations-in-effect #19757)
  • text-emphasis-style (Move text-emphasis-style outside of mako #19940)
  • text-emphasis-position (Move text-emphasis-position outside of mako #19961)
• In inherited_svg.mako.rs:
  • paint-order (Move paint-order outside of mako. #19736)
  • -moz-context-properties (style: Move -moz-context-properties outside of mako #19742)
• In box.mako.rs:
  • display (Move display outside of mako. #19658)
  • -servo-display-for-hypothetical-box (Move -servo-display-for-hypothetical-box outside of mako. #19697)
  • overflow-y (Move overflow-y outside of Mako #19183)
  • transform (I think @Manishearth was doing stuff with this one)
  • scroll-snap-type-y (style: Cleanup a bit the scroll-snap-type properties. #19018)
  • contain (Move contain outside of mako. #19656)
  • will-change (Move will-change outside of mako. #19582)
  • touch-action (Move touch-action outside of mako. #19645)
• In list.mako.rs:
  • list-style-type (Move list-style-type outside of mako #19629)
  • list-style-image (Move list-style-image outside of mako. #19557)
  • quotes (Move list quotes out of mako. #19556)
• In inherited_box.mako.rs:
  • image-orientation (Move image-orientation outside of mako #19765)
• In ui.mako.rs:
  • -moz-force-broken-image-icon (style: Move -moz-force-broken-image-icon out of mako #19279)
• In pointing.mako.rs:
  • cursor (style: Move cursor property from mako #19775)
• In outline.mako.rs:
  • outline-style (Move outline-style outside of mako. #19546)
• In border.mako.rs:
  • -moz-border-*-colors (Move -moz-border-*-colors outside of mako. #19671)
  • border-image-repeat (Move border-image-repeat outside of mako. #19142, presumably a great first bug, should be mostly like style: Move background-repeat and mask-repeat outside of mako.  #19002)
• In position.mako.rs:
  • grid-auto-flow (Move grid-auto-flow outside of mako. #19375)
  • grid-template-areas (Move grid-template-areas outside of mako. #19409)
• In table.mako.rs:
  • -x-span (style: Move table -x-span outisde of mako #19036)
• In svg.mako.rs:
  • mask-size (Move mask-size outside of mako. #19467)
• In counters.mako.rs:
  • content (style: Move content property out of Mako. #19936)
  • counter-increment (style: moved css longhand counter-reset out of mako #19529)
  • counter-reset (Move counter-reset outside of mako #19387)
• In font.mako.rs:
  • font-family (Move font-family outside of mako. #19355)
  • font-weight (style: Move font-weight outside of mako #19086)
  • font-size (Move font-size outside of mako. #19111)
  • font-size-adjust (Move font-size-adjust outside of mako. #19151)
  • font-synthesis (Move font-synthesis outside of mako. #19160)
  • font-variant-alternates (Move font-variant-alternates outside of mako. #19166)
  • font-variant-east-asian (Move font-variant-east-asian outside of mako. #19216)
  • font-variant-ligatures (Move font-variant-ligatures outside of mako. #19246)
  • font-variant-numeric (Move font-variant-numeric outside of mako. #19276)
  • font-feature-settings (Move font-feature-settings outside of mako. #19290)
  • font-variation-settings (Move font-variation-settings outside of mako. #19208)
  • font-language-override (Move font-language-override outside of mako. #19187)
  • -x-lang (Move -x-lang outside of mako. #19320)
  • -moz-script-size-multiplier (Move -moz-script-size-multiplier outside of mako. #19333)
  • -moz-script-level (Move -moz-script-level outside of mako. #19068)
  • -moz-script-min-size (Move -moz-script-min-size outside of mako. #19034)
  • -x-text-zoom (Move -x-text-zoom outside of mako. #19020)

FAQ

How do I get started? How can I make any sense of the code?

This code lives in compontents/style/properties/longhands. Note that some of the code is Firefox-specific (properties marked with products="gecko", so you may need to do ./mach build-geckolib or ./mach cargo-geckolib check in order to build and see).

Please ask here, in #servo, or open an issue like #19020 and say that you want to work on it.

Ask questions! I (or any of the other Servo members and contributors) are happy to help :)

What's the general setup?

Each CSS property has two different representations: The "specified" one (the one people write in the stylesheets), and the "computed" one. Sometimes they are the same, sometimes they're different.

So for example if you write width: 1em in a CSS style sheet, the "specified" value is 1em, but the "computed" value could be, for example, 10px, if the parent font-size is 10px.

So the way this is organized is roughly as follows: We have two rust modules inside compontents/style/values. The computed and the specified (there are others, but those shouldn't worry you).

The first argument for predefined_type is the CSS property name.

The second argument is the name of the type that becomes computed::$name or specified::$name, depending on the appropriate context. For example, in #19018, both are the same (computed::ScrollSnapType just re-exports specified::ScrollSnapType).

The third argument is the initial computed value of the property. The rest of the arguments are key-value pairs with various meanings, that we should probably preserve intact. If there are any questions about a particular argument feel free to ask though!

Which ones are easier? Which ones are harder?

In general, the level of difficulty relates with the amount that lies inside the mako section of that property.

For example, transform is huge, and is fairly non-trivial, while probably others like overflow-y are easy to refactor like #19018.

But again, please ask if you're unsure and we'll try to answer! :)

[Manishearth]

Yes!

I'm currently doing transform stuff though I may not do the extra step of predefined typing it.

[SimonSapin]

We use the mako template system to autogenerate code.

Ideally, we'd like to use a manifest, and use Rust to generate it instead.

Before we go through every property and move code around, maybe we could talk a little bit about what design we want?

For example, maybe instead of the pattern of having modules that are expected to define a few items of certain kinds with certain names, we could rely on the hot new language feature of associated types. That kind of things.

[SimonSapin]

After clarifying on IRC, it turns out that the changes I had in mind are mostly orthogonal with what this issue is about. So, carry on :)

[Manishearth]

We should also split up gecko.mako.rs into gecko.rs + gecko.mako.rs or something. All the manual impls go in gecko.rs. You can have multiple impl blocks for a type so that's fine.

[Manishearth]

Ideally, when debugging code it would be nice to never/rarely have to look at an autogenerated file and map its contents back to the "real" source.

[chansuke]

@emilio Hi.I want to try this issue:)

[emilio]

Hi @chansuke! This issue spans a few multiple sub-issues, are you interested in any of the list that don't have a PR or issue open already? If you don't want to choose one yourself, just let me know and I can choose one that is easy and assign it to you.

Thanks a lot!

[jonleighton]

I'll work on image-orientation: #19765

[donovanglover]

Hello I'd like to work on text-emphasis-style, thanks.

[jdm]

@GloverDonovan Go ahead and file an issue for it; you're welcome to work on it!

[kleinph]

I would like to take float (and clear if the first one is successful). I already created issue #21130 (and a PR) for that.

[atouchet]

@emilio @Manishearth is this done now?

[jdm]

I'm going to go ahead and claim it's done. We can file specific issues for anything remaining.