CSSOM icon indicating copy to clipboard operation
CSSOM copied to clipboard

Parsing comments

Open jsmarkus opened this issue 12 years ago • 4 comments

I am going to use your parser for CSS sprites generator.

It would be convenient to parse comments as properties annotations like in the following example:

.icon {
background-image: url(./arrow.png); /*sprite: spr1.png*/
width: 24px;
height: 24px;
}
{
    parentStyleSheet: null,
    cssRules: [
        {
            parentRule: null,
            parentStyleSheet: "../..",
            selectorText: ".icon",
            style: {
                0: "background-image",
                1: "width",
                2: "height",
                length: 3,
                parentRule: "..",
                _importants: {
                    "background-image": "",
                    width: "",
                    height: ""
                },
                _comments: {
                    "background-image": "sprite: spr1.png",
                },
                __starts: 6,
                "background-image": "url(./arraw.png)",
                width: "24px",
                height: "24px"
            },
            __starts: 0,
            __ends: 93
        }
    ]
}

jsmarkus avatar Feb 27 '12 15:02 jsmarkus

I have a not yet released fork of CSSOM that does it like this:

{
    cssRules: [
        {
            selectorText: ".icon",
            properties: [
                {
                    name: "background-image",
                    value: "url(./arrow.png)",
                    important: false,
                    original: "\nbackground-image: url(./arrow.png); /*sprite: spr1.png*/\n"
                },
                {
                    name: "width",
                    value: "24px",
                    important: false,
                    original: "width: 24px;\n"
                }
            ],
            originalSelector: ".icon ",
            originalAppendix: ""
        }
    ]
}

NV avatar Feb 28 '12 19:02 NV

It's almost what i expected to see in CSSOM. It would really help me. Thanking you in anticipation!

jsmarkus avatar Mar 05 '12 06:03 jsmarkus

@jsmarkus I've done something very similar here: https://github.com/One-com/assetgraph-sprite -- except that I put the spriting instructions into vendor-prefixed CSS properties. That actually turned out to be very pleasant to work with because it's valid CSS.

papandreou avatar Nov 09 '12 08:11 papandreou

@NV If you don't want to merge this into master, can you push this as a separate branch?

zakdances avatar Sep 06 '13 22:09 zakdances