sorting / re ordering rules from a visitor transform

[astahmer]

Context

I'm currently evaluating the possibility to migrate Panda CSS from postcss to lightningcss again

Issue

among others, we have a postcss plugin that sorts atomic rules to make the ones with modifiers/conditions at the bottom, along with media query etc.

I'm looking for a way to do that with lightningcss custom transforms. I checked the documentation and visitor tests but couldn't find something similar. Given there's no root container like postcss, this makes it a bit hard I guess ?

temporary workaround

• getting all nodes with location
• compute their corresponding CSS (something like this, using the location of the previous node with location)
• re-construct the CSS however I need (= sort / re order rules the way I want)

haven't yet tried but this might just work. not sure if that would be ideal tho since the custom transform would not actually transform anything and would instead just serve as a custom visitor. (something like this).

on a slightly unrelated note, would it be possible to have a lightningcss.parse API just to get a SourceFile (kinda like ts-morph) with a forEachDescendant (or similar) method ? with a bit more infos on each nodes like start/end positions, and it would make the traversal easier. or actually maybe just a forEachDescendant on the transform method, as a TransformOption, along with the visitor

Current postcss plugin

to give you a better idea of the kind of things I'm looking for for:

the postcss plugin currently looks like this:
https://github.com/chakra-ui/panda/blob/1c8bd6f4a763bdd3b2d56ed6536c9555247e0139/packages/core/src/plugins/sort-css.ts#L10

and an example of the desired output:
https://github.com/chakra-ui/panda/blob/1c8bd6f4a763bdd3b2d56ed6536c9555247e0139/packages/core/__tests__/sort-css.test.ts#L25-L36

[devongovett]

would it be possible to have a lightningcss.parse API just to get a SourceFile

The reason I haven't done this yet is performance. That would mean we have to serialize the entire AST to send it from Rust to JS, and then convert it back after JS processing. The best way to keep visitors fast is to make them as granular as possible, e.g. only visiting Color nodes if you only care about those. Rule is already pretty slow because it must serialize the entire contents of every rule. I suppose we could add a StyleSheet visitor function, but you might lose a lot of performance advantages.

I wonder if there is an API we could provide to accomplish this without needing to serialize the entire AST. Any ideas?

Also, is it possible to generate the CSS that you pass into Lightning CSS so it is already sorted? I'm not super familiar with Panda but I guess you know all of the condition names like _hover and could generate those in the right order?

[astahmer]

The reason I haven't done this yet is performance.

makes sense ! That was a bonus/convenience API request btw, definitely not a priority 😛

I wonder if there is an API we could provide to accomplish this without needing to serialize the entire AST. Any ideas?

keep in mind that I have literally 0 experience with Rust, so I'm not sure if this any of this is possible, but here are some ideas:

• Instead of serializing the entire AST, only serialize the parts that JS explicitly asks for. e.g. if JS asks for the [value, value.rules] properties of a Rule, only serialize the value & rules field, and skip things like the query and loc object. Something like JSON Paths could be used to specify which fields to serialize.

---

Rule is already pretty slow because it must serialize the entire contents of every rule.

another way could be to just send the Rule depth 0 & depth 1 properties:

• type / value in depth 0
• query / loc in depth 1 (inside value)
• rules being in depth 1 (also inside value) would be an array of AST nodes ids if there are any, or just the size otherwise ?

and then have JS request the Rule's children (rules) when needed. So basically, lazy loading.

I suppose we could add a StyleSheet visitor function, but you might lose a lot of performance advantages.

For example with this, I imagine something like (very pseudocode-ish)

const rulesMap = new Map<RuleNode["id"], Rule>()
const rootRules = new Set<RuleNode["id"]>()

const visitors = {
    StyleSheet (sheet) {
        sheet.rules.forEach(rule => {
            rootRules.add(rule.id)
        })
    },
    Rule (rule) {
        rulesMap.set(rule.id, rule)
    }
    // ...
    StyleSheetExit () {
        return { raw: sortRules(Array.from(rulesMap.values)).map(rule => rule.raw).join('\n') }
    }
}

---

Also, is it possible to generate the CSS that you pass into Lightning CSS so it is already sorted? I'm not super familiar with Panda but I guess you know all of the condition names like _hover and could generate those in the right order?

Yeah we have those conditions etc, so also makes sense and could probably be done this way !

[jpmaga]

@devongovett is the StyleSheet visitor function still in the pipeline or has the idea been abandoned?

In my opinion, it might be a bit of a performance impact, but since it is opt-in, as long as it is clear that it does impact it, it should be fine. And the possibilities just increase exponentially.