Cut use of EQCSS.js in Cosora

[Azareal]

EQCSS.js was originally added in the Cosora Theme to spark a new paradigm of UI development, but it seems to have taken a toll on performance, despite the modifications I made to my copy of it to reduce the weight of the thing.

It's not so much that the library is slow, as much as it is it's insistence to scan every CSS file and not subsets of them. Beyond rolling my own EQCSS, or modifying it beyond what I'm willing to maintain, it would seem that there is little which can really be done to improve it's performance.

And despite intending to use it more, use of it has actually held steady with a single element query, one query which has a major impact on improvement everywhere. That is not acceptable. I think it's time to see it for the failed experiment that it was, it was a nice idea, but it's time to cut back.

It's already absent in the older themes like Shadow and in the upcoming Nox Theme. This should increase perceived performance for the end-user on first load in particular by a fair bit and it should be doable in a span of a few days of so, in contrast, to the time it would take to get anything meaningful done with EQCSS in the realm of performance.

[tomhodgins]

I might have a replacement for you that will let you do the same thing. When you say:

but it seems to have taken a toll on performance, despite the modifications I made to my copy of it to reduce the weight of the thing.

It's not so much that the library is slow, as much as it is it's insistence to scan every CSS file and not subsets of them

I definitely hear that, another thing that EQCSS does that affects performance is you can add additional event listeners, but you can't prevent it from listening on the default events.

If you want the same functionality, but with better performance (and are also okay with less good browser support than EQCSS's IE8 support) I'd recommend you take a peek at the jsincss family of plugins - together they can do everything EQCSS can do, but the key part here is you don't have to include anything you don't want.

To replace an element query from EQCSS I believe you'd only need: jsincss itself, along with the jsincss-element-query plugin.

If before your code with EQCSS looked something like this:

<div id=eqcss>This is an EQCSS demo</div>

<script src=http://elementqueries.com/EQCSS.js></script>

<style>
  @element #eqcss and (min-width: 500px) {
    :self {
      background: lime;
    }
  }
</style>

A migration to jsincss would look something like this:

<div id=jsincss>This is a jsincss demo</div>

<script src=https://unpkg.com/jsincss/index.browser.js></script>
<script src=https://unpkg.com/jsincss-element-query/index.browser.js></script>

<script>
  jsincss(()=>`

    ${element('#jsincss', {minWidth: 500}, `
      :self {
        background: lime;
      }  
    `)}

  `)
</script>

The biggest difference here being the sheer amount of code not being run to accomplish nearly the same element query effect, plus since we've only called jsincss() once, it's not looking for any stylesheets at all, it only gets the one we've given it. It's using the default events here (window load, resize, input, and click) but you could limit the events any particular jsincss stylesheet listens to:

jsincss(``) // runs on window load, resize, input, click
jsincss(``, window, ['scroll']) // runs only on on window scroll
jsincss(``, '.example', ['scroll']) // runs on the scroll event on any `.example` tag
jsincss(``, window, ['customEvent']) // will only fire on `customEvent` on window

So that gives you the flexibility you need to specify when the stylesheet is processed as well, you can make it tailor fitted to your layout and the styles you're using inside.

Hopefully that gives you a painless 'exit strategy' for removing EQCSS without having to transition away from Element Queries, or even a similar (enough) syntax to what you had been using before!

---

Edit: and for EQCSS, there is a way you can convince it to skip reading CSS files, <script>, and <style> tags you don't want it to read - add data-eqcss-read=true to the tags in HTML. This is the attribute EQCSS adds to every parsed tag to make sure it never tries to parse it again, so if that attribute is present on any tag it will skip it. Just FYI, but I do think EQCSS suffers in speed in favour of better browser support that may not be necessary for some projects regardless :D

[Azareal]

Thank you, that's a very interesting library you've mentioned, it might be useful, although I might still go vanilla for a while (at-least with Nox Theme, should be possible with Cosora Theme too) to help simplify things, while re-assessing the landscape to see if there are any good options out there.

Maybe for better widgets and embedding in the near future.