Async Plugin

[sntran]

I'm writing a plugin that fetches an external CSS file, objectifies it, and adds to Tailwind layers.

It looks something like this:

module.exports = plugin.withOptions(function(options) {
  const { baseDir } = options;

  return async function fontello({ addBase, addUtilities, postcss }) {
     const css = await fetch(`${ baseDir }/css/fontello.css`);
     const root = postcss.parse(css);
     const bases = {}, utilities = {};

    // ... updates the styles into `bases` and `utilities`.

    addBase(bases);
    addUtilities(utilities);
  }
});

However, the new base styles and utilities are not added correctly, and sometimes Tailwind will throw error about missing styles.

I dig a little into the code and see the the plugins defined in plugins config are executed sequentially. For async plugins like above, it means that the addBase, addUtilities, ... etc may not be called by the time Tailwind finishes initialization.

Would you mind considering await such async plugins?

Note: I could use fs.readFileSync in my plugin to avoid making my function async, but I want my config file to play nice with Play CDN, hence fetch.

[thekage91]

Hi,
I'm doing something very similar, I would like to load styles from a Database and compile them at build time to take advantage of @apply operator offered by Tailwind. The problem is the same, use async operations to populate tailwind.config seems not work, the module is immediately returns causing the miss of Tailwind configuration.

Anyone has a possible workaround to resolve this?

Thank you

[InfiniteXyy]

Since calling async function seems impossible in tailwind plugin context, I tried to call the async function in a synchronized way. My workaround is to put all the async functions in a worker.js file, and call it via spawnSync(xxx)

You can view this plugin for more details https://github.com/InfiniteXyy/tailwindcss-iconify/blob/main/src/index.ts#L22

Though it seems a little bit strange, it works well in my situation. I also tried deasync, but it will hang on the node process, and freeze my VSCode plugin. (And I don't know why)

[meadowsys]

Hehe, a helpful (kind of cheeky) workaround, I like cheeky workarounds

[JensDll]

This would be an excellent quality of life improvement. For example, fetching resources or using the promise based Node-API etc.

Also @InfiniteXyy I've just made the same Tailwind CSS plugin tailwindcss-plugin-icons 😆

[InfiniteXyy]

Your plugin is awesome! It has zero dependancy and can use a custom icon other than iconify iconset.
Also I have some other ideas, what if plugin users could define their own icon-generator-functions, load svg from a web url or local folders.🤔 Actually unocss has done that, but it's hard to support this in a synchronized plugin

[JensDll]

Everything HTTP would need some workaround (like yours) to do synchronously. With local folders, there is the file system API. But putting all my custom icons in a JSON file works well for me. I don't think I'll need generators or customisations like in unocss.

[sntran]

To be fair, we have been able to do HTTP requests synchronously:

const request = new XMLHttpRequest();
request.open("GET", url, false); // synchronous request.
request.send(null);
return request.responseText;

I just like fetch better :)

[meadowsys]

Hey! I got into a place where I needed to dynamic import() an ES module for the config (for colours specifically), and thought that it would be more useful to just let tailwind config export a promise that resolves to a configuration. That way we could do much more in the config with promises too

[JohnCampionJr]

Any chance of getting this?

[ghost]

I need this! it would be so handy.

Use case: Fetch web font paths and formats for a plugin, where I add @font-face rules.

Would be amazing if this could work!

[amlcodes]

bump, needing this to fetch user selected colors

[yunsii]

Asynchronous logic is not supported still now, I just don't believe.

ref: #11672

[sntran]

Just a small update, but there is currently #14132 that adds support for async plugins, abeit only in v4.