Fixed Algolia search box styling #1488
Conversation
r100-stack
requested review from
gretanausedaite and
mayank99
and removed request for
a team
There was a problem hiding this comment.
LGTM. nice work finding the issue!
what surprises me is that even though
bodyhas a lower specificity ((0, 0, 1)) than:root((0, 1, 0)),body's styles get preference over:root
i've explained this in #1365 (comment) - specificity doesn't matter, position in the dom does.
<html> // <- :root
<body> // lower in dom
...
</body>
</html>
Thanks!
Ohh, right, this concept of which CSS variable definition to use often confuses me. I played around with this codesandbox to understand this concept. I will keep this in mind for the next time. |
Changes
The broken Algolia styles were because of some unnecessary astro scoping in the Algolia styles. I fixed this by adding
is:global.The problem was the unnecessary astro scoping
I am not sure why didn't this "missing styles" issue happen in the dev version. I suspect it has something to do with the bug in astro where importing styles into a layer also duplicates those styles outside the layer (as mentioned in #1365 (comment)).
But what I'm confused about is why when running
yarn devbefore this PR shows this order of styles/stylesheets in the browser inspect pane:bodyin no layer:rootin no layer:rootin thethirdparty.algolialayeri.e., what surprises me is that even though
bodyhas a lower specificity ((0, 0, 1)) than:root((0, 1, 0)),body's styles get preference over:root.screenshots
Regardless, making sure the Algolia styles are global solves the styling issue in the
prodanddevbuilds. So this PR is good as-is.Testing
Ran
yarn buildandyarn previewin thewebsiteworkspace to confirm that the styles show up correctly in the production build.Docs
N/A