Utility Groups (Why not?!)

[deleonio]

That is currently not possible?!

• https://windicss.org/guide/features.html#%F0%9F%8E%B3-utility-groups

class="hover:(border-green-600 shadow-lg)"

We give the parser the files and he extract the css classes. Why he did not detect the utility groups?

[antfu]

It requires transformations to the source file, not just serving the css. Which I don't think it's capable for postcss's plugin interface.

[deleonio]

Is it possible to push the css as string instead of a file path?

[antfu]

Sorry what do you mean?

[deleonio]

Sorry, the extractFile function receive the css as string and should make the group handling too.

https://github.com/windicss/vite-plugin-windicss/blob/ce166a0334f1a36e9d24513caf391a53585ac249/packages/plugin-utils/src/createUtils.ts#L161

But it does not work in my case.

[deleonio]

🤦 Embarrassing, now I understand it too. The detection works.

🤔 ... I will think about it.

[deleonio]

Hello @antfu,

I implemented a tiny devtool script that transforms the class declaration like Windi under the hood.

But today I have no idea how to dynamically insert it into the development code.

// windi stuff
const regexClassGroup = /([!\w+-][\w+:_/-]*?\w):\(([\w\s/-]*?)\)/gm;
function transformGroups(str: string) {
  return str.replace(regexClassGroup, (_, a: string, b: string) =>
    b
      .split(/\s/g)
      .map((i) => `${a}:${i}`)
      .join(' ')
  );
}

// devtool
document.addEventListener('DOMNodeInserted', (event: MutationEvent) => {
  const nodes: NodeListOf<HTMLElement> = event.relatedNode.querySelectorAll('[class]');
  nodes.forEach((node: HTMLElement) => {
    const transformed = transformGroups(node.getAttribute('class') || '');
    if (node.getAttribute('class') != transformed) {
      node.setAttribute('class', transformed);
    }
  });
});

[antfu]

Oh, like a runtime?

[deleonio]

I could try to inject the devtool snippet only in development mode.

[deleonio]

Update prototype - valid W3C - https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

const regexClassGroup = /([!\w+-][\w+:_/-]*?\w):\(([\w\s/-]*?)\)/gm;
function transformGroups(str: string) {
  return str.replace(regexClassGroup, (_, a: string, b: string) =>
    b
      .split(/\s/g)
      .map((i) => `${a}:${i}`)
      .join(' ')
  );
}

new MutationObserver((records: MutationRecord[]) => {
  records.forEach((record: MutationRecord) => {
    record.addedNodes.forEach((node: Node) => {
      const nodes: NodeListOf<HTMLElement> | undefined = node.parentElement?.querySelectorAll('[class]');
      if (nodes) {
        nodes.forEach((node: HTMLElement) => {
          const transformed = transformGroups(node.getAttribute('class') || '');
          if (node.getAttribute('class') != transformed) {
            node.setAttribute('class', transformed);
          }
        });
      }
    });
  });
}).observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true,
});

[antfu]

Interesting, do you think we can make a package called windicss-groups-runtime-polyfill or something so people can opt-in by simply importing it via npm or CDN.

/cc @voorjaar do you feel we can make this one official?

[George-Miao]

Hi! Is this usable now? Really wanted to have variant grouping.