Get generated class(es) without adding styles to sheet

[tylerforesthauser]

Hey guys! I have a potentially odd question: Is it possible to retrieve the generated class(es) from tw without actually adding the styles to the sheet?

I'm still working out how to use Twind with Nuxt (Universal + Static) and I've gotten to a point where I've got a server-side directive with my own tw instance that applies the generated classes to the vnode (and injects the style tag into head). Then there is a client-side directive that is intended to cover dynamic content at runtime, which adds the generated classes directly to the element (and utilizes the default CSSOM sheet).

What I'm trying to resolve is having the client-side directive check to see if Twind classes have already been added to the element as to avoid unnecessary client-side styling (and duplicate element classes). Currently, I'm simply invoking the tw function to generate the class string and comparing it to the existing element class string.

If anyone has any ideas on how to improve my approach, I would love some feedback!

Thanks!

[lukejacksonn]

Hey 👋 good question and yes it is possible! We do our tests like this.. you will need to use a custom sheet but we already have a virtualSheet for you which you can use to inspect output as you explain you re trying to do:

import { create } from 'twind'
import { virtualSheet } from 'twind/sheets'

const sheet = virtualSheet()
const { tw } = create({
    sheet: sheet,
    // Fail tests on unknown rules or theme values
    mode: 'strict',
    // Prevent preflight rules to be added into sheet
    preflight: false,
    // Do not prefix properties and values
    prefix: false,
  });

tw`text(2xl black)`

console.log(sheet.target)
// => .text-2xl{font-size:2rem}.text-black{color:black}

With regards not duplicating work that the server has already done.. that is quite tough. See this issue #78 (comment)

[tylerforesthauser]

Thanks for getting back to me, Luke! So thinking about this more, what if I were to do something crazy like create two instances of tw in my directive, one attached to the default CSSOM sheet and one attached to a virtualSheet? A little something like this...

import { create } from 'twind'
import { virtualSheet } from 'twind/sheets'
import { theme } from '../../theme'

const { tw } = create({
  darkMode: 'class',
  preflight: true,
  prefix: true,
  theme,
})

const sheet = virtualSheet()
const { tw: preGen } = create({ theme, sheet })

export const twDirective = {
  inserted(el, binding) {
    const className = preGen(binding.value)
    if (el.className.length > 0) {
      if (!el.className.includes(className)) {
        el.className += ` ${tw(binding.value)}`
      }
    } else {
      el.className = tw(binding.value)
    }
  },
}

Is this a good idea?

[lukejacksonn]

Again, very hard to measure exactly! We always intended Twind to do its thing at runtime primarily, so in that sense we designed it to be very fast (by which I mean as fast as any other CSS-in-JS solution). But much like with SSR'd JSX for example, client side hydration is always always necessary as well, the server side "pre=render" if you like, almost always only benefits the first paint.

This is a really interesting question though and something we should probably look into more. Your implementation doesn't look like a stupid idea at all.. it is very straight forward at first glance which I love. However there are usually edge cases whereby things might turn out exactly as you'd expect.. perhaps @sastan can elaborate further as he has much more of an insight as to how things are working under the hood.

Ultimately I'd say don't worry too much about perf until it becomes and issue but keep going with your experimentation and take measurements where possible, however if you find there is a negligible difference then it is probably a premature optimization!

[sastan]

What I'm trying to resolve is having the client-side directive check to see if Twind classes have already been added to the element as to avoid unnecessary client-side styling (and duplicate element classes).

I honestly do not know why you want to do that.

1. Which problems did you encounter?
2. What do you mean with "avoid unnecessary client-side styling (and duplicate element classes)"?

I do not want to sound harsh. I really just don't understand.

[tylerforesthauser]

No, that's totally fair! The issue I encountered was duplicate classes on elements that were styled server-side.

Just to make sure I've provided enough info to understand what I'm doing, I'll explain my setup with some code.

I'm using Nuxt.js so I've created a module to register my tw directive.

module.js

import { create } from 'twind'
import { getStyleTag, asyncVirtualSheet } from 'twind/server'
import { theme } from '../../theme'

const sheet = asyncVirtualSheet()

const { tw } = create({
  preflight: true,
  prefix: true,
  theme,
  sheet,
})

const createServerDirective = () => {
  const applyServerClassName = (vnode, className) => {
    if (vnode.data.class) {
      vnode.data.class += ` ${className}`
    } else {
      vnode.data.class = className
    }
  }
  return (vnode, directive) => {
    if (directive.value) {
      const className = tw(directive.value)
      applyServerClassName(vnode, className)
    }
  }
}

export default function () {
  // Twind SSR Directive: `v-tw`
  if (this.nuxt.options.render.bundleRenderer.directives) {
    this.nuxt.options.render.bundleRenderer.directives.tw = createServerDirective()
  } else {
    this.nuxt.options.render.bundleRenderer.directives = {
      tw: createServerDirective(),
    }
  }

  // Add <style> tags to head on SSR
  this.nuxt.hook('vue-renderer:ssr:templateParams', (params) => {
    const styleTag = getStyleTag(sheet)
    params.HEAD += styleTag
  })

  // Register `v-tw` directive
  this.addPlugin({
    src: resolve(__dirname, 'plugin.js'),
  })
}

plugin.js

import Vue from 'vue'
import { create } from 'twind'
import { theme } from '../../theme'

const { tw } = create({
  darkMode: 'class',
  preflight: true,
  prefix: true,
  theme,
})

export const twDirective = {
  inserted(el, binding) {

    // This is where I've had to use `tw` to generate the Twind classes
    // so I can check to see if they've already been applied to the element.
    // Prior to adding this check, most elements were getting duplicate classes.
    const className = tw(binding.value)

    // Check for any existing classes
    if (el.className.length > 0) {

      // Check specifically for Twind classes
      if (!el.className.includes(className)) {
        el.className += ` ${tw(binding.value)}`
      }
    } else {
      el.className = tw(binding.value)
    }
  },
}

// Register client-side directive
Vue.directive('tw', twDirective)

So, ultimately, for elements that have already received Twind classes server-side, I'd love to avoid invoking Twind at all on them. But I haven't come up with a reliable way to do so...

[sastan]

Ah see. This is mostly a cosmetic issue, right?

As you have to invoke twind to detect duplicate class names all style will be available anyway. During runtime i don't see a problem having duplicate rules in the stylesheet.

I think the browser can do that for you: Element#classList and DOMTokenList

[tylerforesthauser]

Well it's certainly part cosmetic and part performance concerns, but I am certainly putting the cart before the horse in that regard as I have not explicitly encountered performance issues. BUT! My concern comes from the fact that I have begun the somewhat large task of refactoring my library to swap out Twin.macro + Emotion for Twind and I would hate to shoot myself in the foot by introducing any kind of performance reduction, ya know? But the general response seems to be that this isn't a real concern, so I will proceed and report back anything of note! Thanks for your insights, guys!

[tylerforesthauser]

So I just wanted to share that I've taken a different look at my initial approach and have come up with what is probably a much better solution.

https://codesandbox.io/s/nuxtjs-twind-s90bw?file=/plugins/twind.js

Ultimately I've just included Twind as a global instance and, by using a computed property, I can apply styles directly to elements in my template via a class binding. I'm still testing it out, but I think this is a much simpler, much less over-engineered approach.

[sastan]

And you could always use the shim and plain class attribute.