Preserve multiple definitions of the same property in the same rule?

NV / CSSOM

Unmaintained! ⚠️ CSS Object Model implemented in pure JavaScript. Also, a CSS parser.

https://nv.github.io/CSSOM/docs/parse.html

MIT License

751 stars 99 forks source link

Preserve multiple definitions of the same property in the same rule? #16

Open papandreou opened 13 years ago

papandreou commented 13 years ago

It's not uncommon for CSS authors to take advantage of the fact that a browser must ignore a CSS property in its entirety if a parse error or unsupported token is encountered in the value. For example:

body {
    background-image: -moz-radial-gradient(center, #a8e936, #76a326);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#a8e936), to(#76a326));
    background-image: -webkit-radial-gradient(center, #a8e936, #76a326);
}

If parsed and reserialized using CSSOM only the last of the three background-image properties will survive. In the project I'm working on it would be very desirable to be able to reconstruct the whole thing. I'm not sure if this falls within the scope of CSSOM -- but would it be possible to achieve that behavior somehow?

Best regards, Papandreou

NV commented 13 years ago

I fully understand your problem. I'm rewriting the parser in SAC-style. It will allow me to parse CSS into different object models, not just CSSOM. Like so:

body {
    background-image: -moz-radial-gradient(center, #a8e936, #76a326);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#a8e936), to(#76a326));
    background-image: -webkit-radial-gradient(center, #a8e936, #76a326);
}

into

{
  "cssRules": [
    {
      "selectorText": "body",
      "style": {
        "0": {
          name: "background-image",
          value: "-moz-radial-gradient(center, #a8e936, #76a326)"
        },
        "1": {
          name: "background-image",
          value: "-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#a8e936), to(#76a326))"
        },
        "2": {
          name: "background-image",
          value: "-webkit-radial-gradient(center, #a8e936, #76a326);"
        },
        "length": 3,
        "background-image": [0, 1, 2]
      }
    }
  ]
}

Stay tuned!

papandreou commented 13 years ago

Awesome :). That'd be exactly what I need!

stef commented 13 years ago

yes, i have the same problem. would be awesome to have this.

NV commented 13 years ago

I don't think I'll fix it soon. If you want it ASAP you could override CSSStyleDeclaration.prototype.setProperty.

papandreou commented 13 years ago

I ended up hacking the CSS parser to continue with a new rule (with an identical selector) if it sees a property redefinition. Seems like that preserves the semantics: https://github.com/One-com/assetgraph/compare/9609d665b8c8e645d8f3...ee00c998754b15c75952#diff-0 (only the changes to lib/3rdparty/CSSOM/lib/parse.js are relevant, don't mind the other diffs).

Haven't looked into doing the opposite during serialization yet.

NV commented 13 years ago

@papandreou

img {
  border: none;
  border: 1px solid red;
}

serializes to

img {
  border: none;
}
img {
  border: 1px solid red;
}

The downside is it changes amount of selectors.

papandreou commented 13 years ago

@NV: Since I wrote the previous message I've patched the serialization code to do the inverse: https://github.com/One-com/assetgraph/blob/master/lib/3rdparty/CSSOM/lib/CSSStyleSheet.js#L77-L91

So your example now serializes to one rule with a single selector :)

Yes, it's still a hack, and in some corner cases it will collapse neighboring rules with the same selector that were separate originally, but the semantics are preserved and it seems to be adequate for my use case.