Using custom plugins with class name parsing/class name generation

[bkrmendy]

Hi! Is it possible to use custom plugins when parsing tailwind class names or generating tailwind class names? A minimal example/repro case for this is

import { parse } from "@xengine/tailwindcss-class-parser";

const config = {
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        ".text-shadow-md": {
          textShadow: "3px 3px 6px rgba(0, 0, 0, 0.2)",
        },
        ".text-shadow-lg": {
          textShadow: "4px 4px 8px rgba(0, 0, 0, 0.3)",
        },
      };

      addUtilities(newUtilities, ["responsive", "hover"]);
    },
  ],
};

console.log(parse("text-shadow-md", config));

Running this, I'd expect text-shadow-md to be resolved to the textShadow prop specified in the plugin, but instead I get the following:

{
  root: "text-shadow-md",
  kind: "error",
  message: "found \"fontSize, textColor\" plugins but unable to determine which one is matched to given value \"shadow-md\"."
}

[XEngine]

In current state of this library, it's not achievable. If tailwind exposes this kind of things, I can support it. I need to dig a bit.

What this library does is basically grab every theme specific information from tailwind's config, then try to determine given class' type - like font provided but is it a font-family or font-weight - then lookup the value from given config's theme if not found then make it arbitrary. also vice-versa for convert given definition to className.

So in this current state I have to provide a schema in order to determine which propert can be parsed or not like this :

 ["font", [
        {scaleKey: "fontWeight", ns: 'fontWeight', class: ['font-weight'], type: 'number'},
        {scaleKey: "fontFamily", ns: 'fontFamily', class: ['font-family'], type: 'family-name'},
    ]],

"scaleKey" here is the theme property of tailwind config. So I don't think utilities like yours may not be possible.

---

Edit: However I can make the library's hard coded plugin schema to support definitions like above so you can add something like this with an option arguement.

const schema = [
 ["textShadow", [
        {scaleKey: "textShadow", ns: 'textShadow', class: ['text-shadow'], type: 'length'},
    ]],
 ]
 
 parse("text-shadow-md", config, schema)

[bkrmendy]

Thanks! I opened this issue to check whether I'm doing something wrong, and I added the textShadow stuff as an example of an arbitrary but somewhat realistic example. I don't think there's much value in hardcoding it, thanks for the explanation!