Can async resolvers be used in Twind presets?

[tmikaeld]

I'm trying to get the following preset to work in Twind, should be a drop-in from UnoCSS but doesn't work. I tried debugging it but don't have enough Twind knowledge to know why it does not.

It does print the icons that are resolved in the console log, but Twind doesn't return it, so I'm suspecting Twind doesn't wait for the async events?

Full example below, would work in Deno.

import { twind as setup, virtual, cx, stringify } from 'https://esm.sh/@twind/core'
import presetTailwind from 'https://esm.sh/@twind/preset-tailwind'
import presetIcons from "https://esm.sh/@unocss/preset-icons@0.48.3?no-require";

async function getIcon(name, redis) {
  const redisPref = 'icon-';
  const icon = JSON.parse(await redis.get(redisPref+name));
  console.log(icon);
  return icon;
}

function normalize() {
  return '.normalize{color:#fff}'
}

export function tailwind(redis, ...classes) {
  const tw = setup({
    presets: [
      presetTailwind({ disablePreflight: true }),
      presetIcons({
        prefix: '',
        collections: {
          'i': async (iconName) => await getIcon(iconName, redis),
        }
      })],
    theme: {
      fontFamily: {
        sans: ["Helvetica", "sans-serif"],
        serif: ["Times", "serif"],
      },
    },
  }, virtual());

  tw.clear();

  const res =  {
    classNames: ['normalize', ...tw(classes)],
    style: normalize() + stringify(tw.target)
  }
  return res.style;
}

[sastan]

You are right. Twind rules must be sync. This is because twind main focus is to inject the style on class attribute changes. And these need to be sync. This is mostly not a problem except for a use case like fetching a icon source. On discord there was a question a few days ago: https://discord.com/channels/798324011980423188/929266391645839360/1064957388190404658

An idea is to use the icon url directly instead of fetching the source and inline it. The downside would be no automatic rendering mode. That could be fixed by a theme/preset setting or providing the mode within the class name like ?bg for background-img and ?mask for mask.

I really like the idea of having such a preset but I'm not sure when I will have the time to implement it. Please open a feature request and, if you have the time a PR.

[tmikaeld]

Thanks for confirming my suspicions, I'll solve it with a separate async function and a custom rule for placeholders.

I'll see if I can submit a PR after this project is done.