test initial map

[johnbender]

The computed output from phantom's webkit can include properties like background-repeat: initial initial. According to the MDN docs the initial value is CSS3 and not currently supported by IE. It also causes failures in the standard CSS validator.

This pull request lets the caller of findCritical pass in a mapping of initial values associated with replacements for those values. In the given example, again according to the MDN docs, background-repeat: initial initial should be changed to background-repeat: repeat repeat:

critical.findCritical( "http:// ...", {
  rules: [ ... ],
  initialMap: {
    "background-repeat" : "repeat"
  }
}, function(err, content){ ... });

[johnbender]

@jefflembeck

@scottjehl suggested that this might already be addressed, but he's on leave so he shouldn't be working :)

Do you have any idea where this might be addressed in the code? I grepped for "initial" and checked the readme but that could easily have missed something.

[jefflembeck]

@johnbender The initial issue has never been addressed by me and is an excellent thing to take on.

[johnbender]

@jefflembeck

I'm wondering if we could do a conditional dependency on cssnext and then add an option to pipe the output through there? Initially I thought that might go in the grunt plugin but it seem like a reasonable option for the library too.

If you like that idea I can close this PR and take that route.

[johnbender]

@jefflembeck @toddparker

So I looked into cssnext tonight but the initial value support appears to be confined to single value properties?

In the above screenshot you can see it correctly maps the initial values to inline and and repeat.

In this screenshot you can see it fails for the two value syntax which is what we get out of phantom's computed css. I went to look at the options and the postcss-initial plugin and it doesn't seem to handle this case at all.

I posted an issue to the postcss-initial plugin repository:

https://github.com/maximkoretskiy/postcss-initial/issues/16