Skip to content

Fix application.css import

Tim Zallmann requested to merge tz-fix-component-css into master

We have to import application.css to display our components (they depend on it), due to that some styling is broken as it contradicts clashes with rendering in design.gitlab.com. The previous discussion around this topic can be found here !157 (closed).

This MR is now limiting the CSS changes to an absolute minimum:

  • Removed the bootstrap 4 (older version) import in design.gitlab.com as application already has bootstrap 4
  • application.css is imported from the online version and then scoped to .app-styles
  • We link current Bootstrap 4 from a CDN
  • Fixed the styling of the Tabs page on the component page
  • Removed the examples on the button page (wasn't sure about skeleton loader @tauriedavis?)
  • Moved the "Is it already fully styled" check to design.gitlab.com (right now its displayed twice as it needs to be updated also in gitlab-ui to be removed)

JS Changes:

  • We had to write our own PostCSS Processor for importing application.css and then scoping it to a specific selector
  • Its using CleanCSS to fix the malformed CSS that the normal PostCSS plugins were exploding on
  • Uses then node-sass to do the nesting

This should now have a very low to no impact on the rest of the styling.

Closes #162 (closed), #163 (closed), #160 (closed)

Edited by Tim Zallmann

Merge request reports