Widget doesn't work with big customCss property in component

[Vlad Pasika]

Describe the bug
After recent updates on the fastcomments side the widget doesn't work with big customCss property in the component.

To Reproduce
Put a big CSS string to your component, e.g.
`@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600&display=swap");

• {
  font-family: Manrope;
  color: #606060;
  }
  @Keyframes gradient {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
  }
  .top-area {
  display: block;
  }
  .footer {
  display: none;
  }
  .downvote,
  .upvote {
  pointer-events: default;
  }
  .comment-toolbar-reply {
  display: block;
  }
  .menu {
  display: block;
  }
  .avatar-wrapper {
  pointer-events: default;
  margin-top: 15px;
  }
  .icon.up {
  background-size: 30px;
  width: 30px;
  margin-right: 10px;
  }
  .icon.up.active,
  .icon.up:hover {
  background-size: 30px;
  width: 30px;
  margin-right: 10px;
  }
  .icon.down {
  background-size: 30px;
  width: 30px;
  }
  .icon.down.active,
  .icon.down:hover {
  background-size: 30px;
  width: 30px;
  }

.divider {
display: none;
}
.comment-bottom-toolbar {
display: flex;
flex-direction: row-reverse;
width: 100%;
justify-content: space-between;
}
.comment-toolbar-reply {
position: relative !important;
}
.comment .avatar-wrapper {
border-radius: 100%;
width: 40px;
height: 40px;
}
.children .comment .avatar-wrapper {
width: 35px;
height: 35px;
}
.comment > .inner > .comment-bottom {
margin-top: 0px;
}
#comment-area {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.comment > .inner {
padding: 0;
}
.select-dir-wrapper {
border-bottom: 0;
}
.menu.empty,
.menu.dropdown,
.icon.bubble {
display: none !important;
}
.comment > .inner > .comment-content .comment-text {
color: #606060;
line-height: 25.5px;
font-weight: 400;
}
b {
color: black;
}
.comment {
margin-top: 10px;
}
.comment > .inner > .comment-bottom .reply-form-wrapper {
padding: 0;
}
.comment > .toggle-replies {
margin-top: 5px;
}
.comment-reply textarea {
border-radius: 7px;
border-bottom: 1px solid #bfbfbf;
}
.comment-reply.root {
padding: 15px 0 0 0;
}
.horizontal-border {
display: none !important;
}
.comment .comment-reply textarea {
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
}
.fast-comments-reply,
.comment .fast-comments-reply,
.edit-cancel,
.edit-save {
border: 0px;
border-radius: 7px;
position: relative;
z-index: 1;
overflow: hidden;
transition-property: opacity;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(
89.55deg,
#4d3dd5 -13.7%,
#7a6ff0 6.72%,
#a39dfd 21.77%,
#a4a5fb 42.04%,
#59cbe4 74.84%,
rgba(29, 127, 243, 0.886708) 93.78%,
rgba(36, 77, 221, 0.79) 109.94%
);
box-shadow: 0px 1px 2px rgb(0 0 0 / 5%);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
font-weight: 600;
}
.fast-comments-reply:before,
.comment .fast-comments-reply:before,
.edit-cancel:before,
.edit-save:before {
content: "Submit Reply";
display: flex;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
top: 0;
right: 0;
align-items: center;
justify-content: center;
color: white;
}
.fast-comments-reply:hover:before,
.edit-cancel:hover:before,
.edit-save:hover:before {
background-color: #11ffee00;
}
.notification-bell {
display: none !important;
}
.edit-cancel:before {
content: "Cancel";
}
.edit-save:before {
content: "Save";
}
.edit-bottom {
display: flex;
flex-direction: row-reverse;
}
.comment-edit textarea {
border-radius: 11px;
}
.pagination {
margin-top: 6px;
padding-bottom: 16px;
}
`

Expected behavior
It should work as used to.

Screenshots

Additional context
an example
<FastCommentsCommentWidget tenantId={"demo"} //@ts-ignore customCSS={publicCustomCss} />

[Devon]

@wladikpasika I'm looking into this. In the meantime, I'd suggest using a customization rule instead. That is the recommended way to define CSS. It is also faster.

[Devon]

@wladikpasika This is now resolved. It was an infrastructure configuration issue that arose after our http2 migration.

Verified with given CSS. Closing.