[cssom] There should be a way to get Character Position of the Stylesheet Elements

[jogibear9988]

If you create a Designer Application wich supports CSS, you need the character position of the Rules/Declarations so you can modify the CSS.

See my sample Designer https://node-projects.github.io/web-component-designer-demo/index.html

Proposal

The addition of a constructor parameter for CSSStyleSheet, so it should keep the positional Information and a 'offset' Property for each class of the [cssom].

const ss = new CSSStyleSheet(true) //enables the positional information
ss.replaceSync(".a{display:block}");

ss.cssRules[0].offset

If feasible the offset property could be added and filled without any additional constructor parameter.

This is dependend on https://github.com/w3c/csswg-drafts/issues/10470

[emilio]

So engines do have this information but use-cases seem fairly limited to DevTools-style applications...

Also, this doesn't play well at all with cssom, this only works for untouched stylesheets... What Gecko does if you do .insertRule or so is to basically have a flag that we use to fall back to CSSOM for editing, and that doesn't seem a particularly clean solution to expose to the web...

So I tend to wontfix this, but curious about other implementations and how they deal with this? @lilles

[lilles]

We send source offsets for rules to a devtools observer during parsing, but I don't know exactly how these are adjusted or kept in sync on CSSOM changes. It's not done in the core engine, so it's in the devtools code somewhere.