← Back to context

Comment by yread

4 days ago

I don't understand the point about comments. Why shouldn't they be allowed? What object model?

>Comments shouldn't have been allowed basically everywhere in CSS (compare to HTML, which basically only allows them where content goes), because it makes them basically unrepresentable in the object model, which in turn makes building editing directly on top of the object model impossible

Imagine you have something like `width /comment/: /comment2 /12px /comment3/,`. Now you want to load your css into some kind of structured representation, rearrange it, then spit it back out again with that comment intact. The requirement to represent such comments in your structured format so you can retain them is really obnoxious. In html you can just view comments as another node in a uniform tree.

  • > In html you can just view comments as another node in a uniform tree.

    When you parse an AST with comments (or a CST), they do become "just another node in a uniform tree". Think about it - in HTML you have a tree of nodes but comments can be anywhere, which is exactly as obnoxious to deal with as a CST where comment nodes can be anywhere.

    This is a terrible reason to not support comments. If it was really important, then probably you should support comments in only a couple of places, e.g. on attributes or on selectors.

    But I don't think it is very important. I can't think of a single tool that loads CSS, rearranges it, and then spits it back out in a form that would benefit from comments.

    • > in HTML you have a tree of nodes but comments can be anywhere

      Maybe I'm misunderstanding, but no they can't. For example the comment here is not a comment, but part of the URL:

          <a href="https://example.com<!-- comment -->">click me</a>
      

      And HTML like this is simply broken:

          <div<!-- comment -->>content</div>
      

      Maybe you meant "they can be anywhere that a Node can be in the DOM", but I think that's more or less what the CSS "mistake" is suggesting should be true about CSS (just replace "DOM" with "CSSOM").

      6 replies →

I'm guessing they mean that comments shouldn't be allowed everywhere, not that they shouldn't be allowed at all? i.e. CSS lets you put comments in many more places than HTML, in such a way that it's hard to practically impossible to represent in an AST? At least that's how I read it

Same reason why JSON prohibits comments: When you parse it, there is no place to represent the comments in the JavaScript object and array tree, so they must be thrown away, therefore it's impossible to write it out with the same comments in the same places.

Same thing with white space: JSON can not round trip white space or comments the way XML or HTML can, because XML and HTML DOM represents comments and white space explicitly.

Also you can't put comments inside elements like <div <--! comment --> class="foo">. There is no way to represent a comment inside an element in XML or HTML DOM.

But CSS lets you, so you can't round trip comments in CSS.

The CSS Object Model.

HTML comments are basically just a HTML tag that isn't rendered. Tools that 'compile' the HTML code into a document tree, including browsers, preserve comments as nodes without any extra effort.

CSS comments can go anywhere:

    /*wow*/ .selector /*x*/ {animation /*z*/: 2s /*z*/ linear /*z*/ bounce;}

Tools that transform/parse CSS can either: 1. Strip comments before parsing, meaning anything based on the parsed version will lose the comments. 2. Dedicate a disproportionate amount of complexity to retaining the comments, and still not really have a good way to handle them through edits/transformations.

  • But if it's valid CSS it has to be representable in AST/object model? It's a comment, it can't have any child nodes, it doesn't depend on anything - pretty trivial. And if it's in the tree you can transform it with proper tools. If you are transforming CSS you have to write a proper parser and not just a bunch of regexes

    EDIT: also why is it useful to have comments in the object model in the first place? To access them from js?

    • Round-tripping to CSS and keeping information that may be useful to the user if they would inspect the content I would presume.

      A similar issue is CDATA in XML which is not retained when round-tripped. Very annoying, but in line with the spec.