Page MenuHomePhabricator

CSSMin should crop leading 0 from fractional values
Closed, DeclinedPublic

Description

The leading 0 in fractional numeric values of CSS properties is optional and values like margin: .5rem; are globally supported by rendering engines.
Current CSS Coding Convention misses a clear guideline on how to write fractional numbers with leading 0. Therefore we're facing differences across project implementations, for example in
Vector:

font-size: 0.8em;

Minerva:

font-size: .9em;

It is definitely micro-optimization, but there is a fairly good amount of those values available.

I'd suggest to include a cropping mechanism for the following fractional numeric values (mind the preceding whitespace/colon/comma!):

  • 0.7rem -> .7rem
  • :0.7rem -> :.7rem
  • -0.7rem -> -.7rem
  • ,0.7 -> ,.7

Code example before:

.mw-selector {
    color: rgba( 255,255,255,0.7 );
    margin: -0.7rem;
    padding:0.7rem 0.77rem;
}

and after:

.mw-selector{color:rgba(255,255,255,.7);margin:-.7rem;padding:.7rem .77rem;}

Event Timeline

Volker_E created this task.Sep 2 2015, 7:33 PM
Volker_E raised the priority of this task from to Lowest.
Volker_E updated the task description. (Show Details)
Volker_E added subscribers: Volker_E, Jdlrobson, Krinkle.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 2 2015, 7:33 PM
Krinkle set Security to None.

To do this reliably requires a context-aware parser. We should not attempt to do this with regexes.

Due to how ResourceLoader works (see RL/F), it is vital that minification is highly performant and acceptable for large amounts of content within GET request.

It'll be tough to re-implement CSSMin in an equally or almost-as-performant way through building a tree, optimising, and re-serialising.

Also note that, while this is only a minor obfuscation, I would strongly recommend we invest in Source Maps (T47514) before we depart from minification without obfuscation as otherwise this makes debugging harder.

Krinkle renamed this task from CSSMin.php should crop `0` CSS property fractional numeric values with leading `0`. to CSSMin should crop leading 0 from fractional values.Sep 2 2015, 8:11 PM
Krinkle moved this task from Inbox to Backlog on the MediaWiki-ResourceLoader board.

To do this reliably requires a context-aware parser. We should not attempt to do this with regexes.

Hmm… why? The only problem I can think of is strings in CSS, but we already handle them incorrectly (T37492) and this would probably be less of an issue than that.

@Krinkle +1 for source maps support first!
We should also be 100% sure if inline SVGs might in some edge cases contain the mentioned strings at the wrong places.

Krinkle closed this task as Declined.Aug 18 2018, 6:45 AM

Declining as with T37493. Minimal gain, increased risk. If we have source maps (T47514), and a less fragile but performant way of minification (T37492), we could reconsider it at that time, but closing for now.

Restricted Application added a project: Performance-Team. · View Herald TranscriptAug 18 2018, 6:45 AM