fix(avatar): Fix avatar styles SASS error
When trying to use gitlab-ui in a project with version 1.25.0
or greater of node-sass, the avatar styles break the build with this error:
./src/assets/styles/global.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/global.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
╷
82 │ &.gl-avatar-identicon-bg#{$i} {
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@gitlab/ui/src/components/base/avatar/avatar.scss 82:3 @import
node_modules/@gitlab/ui/src/scss/components.scss 7:9 @import
/Users/enriquealcantara/gitlab/status-page/src/assets/styles/global.scss 18:9 root stylesheet
We are incorrectly using the parent selector (&) in a top-level selector. I discovered this bug in the status page project: https://gitlab.com/gitlab-org/status-page/
Edited by 🤖 GitLab Bot 🤖