Build process: Style issues with cssom

[ryno1234]

During style builds, it appears a cssom package is being used for style parsing. It appears that the only reason the parsing occurs is to re-write url values for images to default them to /app/img.

The particular package being used has an "issue" with some CSS hacks related to duplicate css rules. Perhaps not an issue due to the fact that cssom is supposed to be a standards parser, but this creates major issues when attempting to target a wide variety of browsers as we all are attempting to do ;)

This is a known issue with cssom: NV/CSSOM#16

You can see an example of this using their online parse (http://nv.github.io/CSSOM/docs/parse.html)

.apple-navbar-ui  .ui-icon::before { 
    background-color: transparent; padding: 0.1em 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), color-stop(0.5, rgba(255,255,255,.10)), color-stop(0.505, rgba(255,255,255,.0)), to(rgba(255,255,255,.0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,.15) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.0) 50.5%, rgba(255,255,255,.0) 100%);
    background-image: -ms-linear-gradient(top, rgba(255,255,255,.15) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.0) 50.5%, rgba(255,255,255,.0) 100%);
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.15) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.0) 50.5%, rgba(255,255,255,.0) 100%);
    background-image: -o-linear-gradient(top, rgba(255,255,255,.15) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.0) 50.5%, rgba(255,255,255,.0) 100%);
    background-image: linear-gradient(top, rgba(255,255,255,.15) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.0) 50.5%, rgba(255,255,255,.0) 100%);
}

Will be parsed to...

{
    parentStyleSheet: null,
        cssRules
:
    [
        {
            parentRule: null,
            parentStyleSheet: "../..",
            selectorText: ".apple-navbar-ui  .ui-icon::before",
            style: {
                0: "background-color",
                1: "padding",
                2: "background-image",
                length: 3,
                parentRule: "..",
                _importants: {
                    "background-color": "",
                    padding: "",
                    "background-image": ""
                },
                __starts: 39,
                "background-color": "transparent",
                padding: "0.1em 0",
                "background-image": "linear-gradient(top, rgba(255,255,255,.15) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.0) 50.5%, rgba(255,255,255,.0) 100%)"
            },
            __starts: 4,
            __ends: 1115
        }
    ]
}

You can see that the "background-image" attribute here only has one entry throwing out the rest of the the rules. Perhaps when parsing a style, we can just simply use cssom to determine if a URL() value is used for a CSS rule and then subsequently due a selective replace of the original source for that CSS Selector. Thoughts?

[tbranyen]

This is a grunt-bbb-styles issue.

You can see the line here, will not parse if you remove the forceRelative option, maybe give that a shot?
https://github.com/backbone-boilerplate/grunt-bbb-styles/blob/master/tasks/styles.js#L69

To be honest I haven't hit this issue, but it does seem significant. An alternative might be to use pattern or string matching instead of AST parsing.

[ryno1234]

Thanks for the quick response - I appreciate it!