Unexpected blinking!

[7iomka]

I'm using the latest version of the plugin in attempts to create a demo version of the button, which, in the case of long text, the font size is reduced by the given algorithm. But instead of the expected result, I see... https://codepen.io/7iomka/pen/RMyzyq

[marcj]

Looks to me like you have created a loop, rethink your queries/steps and it will work.

[7iomka]

marcj, any ideas?:(

[eeeps]

@7iomka You could break the loop by giving the btn an explicit width, rather than having its width shrink-to-fit the size of its descendants: https://codepen.io/eeeps/pen/NYzYdm

The loop happens because you're querying the same thing you're conditionally styling. The btn__content font size shrinks, and so its shrinkwrapped btn parent shrinks, which makes the query false, which makes the btn__content font-size grow again, which makes the btn grow again which makes the query true, which...[repeat forever]

[7iomka]

@eeeps thanks for explanation and example! It works fine! But! I just wanted to use this plugin for buttons as independent components, the width of which I would not want to limit, I just use only paddings and font-size. I thought this plugin would help me do the following: I want the buttons that have the size of content, for example, do not fit 300 pixels, changed their font-size to the one I set, in which the content would already fit in one line. Naturally, I would do this only on mobile breakpoint. This is a kind of improvement of the UX of an independent component, which I wanted to do every time not to make an exception in the form of a hardcode over a certain button, the content of which was too long to fit on a certain width of the mobile :(

[eeeps]

@7iomka maybe a job for http://fittextjs.com ? Fundamentally, if you're trying to query AND change the same thing (here, the width of the text), you're going to have looping problems.