plugin fails to apply hash to all komponents

[jkohlin]

This is what comes out when applying the plugin:

It seems it only goes three levels deep when applying the hashed classname to the DOM nodes

[dolanmiu]

This should be fixed now

I wrote a test case to handle your exact case:

https://github.com/dolanmiu/vite-plugin-scope-tailwind/blob/master/src/append-classes.spec.ts#L41-L46
https://github.com/dolanmiu/vite-plugin-scope-tailwind/blob/master/__mocks__/html.ts

[peterholcomb]

@dolanmiu Love your plugin, thanks for creating it. We are seeing some behavior that seems to relate to this bug. For us, it seems like some elements are not being updated by the plugin. See screenshot. I don't know why the opacity-100 element here is not being processed.

[peterholcomb]

It looks like it could be related to the @headlessui transition components:

<Transition.Child
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >

[peterholcomb]

Okay, i was able to create a solution for the @headlessui issue and also for our use of https://www.npmjs.com/package/clsx. Let me know if you could use this and I'll open a PR. This code below could definitely be improved, but this was an attempt to timebox a solution and get something done quick:

export const appendTransitions = (id: string) => (code: string) => {
  let c = code;
  const props = [
    { regex: /enter/g, searchValue1: /enter: "/g, searchValue2: /enter: `/g, replaceValue: "enter: " },
    { regex: /leave/g, searchValue1: /leave: "/g, searchValue2: /leave: `/g, replaceValue: "leave: " },
    { regex: /enterTo/g, searchValue1: /enterTo: "/g, searchValue2: /enterTo: `/g, replaceValue: "enterTo: " },
    { regex: /enterFrom/g, searchValue1: /enterFrom: "/g, searchValue2: /enterFrom: `/g, replaceValue: "enterFrom: " },
    { regex: /leaveTo/g, searchValue1: /leaveTo: "/g, searchValue2: /leaveTo: `/g, replaceValue: "leaveTo: " },
    { regex: /leaveFrom/g, searchValue1: /leaveFrom: "/g, searchValue2: /leaveFrom: `/g, replaceValue: "leaveFrom: " },
  ];
  props.forEach(({ regex, searchValue1, searchValue2, replaceValue }) => {
    const found = code.match(regex);
    if (found) {
      c = c.replace(searchValue1, `${replaceValue}"${id} `).replace(searchValue2, `${replaceValue}\`${id} `);
    }
  });
  return {
    code: c,
    map: null,
  };
};

export const appendClass = (id: string) => (code: string) => {
  let c = code;
  const regex = /className/g;
  let found = code.match(regex);
  if (found) {
    c = code.replace(/className: "/g, `className: "${id} `).replace(/className: `/g, `className: \`${id} `);
  }

  const clsxRegex = /clsx\(/g;
  found = c.match(clsxRegex);
  if (found) {
    c = c.replace(/clsx\(/g, `clsx("${id}", `);
  }
  return {
    code: c,
    map: null,
  };
};

[dolanmiu]

Interesting, yes please, if you can make a PR for this, I will review it

[Dorianslavov]

Experiencing same issue, any progress on this 🤔