break-up.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. var wrapSingle = require('./wrap-for-optimizing').single;
  2. var InvalidPropertyError = require('./invalid-property-error');
  3. var split = require('../utils/split');
  4. var MULTIPLEX_SEPARATOR = ',';
  5. function _colorFilter(validator) {
  6. return function (value) {
  7. return value[0] == 'invert' || validator.isValidColor(value[0]);
  8. };
  9. }
  10. function _styleFilter(validator) {
  11. return function (value) {
  12. return value[0] != 'inherit' && validator.isValidStyle(value[0]) && !validator.isValidColorValue(value[0]);
  13. };
  14. }
  15. function _wrapDefault(name, property, compactable) {
  16. var descriptor = compactable[name];
  17. if (descriptor.doubleValues && descriptor.defaultValue.length == 2)
  18. return wrapSingle([[name, property.important], [descriptor.defaultValue[0]], [descriptor.defaultValue[1]]]);
  19. else if (descriptor.doubleValues && descriptor.defaultValue.length == 1)
  20. return wrapSingle([[name, property.important], [descriptor.defaultValue[0]]]);
  21. else
  22. return wrapSingle([[name, property.important], [descriptor.defaultValue]]);
  23. }
  24. function _widthFilter(validator) {
  25. return function (value) {
  26. return value[0] != 'inherit' && validator.isValidWidth(value[0]) && !validator.isValidStyleKeyword(value[0]) && !validator.isValidColorValue(value[0]);
  27. };
  28. }
  29. function background(property, compactable, validator) {
  30. var image = _wrapDefault('background-image', property, compactable);
  31. var position = _wrapDefault('background-position', property, compactable);
  32. var size = _wrapDefault('background-size', property, compactable);
  33. var repeat = _wrapDefault('background-repeat', property, compactable);
  34. var attachment = _wrapDefault('background-attachment', property, compactable);
  35. var origin = _wrapDefault('background-origin', property, compactable);
  36. var clip = _wrapDefault('background-clip', property, compactable);
  37. var color = _wrapDefault('background-color', property, compactable);
  38. var components = [image, position, size, repeat, attachment, origin, clip, color];
  39. var values = property.value;
  40. var positionSet = false;
  41. var clipSet = false;
  42. var originSet = false;
  43. var repeatSet = false;
  44. if (property.value.length == 1 && property.value[0][0] == 'inherit') {
  45. // NOTE: 'inherit' is not a valid value for background-attachment
  46. color.value = image.value = repeat.value = position.value = size.value = origin.value = clip.value = property.value;
  47. return components;
  48. }
  49. for (var i = values.length - 1; i >= 0; i--) {
  50. var value = values[i];
  51. if (validator.isValidBackgroundAttachment(value[0])) {
  52. attachment.value = [value];
  53. } else if (validator.isValidBackgroundBox(value[0])) {
  54. if (clipSet) {
  55. origin.value = [value];
  56. originSet = true;
  57. } else {
  58. clip.value = [value];
  59. clipSet = true;
  60. }
  61. } else if (validator.isValidBackgroundRepeat(value[0])) {
  62. if (repeatSet) {
  63. repeat.value.unshift(value);
  64. } else {
  65. repeat.value = [value];
  66. repeatSet = true;
  67. }
  68. } else if (validator.isValidBackgroundPositionPart(value[0]) || validator.isValidBackgroundSizePart(value[0])) {
  69. if (i > 0) {
  70. var previousValue = values[i - 1];
  71. if (previousValue[0].indexOf('/') > 0) {
  72. var twoParts = split(previousValue[0], '/');
  73. // NOTE: we do this slicing as value may contain metadata too, like for source maps
  74. size.value = [[twoParts.pop()].concat(previousValue.slice(1)), value];
  75. values[i - 1] = [twoParts.pop()].concat(previousValue.slice(1));
  76. } else if (i > 1 && values[i - 2][0] == '/') {
  77. size.value = [previousValue, value];
  78. i -= 2;
  79. } else if (previousValue[0] == '/') {
  80. size.value = [value];
  81. } else {
  82. if (!positionSet)
  83. position.value = [];
  84. position.value.unshift(value);
  85. positionSet = true;
  86. }
  87. } else {
  88. if (!positionSet)
  89. position.value = [];
  90. position.value.unshift(value);
  91. positionSet = true;
  92. }
  93. } else if (validator.isValidBackgroundPositionAndSize(value[0])) {
  94. var sizeValue = split(value[0], '/');
  95. // NOTE: we do this slicing as value may contain metadata too, like for source maps
  96. size.value = [[sizeValue.pop()].concat(value.slice(1))];
  97. position.value = [[sizeValue.pop()].concat(value.slice(1))];
  98. } else if ((color.value[0][0] == compactable[color.name].defaultValue || color.value[0][0] == 'none') && validator.isValidColor(value[0])) {
  99. color.value = [value];
  100. } else if (validator.isValidUrl(value[0]) || validator.isValidFunction(value[0])) {
  101. image.value = [value];
  102. }
  103. }
  104. if (clipSet && !originSet)
  105. origin.value = clip.value.slice(0);
  106. return components;
  107. }
  108. function borderRadius(property, compactable) {
  109. var values = property.value;
  110. var splitAt = -1;
  111. for (var i = 0, l = values.length; i < l; i++) {
  112. if (values[i][0] == '/') {
  113. splitAt = i;
  114. break;
  115. }
  116. }
  117. if (splitAt === 0 || splitAt === values.length - 1) {
  118. throw new InvalidPropertyError('Invalid border-radius value.');
  119. }
  120. var target = _wrapDefault(property.name, property, compactable);
  121. target.value = splitAt > -1 ?
  122. values.slice(0, splitAt) :
  123. values.slice(0);
  124. target.components = fourValues(target, compactable);
  125. var remainder = _wrapDefault(property.name, property, compactable);
  126. remainder.value = splitAt > -1 ?
  127. values.slice(splitAt + 1) :
  128. values.slice(0);
  129. remainder.components = fourValues(remainder, compactable);
  130. for (var j = 0; j < 4; j++) {
  131. target.components[j].multiplex = true;
  132. target.components[j].value = target.components[j].value.concat(remainder.components[j].value);
  133. }
  134. return target.components;
  135. }
  136. function fourValues(property, compactable) {
  137. var componentNames = compactable[property.name].components;
  138. var components = [];
  139. var value = property.value;
  140. if (value.length < 1)
  141. return [];
  142. if (value.length < 2)
  143. value[1] = value[0].slice(0);
  144. if (value.length < 3)
  145. value[2] = value[0].slice(0);
  146. if (value.length < 4)
  147. value[3] = value[1].slice(0);
  148. for (var i = componentNames.length - 1; i >= 0; i--) {
  149. var component = wrapSingle([[componentNames[i], property.important]]);
  150. component.value = [value[i]];
  151. components.unshift(component);
  152. }
  153. return components;
  154. }
  155. function multiplex(splitWith) {
  156. return function (property, compactable, validator) {
  157. var splitsAt = [];
  158. var values = property.value;
  159. var i, j, l, m;
  160. // find split commas
  161. for (i = 0, l = values.length; i < l; i++) {
  162. if (values[i][0] == ',')
  163. splitsAt.push(i);
  164. }
  165. if (splitsAt.length === 0)
  166. return splitWith(property, compactable, validator);
  167. var splitComponents = [];
  168. // split over commas, and into components
  169. for (i = 0, l = splitsAt.length; i <= l; i++) {
  170. var from = i === 0 ? 0 : splitsAt[i - 1] + 1;
  171. var to = i < l ? splitsAt[i] : values.length;
  172. var _property = _wrapDefault(property.name, property, compactable);
  173. _property.value = values.slice(from, to);
  174. splitComponents.push(splitWith(_property, compactable, validator));
  175. }
  176. var components = splitComponents[0];
  177. // group component values from each split
  178. for (i = 0, l = components.length; i < l; i++) {
  179. components[i].multiplex = true;
  180. for (j = 1, m = splitComponents.length; j < m; j++) {
  181. components[i].value.push([MULTIPLEX_SEPARATOR]);
  182. Array.prototype.push.apply(components[i].value, splitComponents[j][i].value);
  183. }
  184. }
  185. return components;
  186. };
  187. }
  188. function listStyle(property, compactable, validator) {
  189. var type = _wrapDefault('list-style-type', property, compactable);
  190. var position = _wrapDefault('list-style-position', property, compactable);
  191. var image = _wrapDefault('list-style-image', property, compactable);
  192. var components = [type, position, image];
  193. if (property.value.length == 1 && property.value[0][0] == 'inherit') {
  194. type.value = position.value = image.value = [property.value[0]];
  195. return components;
  196. }
  197. var values = property.value.slice(0);
  198. var total = values.length;
  199. var index = 0;
  200. // `image` first...
  201. for (index = 0, total = values.length; index < total; index++) {
  202. if (validator.isValidUrl(values[index][0]) || values[index][0] == '0') {
  203. image.value = [values[index]];
  204. values.splice(index, 1);
  205. break;
  206. }
  207. }
  208. // ... then `type`...
  209. for (index = 0, total = values.length; index < total; index++) {
  210. if (validator.isValidListStyleType(values[index][0])) {
  211. type.value = [values[index]];
  212. values.splice(index, 1);
  213. break;
  214. }
  215. }
  216. // ... and what's left is a `position`
  217. if (values.length > 0 && validator.isValidListStylePosition(values[0][0]))
  218. position.value = [values[0]];
  219. return components;
  220. }
  221. function widthStyleColor(property, compactable, validator) {
  222. var descriptor = compactable[property.name];
  223. var components = [
  224. _wrapDefault(descriptor.components[0], property, compactable),
  225. _wrapDefault(descriptor.components[1], property, compactable),
  226. _wrapDefault(descriptor.components[2], property, compactable)
  227. ];
  228. var color, style, width;
  229. for (var i = 0; i < 3; i++) {
  230. var component = components[i];
  231. if (component.name.indexOf('color') > 0)
  232. color = component;
  233. else if (component.name.indexOf('style') > 0)
  234. style = component;
  235. else
  236. width = component;
  237. }
  238. if ((property.value.length == 1 && property.value[0][0] == 'inherit') ||
  239. (property.value.length == 3 && property.value[0][0] == 'inherit' && property.value[1][0] == 'inherit' && property.value[2][0] == 'inherit')) {
  240. color.value = style.value = width.value = [property.value[0]];
  241. return components;
  242. }
  243. var values = property.value.slice(0);
  244. var match, matches;
  245. // NOTE: usually users don't follow the required order of parts in this shorthand,
  246. // so we'll try to parse it caring as little about order as possible
  247. if (values.length > 0) {
  248. matches = values.filter(_widthFilter(validator));
  249. match = matches.length > 1 && (matches[0][0] == 'none' || matches[0][0] == 'auto') ? matches[1] : matches[0];
  250. if (match) {
  251. width.value = [match];
  252. values.splice(values.indexOf(match), 1);
  253. }
  254. }
  255. if (values.length > 0) {
  256. match = values.filter(_styleFilter(validator))[0];
  257. if (match) {
  258. style.value = [match];
  259. values.splice(values.indexOf(match), 1);
  260. }
  261. }
  262. if (values.length > 0) {
  263. match = values.filter(_colorFilter(validator))[0];
  264. if (match) {
  265. color.value = [match];
  266. values.splice(values.indexOf(match), 1);
  267. }
  268. }
  269. return components;
  270. }
  271. module.exports = {
  272. background: background,
  273. border: widthStyleColor,
  274. borderRadius: borderRadius,
  275. fourValues: fourValues,
  276. listStyle: listStyle,
  277. multiplex: multiplex,
  278. outline: widthStyleColor
  279. };