#Pseudo-CSS to SVG "compiler"

inspired by https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg

#Usage

psc.py <infile> [outfile]

#Syntax

Syntax is like CSS:

tagname {
    attribute: value;
}

tags can be nested

svg {
    circle {
        cx: 2;
        cy: 2;
        r: 1;
    }
}

ID and class names are defined like a css selector:

svg {
    rect.alert.warning {
        x: 0;
        y: 0;
        width 100%;
        height: 100%;
    }
    circle#logo {
        cx: 2;
        cy: 2;
        r: 1;
    }
}

attributes with equal values can be "grouped":

svg {
    width, height: 10cm;
}

text content is set using content attribute:

svg {
    text {
        content: Hello, world;
    }
}

attribute values can be wrapped in quotes:

svg {
    text {
        content: "Hello; world";
    }
}

an attibute can have no value, the example above without quotes would results in:

svg {
    text {
        content: Hello; world;
    }
}

<svg>
    <text world>Hello</text>
</svg>

multiple tags with same attributes can be created:

svg {
    rect#r1, rect#r2 {
        x, y: 10;
        width, height: 5;
    }
}

(I don't know how this could be usefull, but it is supported)

Namespaces are supported using CSS @namespace syntax

@namespace url(http://www.w3.org/2000/svg);
@namespace xlink url(http://www.w3.org/1999/xlink);

svg {
    use {
        xlink|href: "#something";
    }
}

default xml namespace is set to "http://www.w3.org/2000/svg" if not defined in file.

PSC supports multiline block comments /* .. */ and inline comments // ...

// an inline comment is valid until the end of the line

/*
    a block comment can be multiline and it's valid until closed
*/

svg {
    rect {
        x: 0 // an inline comment can be last thing on the line
        // y: 0
        /* a block line can be everywhere */ y: 10
    }

    text {
        content: hello /* except inside an attribute value. */ world;
        // this doesn't work, attribute value is ended by the comment 
    }
}

#note

As there aren't any features specific to SVG generation except the default namespace, if not set, PSC can generate any XML from a source file.

// An atom feed
@namespace url(http://www.w3.org/2005/Atom)

feed {
    title { content: My blog atom feed }

    entry {
        title { content: Hello world again }
        id { content: 2 }
        link { href: "https://blog.example.com/post/2" }
    }

        entry {
        title { content: Hello world! }
        id { content: 1 }
        link { href: "https://blog.example.com/post/1" }
    }
}

<feed xmlns="http://www.w3.org/2005/Atom">
  <title>My blog atom feed</title>
  <entry>
    <title>Hello world again</title>
    <id>2</id>
    <link href="https://blog.example.com/post/2"/>
  </entry>
  <entry>
    <title>Hello world!</title>
    <id>1</id>
    <link href="https://blog.example.com/post/1"/>
  </entry>
</feed>