Deprecations filter component is missing its icon on production
The little arrow icon on our filter here doesn’t render on the production site. It does render locally. How can we get it to appear on the live site?
Clues:
- The icon comes from GitLab UI CSS. It’s an SVG, set as the background image on the select list.
- On my local site (running under
nanoc view
), the icon is an inline SVG and renders fine. On the production site, the icon is a base64 string. Check it out: https://gitlab.com/-/snippets/2344923 - When the browser renders it as base64, we see an error in browser dev tools that the
background
property has an invalid value. - It seems like a step in our CI build is doing this since we only see it on production, but stepping through the relevant-looking CI steps locally, I haven’t been able to run whatever is converting it to base64. It’s not the minify-assets script, or the file compression step, or “nanoc compile” (none of these tamper with GitLab UI’s index.css file, at least locally)
- The icons all render fine on the GitLab UI site, which is also served by GitLab Pages, so I don’t think it’s web server-related.
- Interestingly I did see this bug on the review app, but only sometimes. Our last build there before merging the MR that added the filter looked fine.
To summarize: We’re getting diffs in this file -- https://docs.gitlab.com/assets/stylesheets/gitlab-ui/index.css — from something that changes inline SVGs in this CSS file into base64 strings. I don’t see anything that would be modifying this file at all beyond the initial copying of it from node_modules
to assets/stylesheets
.
Screenshot
Edited by Sarah German