How to better represent ast nodes

Hello,

I’m working on a project “conky” like project (it’s system monitoring displaying data on the desktop".
The configuration is provided as a small subset of html and css.
Currently, I have a html parser (heavily inspired by zig parser) and I want to add the css parser.
I want to use the same Ast with both parsers and I have trouble finding a good representation of the node.
Currently I have this:

pub const Node = struct {
    token: HtmlToken,
    first_child: OptionalIndex,
    next_sibling: OptionalIndex,
    attributes: []Attribute,
    value: []u8,

    pub const Attribute = struct {
        attribute_name: HtmlToken.Tag,
        value: []const u8,
    };

    pub const OptionalIndex = enum(u32) {
        none = std.math.maxInt(u32),
        _,

        pub fn unwrap(oi: OptionalIndex) ?u32 {
            return if (oi == .none) null else @intFromEnum(oi);
        }
    };
};

I was thinking have a single Node struct like:

pub const Node = struct {
    first_child: OptionalIndex,
    next_sibling: OptionalIndex,

    kind: union(enum) {
        html: struct {
            token: HtmlToken,
            attributes: []Attribute,
            value: []u8,
        },
        css: struct {
            selector: []const u8,
            value: []u8,
        },
    },

    pub const Attribute = struct {
        attribute_name: HtmlToken.Tag,
        value: []const u8,
    };

    pub const OptionalIndex = enum(u32) {
        none = std.math.maxInt(u32),
        _,

        pub fn unwrap(oi: OptionalIndex) ?u32 {
            return if (oi == .none) null else @intFromEnum(oi);
        }
    };
};

Another solution is to have 2 distinct structs HtmlNode and CssNode. I cannot decide what is best?
What do you think guys?

Thank you

I think I would go with separate node types for html and css or even separate the parsers entirely.

Then maybe you could make it so that some higher level thing can combine them so that it can use the html parser to get the style attribute and then use the css parser to parse the inline styles?

But this is just my first idea, without having done any experiments or thinking about it in depth.

My preferred solution most of the time is to not use html / css at all, I think it would be better to create/use more minimal alternatives.