barvian / fluid-tailwind

Build better responsive designs in less code.
https://fluid.tw
MIT License
1.26k stars 19 forks source link

Support CDN by removing the package proxy #4

Closed suabahasa closed 8 months ago

suabahasa commented 8 months ago

esm.sh CDN doesn't recognize aliased packages.

By using the actual package name, now fluid-tailwind can run on the Play CDN.

Example usage:

import { fluidExtractor, fluidCorePlugins, defaultThemeScreensInRems, defaultThemeFontSizeInRems } from 'https://esm.sh/@yabe-siul/fluid-tailwind?bundle-deps';
vercel[bot] commented 8 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
fluid-tailwind ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 7, 2024 5:43am
barvian commented 8 months ago

Hey, thanks for bringing this to my attention! I would definitely like to maximize compatibility of the plugin.

I'm using a fixed-version package alias so I can safely call private Tailwind APIs without the risk of breaking if Tailwind refactored their internal modules in i.e. a patch release. It's unfortunate that ESM.sh doesn't support the feature, although I'm not that surprised because I think I've also ran into compatibility issues with it. I wouldn't want to use the unaliased package in these scenarios, but I suppose a potential alternative could be to publish another package that re-exports the internal APIs I'm using, and depend on that instead of the alias. Maybe @fluid-tailwind/tailwindcss-internal or something. I'll keep thinking about this!

Just out of curiosity, when you say Play CDN do you mean this? I was under the impression that only worked with first-party plugins

suabahasa commented 8 months ago

A potential alternative could be to publish another package that re-exports the internal APIs

It sounds good to me. I would be happy if it allows us to maximize compatibility.

You are correct; the Play CDN we are referring to is https://tailwindcss.com/docs/installation/play-cdn.

This demonstrates this current pull request running via CDN: https://stackblitz.com/edit/stackblitz-starters-xrbnfv?embed=1&file=index.html. image

Sorry, I forgot to say thank you for this awesome package.

barvian commented 8 months ago

Thanks for the StackBlitz and the kind words! Honestly I wouldn't have thought the extractor or plugin would work with Play CDN so that's surprisingly cool.

Admittedly I haven't used ESM.sh before but I forked your StackBlitz and replaced it with the main package and it (seems) to work for me: https://stackblitz.com/edit/stackblitz-starters-wxvznu?file=index.html . Curious to hear your thoughts on this? I could very well be missing something.

suabahasa commented 8 months ago

Thanks for the StackBlitz and the kind words! Honestly I wouldn't have thought the extractor or plugin would work with Play CDN so that's surprisingly cool.

You deserve it, you have created this cool package, and my community now loves it.

I have played with Play CDN lately for Yabe Siul (the Tailwind plugin for WordPress), and it is really capable of running on a Browser.

Admittedly I haven't used ESM.sh before but I forked your StackBlitz and replaced it with the main package and it (seems) to work for me: https://stackblitz.com/edit/stackblitz-starters-wxvznu?file=index.html . Curious to hear your thoughts on this? I could very well be missing something.

Oh wow, I think I overlooked it. Actually, the ?bundle-deps query is the answer, which means the esm.sh CDN can recognize aliased packages. Thank you for bringing this to my attention. I think I was too focused on other things, so I wasn't aware if it resolved the dependency alias.

barvian commented 8 months ago

Awesome! Seems like the ?bundle-deps was a great discovery; I'll be sure to point Play CDN users in this direction if it comes up again 🙂