fix(@clayui/css): LPD-47129 Mixins, Improve performance in alerts, ba… #5927
Conversation
| $_badge-item-before: map-get($map, badge-item-before); | ||
|
|
||
| @if ($_badge-item-before) { | ||
| .badge-item-before { | ||
| @include clay-css($_badge-item-before); | ||
| } |
There was a problem hiding this comment.
This is very interesting, in JS you can do all this inline, you save memory and could have the help of inline cache, but interestingly here it could be faster. Maybe this is faster because you pass an empty value to clay-css?
There was a problem hiding this comment.
You have a point. I'll test in the clay-css mixin and others.
There was a problem hiding this comment.
@matuzalemsteles Sass actually takes a good amount of time processing CSS rule-sets. Processing a simple rule-set:
.selector{
color: red;
}
100k times takes 1700ms on my machine. If we wrap it in @if (false){} it reduces it to 40ms.
There was a problem hiding this comment.
@pat270 That's interesting, the bad thing about it is that we need to replicate this rule everywhere.
There was a problem hiding this comment.
Yeah it's unfortunate, but we only need to apply it to the mixins to get a big boost in build time.
…dges, and cards
https://liferay.atlassian.net/browse/LPD-47129
This shaved like 4s off
yarn compile.