It's a shame that because CSS is still primarily for browser use and styling, we don't get nice things like the ability to select based on text content like we can with XPath. My understanding is that this was proposed but didn't make it into the spec because it could lead to performance issues in a browser rendering context.
[1] https://speakerdeck.com/keyvan/parsing-html-with-php-8-dot-4...
https://developer.mozilla.org/en-US/docs/Web/API/Document/ev...
e.g.:
pyastgrep --css 'Call > func > Name#main'
It was a joke but I really like the way it pointed out how we copy and reapply patterns in different contexts and that might enable unexpected things.
> we copy and reapply patterns in different contexts and that might enable unexpected things
yeah, that's exactly what I am trying to do here. Mostly it doesn't go anywhere, but it's interesting for the hacker spirit within me :)
For instance, currently you can conditionally change a parent based on its children. For example, this `pre` could either have 16px or 0px of padding. Zero when its direct child is a `code` element.
pre {
padding: 16px;
&:has(> code) {
padding: 0;
}
}I think the conclusion (which I may not have made clear enough) is less like "These are limitations of modern CSS which ought to be fixed" and more "Maybe a CSS-like syntax could be added to a Datalog-like system and that would be helpful for making it more accessible to more engineers, navigating tree-shaped data, etc"
thanks for the feedback, anyway!
The entire article doesn't seem to mention the existence of :has() which is rather surprising given how recently it was written. Not even in the footnotes.
It's not that I don't understand the rationale - any programming language offers more power than a non-programming language. But I'd rather think here that something else could instead replace all of HTML, CSS and JavaScript, rather than constantly wanting to make everything more complex. I don't use most of the new elements in HTML5, largely because I don't see the point in using specialized tags for micro-describing a webpage. I succumbed to the "it is a div-HTML tag and it has a unique ID"; that's what I think mots of those containers actually really are. I even wanted to have aliases to such IDs, simply to use as navigational href intralink.
[data-theme="dark"] [data-theme="light"] :focus {
outline-color: black;
}
On the other hand:
h2 {
color: red;
}
So ancestor(X, Y) :- parent(X, Y). means: “For all possible values of X and Y, X
is an ancestor of Y, if X is a parent of Y.”
@container style(--theme: dark) {
.card { background: royalblue; color: white; }
}
I think this is a problem with CSS - too many people are ruining it. It is strange to see how standards that used to work, are degraded over time.
eg this example:
[data-theme="dark"] [data-theme="light"] :focus {
outline-color: black;
}
so we could write this also as, e.g.:
outline-color(Y, black) if
data-theme(X, "dark") and
parent(X, Y) and
data-theme(Y, "light") and
focused(Y)
if we want even more syntax sugar, we could do:
Y.outline_color := black if
X.data-theme == dark and
Y.parent == X and
Y.data-theme == dark and
Y.focused
the declaration and scope of these variables is implicit here; if you want something even more ALGOL-family, we could write
forall Y {
Y.outline_color := black if
Y.data_theme == "dark" and
Y.focused and
Y.parent.data_theme == "light"
}
SELECT 'black' AS outline_color
FROM elements parent
JOIN elements child ON parent.id = child.parent_id
WHERE parent.data_theme = 'light'
AND child.data_theme = 'dark'
AND child.focused = true