hacknug/tailwindcss-text-fill-stroke

Fix repeating class name 'text-stroke'

mohamedsabil83 opened this issue · 9 comments

mohamedsabil83 commented

The class 'text-stroke' point to both color and width which prevent using 1px stroke width with all color but the default.
Need to rename one of the two 'text-stroke' or make using class e.g. 'text-stroke-black' override the default stroke color.

hacknug commented

This is by design. Would removing the default color work for you? That's what I do on my projects when I want to keep one of the defaults around.

mohamedsabil83 commented

IMO, no need to remove the default color. just need to work like border class, it gives a default size and color. When using e.g. border-black with it, it keep the default size and overrides the color.

hacknug commented

So moving default keys to the beggining of the objects would solve it? Trying to avoid turning this into a plugin that also adds base styles.

mohamedsabil83 commented

No, it doesn't. I guess it needs adding !important or keep default class text-stroke without color.
Also, paint-* class not make any effects.

hacknug commented

No, it doesn't. I guess it needs adding !important or keep default class text-stroke without color.

If I force the default option to be the first key on the config object, you'd be able to overwrite using any other .text-stroke-[color] or .text-stroke-[width] class. Here's a demo of how it could work: https://tailwind.run/71kuin/3

This really wouldn't solve your issues? I might be missing something so a demo showing the issues would be really helpful.

Also, paint-* class not make any effects.

This definitely works. You might be checking on a non-compatible browser (not sure if I'm missing something to make it work everywhere). I think Firefox doesn't support it but Safari does: https://tailwind.run/71kuin/3

You're right. it only worked on the tests because I was manually importing the projects default config. v3-compatible version is otw with a fix for it 👍

mohamedsabil83 commented

I'll check it again

  • 👍1
bart commented

It's still a pending issue, isn't it?!

hacknug commented

Sorry for the long hiatus.

I've just pushed a new version of the plugin fixing both bugs mentioned in this issue (tailwindcss-text-fill-stroke@beta):

  1. paint-order classes weren't available by default. Turns out I was importing the default config on my tests but not passing it to the method responsible for generating the classes. I saw I had fixed it on an open PR but never got to release that.
  2. Default .text-stroke classes were bein generated after all other values, making it impossible to override without using !important, thus making the notion of a default value pretty much useless since it meant you were never able to compose it with other classes in the same breakpoint.

I ended up adding support for arbitrary values and variants, so hopefully that'll make the plugin a little more useful until we get this into core (guessing once this in properl spec'd without vendor prefix).

If you still have a use for this plugin, I'd love to hear your thoughts on the changes and any idea you have to improve it. At the moment I'm thinking about adding a demo showcase how I use it, and looking into adding support for using it with custom properties to align its usage with other color-related plugins in core.

Feel free to open new issues for any bugs you encounter on the new version (hopefully none but we all know how this goes so…) 👍

  • 👍1
mohamedsabil83 commented

Thanks @hacknug, I'll take a look later and feed you back

  • ❤️1