Remix.run Logo
efortis 5 hours ago

Not sure I follow the scenario this would solve.

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;
    }
  }
evnc 4 hours ago | parent | next [-]

tbh, this started as a connection of two disparate ideas ("hey, this thing looks like this other thing"), and then just kind of explores it in different directions.

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!

tadfisher 4 hours ago | parent | prev [-]

The article describes a syntax for modifying the underlying data (adding new child elements or attributes to the DOM) for matching selectors, not resolving style changes in a single pass like you've shown.

capitainenemo 4 hours ago | parent [-]

I suspect they are replying to this part of the article: "What you actually want to say is: “an element is effectively-dark if it has data-theme=”dark”, or if it has an effectively-dark ancestor with no effectively-light ancestor in between.” That’s a recursive relational definition. CSS cannot express it. CSSLog can:"

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.