windicss
Utility Groups (Why not?!)
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?
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.
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.
🤦 Embarrassing, now I understand it too. The detection works.
🤔 ... I will think about it.
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);
}
});
});
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,
});
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?
