GitLab

Created by: riyad

This is an ugly hack trying to split the CSS files to stay below 4096 selectors per file necessary for IE. This is only meant as a temporary solution.

The problem:

• Bootstrap is big
• We override quite some stuff of it
• We use @extend for importing style rules
• Our styles are really sensitive to order

Bootstrap + our overrides are 3400+ selectors!!!

I have tried splitting the one big CSS file into several smaller ones:

• vendor.css includes all CSS from vendor/assets (luckily they have no dependencies) 296 selectors
• highlight.scss contains the Pygments highlight styles (depends only on color variables) 246 selectors
• gitlab_bootstrap.scss contains the pulled together Bootstrap styles + our overrides (ugly, big and brittle) 3438 selectors
• sections.scss contains all section styles without @extends 223 selectors
• sections_extended.scss contains all section styles with @extends (this means gitlab_bootstrap.scss needs to be included here) :/ 4050 selectors
• main.scss conains the rest (headers, themes, common definitions) (also depends on gitlab_bootstrap.scss) 3841 selectors
• application.css aggregates all of them (includes Bootstrap twice 💩 ) 8657 selectors

Selectors counted with this.

What we get:

• Non-IE browsers get served application.css as before.
• IE downloads the CSS files separately.

Caveat:

• gitlab_bootstrap.scss is included twice: in main.scss and sections_extended.scss
• You can't combine all styles depending on gitlab_bootstrap.scss into one, because it would be too big again :(

Fixes #1842 (closed) Fixes #2073 (closed)