Broken with version 1.0.3

[amir20]

Ever since updating to version 1.0.3, everything seems to be broken. Here are some screenshots:

I haven't investigated much because I don't have that much CSS except bulma and and tooltip. I looked at the CSS and it looks like all fine to me. I am a little stumped.

[Wikiki]

Hi,

Can you please share the code you use ?

[amir20]

I have two:

First screenshot is:

<p class="heading is-tooltip-right tooltip is-tooltip-multiline" data-tooltip="{{ tooltip }}">
            {{ label }}
            <span class="icon is-small">
                <i class="fas fa-info-circle"></i>
            </span>
        </p>

Second screenshot is

<h5 class="title is-5 is-tooltip-right tooltip is-tooltip-multiline" data-tooltip="Similar clans are based on clan activity and progress in the last 24 hours.">
                        Similar Clans
                        <span class="icon">
                            <i class="fas fa-info-circle"></i>
                        </span>
                    </h5>

[amir20]

By the way, I am currently on version 1.0.1. Updating to latest causes this.

[Wikiki]

I don't see what's broken !?
The last modificaiton was to only invert content of ::before and ::after css rules to be able to work with is-loading state on button

[amir20]

There is a lot of changes since version 1.0.1 7a223a1...master I can keep looking when I get a chance.

[Wikiki]

Those changes are related to the is-loading mode. As mentioned: inverting ::before and ::after css rules.

Again, I don't see what's not working on your screenshots ?

[amir20]

You don't see the arrow on the left side of the tooltip completely broken?

[Wikiki]

Ho yes ;-)

Do you have some codepen.io to share so I'll be able to have a look on this issue ?
I don't have this issue on my side using your code.

[amir20]

I am going to clear my cache and reinstall on npm modules. If it doesn't work then I will work on a codepen example. It's going to take a while as I have a lot of dynamic code generating with webpack so i'll have to figure out how to bring that over.

[Wikiki]

Ok. Good luck.

Please keep me in touch.

[amir20]

I think I figured out the issue. I wasn't easily able to create the codepen. But once I did, I was able to compare why it worked. During that process, I ended up removing all my imports until it broke again. The culprit is @import "~buefy/src/scss/buefy"; so buefy seems to have its tooltip and this module has conflicting classes. Unfortunately, I rely on buefy too much to remove it. I don't even use the tooltip but there is no way to just include some components. This must have happened after your refactor because :after has changed a little.

I currently don't have a solution for this and will remain on 1.0.1 for now.

Can you think of a way to fix this on my side?

[Wikiki]

Good to know.
Why don't use sass file and prefix mu extension with a custom name ?

[amir20]

Yea, something like this https://www.ryadel.com/en/css-namespaces-avoid-conflict-style-sheets-files/ ?

I am going to try it now.

[amir20]

I am struggling because when I do:

.has-tooltip {
  @import "~bulma-tooltip";
}

.has-buefy {
  @import "~buefy/src/scss/buefy";
}

it works but it breaks all my icons. buefy relies on bulma for some cascading rules and they all seem broken. I need to take a break and try again later.

[amir20]

I finally selectively imported what I wanted.

@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/_autocomplete";
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_form";
@import "~buefy/src/scss/components/_icon";
@import "~buefy/src/scss/components/_loading";
@import "~buefy/src/scss/components/_message";
@import "~buefy/src/scss/components/_notices";
@import "~buefy/src/scss/components/_panel";
@import "~buefy/src/scss/components/_select";
@import "~buefy/src/scss/components/_table";
@import "~buefy/src/scss/components/_tag";