Remove usage of extend from table SCSS
What does this MR do and why?
For #323021 (closed)
Hopefully nothing (visually). Removes two usages of @extend
from SCSS, and replace them with the actual rules we need. Shaves off around 100 lines from application.css, most of which were not needed. I basically just inspected an actual markdown table and checked which rules were actually being used, and then added those.
Removal of @extend .table
deletes the most lines. I think that was originally intended so that markdown tables would look the same as the tables from our own tables.scss. But due to the dark magic of @extends
, we also added the selector everywhere that had a .table
selector.
So we had bootstrap's dark/light/other table variants:
and their print stylesheets (which I just realised we are probably unwittingly including in gitlab-ui):
We also added our .md table(:not(.code))
selectors to every single bootstrap-vue table rule, since that overrides a number of .table
CSS
Screenshots or screen recordings
Here's a table with an image in it, to verify padding, borders, alignment, are the same:
before | after |
---|---|
![]() |
![]() |
How to set up and validate locally
- Create some markdown tables
- Compare to existing tables on
master
- Observe no changes
I added compiled application.css with before/after to this snippet. The diffs in screenshots were made using FileMerge (macos).
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.