vendor-helpers.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. var RE_GRADIENT_STOPS = /([\(\,]\s*)(-?(?:\d*\.)?\d+(?:%|px|em))(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g,
  2. RE_GRADIENT_VAL = /(\(\s*)(?:(-?(\d*\.)?\d+)deg|((to )?(top|bottom|left|right)( (top|bottom|left|right))?))/g,
  3. RE_GRADIENT_TYPE = /((repeating-)?(linear|radial)-gradient\()/g,
  4. RE_TRANSFORM = /\b(transform)\b/g,
  5. RE_FILL_KEYWORD = /\s*\b(fill)\b\s*/g;
  6. var DIRECTIONS = { top: 'bottom', bottom: 'top', left: 'right', right:'left' };
  7. /**
  8. * Expose `normalize`.
  9. */
  10. function normalize(property, value, prefix){
  11. var result = value.toString(),
  12. args;
  13. /* Fixing the gradients */
  14. if (~result.indexOf('gradient(')) {
  15. /* Normalize color stops */
  16. result = result.replace(RE_GRADIENT_STOPS,'$1$4$3$2');
  17. /* Normalize legacy gradients */
  18. result = result.replace(RE_GRADIENT_VAL, function(){
  19. args = [].slice.call(arguments, 1);
  20. return normalizeGradient(args, prefix);
  21. });
  22. /* Adding prefixes to the legacy gradients */
  23. if (prefix) result = result.replace(RE_GRADIENT_TYPE, '-' + prefix + '-$1');
  24. }
  25. /* Adding prefixes to the `transform` values of legacy `transition` property */
  26. if (prefix && (property == "'transition'" || property == "'transition-property'")) {
  27. result = result.replace(RE_TRANSFORM, '-' + prefix + '-$1');
  28. }
  29. /* Removing `fill` keyword from the legacy `border-image` property */
  30. if (prefix && (property == "'border-image'" || property == "'border-image-slice'")) {
  31. result = result.replace(RE_FILL_KEYWORD, ' ');
  32. }
  33. return result;
  34. }
  35. function normalizeGradient(parts, prefix){
  36. /* Fix the degrees to the legacy syntax */
  37. var val = parts[0];
  38. // when the gradients were unprefixed, the w3c changed the way that the
  39. // angle direction is interpreted. see:
  40. // http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx
  41. if (parts[1]) val += (prefix ? parseFloat((Math.abs(450 - parts[1]) % 360).toFixed(3)) : parts[1]) + 'deg';
  42. /* Fix the directions to the legacy syntax */
  43. if (prefix && parts[4]) {
  44. // `to top` to `bottom` etc.
  45. if (parts[5]) val += DIRECTIONS[parts[5]];
  46. if (parts[6]) val += ' ' + DIRECTIONS[parts[7]];
  47. } else if (!prefix && !parts[4]) {
  48. // `top` to `to bottom` etc.
  49. if (parts[5]) val += 'to ' + DIRECTIONS[parts[5]];
  50. if (parts[6]) val += ' ' + DIRECTIONS[parts[7]];
  51. } else {
  52. if (parts[3]) val += parts[3];
  53. }
  54. return val;
  55. }
  56. var plugin = function(){
  57. return function(style){
  58. var nodes = this.nodes;
  59. style.define('normalize', function(property, value, prefix) {
  60. return new nodes.Ident(normalize(property, value, prefix));
  61. });
  62. };
  63. };
  64. module.exports = plugin;