Front end of the Slack clone application.

processor.js 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. 'use strict';
  2. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  3. var Value = require('./value');
  4. var OLD_LINEAR = /(^|[^-])linear-gradient\(\s*(top|left|right|bottom)/i;
  5. var OLD_RADIAL = /(^|[^-])radial-gradient\(\s*\d+(\w*|%)\s+\d+(\w*|%)\s*,/i;
  6. var SIZES = ['width', 'height', 'min-width', 'max-width', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size'];
  7. var Processor = function () {
  8. function Processor(prefixes) {
  9. _classCallCheck(this, Processor);
  10. this.prefixes = prefixes;
  11. }
  12. /**
  13. * Add necessary prefixes
  14. */
  15. Processor.prototype.add = function add(css, result) {
  16. var _this = this;
  17. // At-rules
  18. var resolution = this.prefixes.add['@resolution'];
  19. var keyframes = this.prefixes.add['@keyframes'];
  20. var viewport = this.prefixes.add['@viewport'];
  21. var supports = this.prefixes.add['@supports'];
  22. css.walkAtRules(function (rule) {
  23. if (rule.name === 'keyframes') {
  24. if (!_this.disabled(rule, result)) {
  25. return keyframes && keyframes.process(rule);
  26. }
  27. } else if (rule.name === 'viewport') {
  28. if (!_this.disabled(rule, result)) {
  29. return viewport && viewport.process(rule);
  30. }
  31. } else if (rule.name === 'supports') {
  32. if (_this.prefixes.options.supports !== false && !_this.disabled(rule, result)) {
  33. return supports.process(rule);
  34. }
  35. } else if (rule.name === 'media' && rule.params.indexOf('-resolution') !== -1) {
  36. if (!_this.disabled(rule, result)) {
  37. return resolution && resolution.process(rule);
  38. }
  39. }
  40. return undefined;
  41. });
  42. // Selectors
  43. css.walkRules(function (rule) {
  44. if (_this.disabled(rule, result)) return undefined;
  45. return _this.prefixes.add.selectors.map(function (selector) {
  46. return selector.process(rule, result);
  47. });
  48. });
  49. css.walkDecls(function (decl) {
  50. if (_this.disabledDecl(decl, result)) return undefined;
  51. if (decl.prop === 'display' && decl.value === 'box') {
  52. result.warn('You should write display: flex by final spec ' + 'instead of display: box', { node: decl });
  53. return undefined;
  54. }
  55. if (decl.value.indexOf('linear-gradient') !== -1) {
  56. if (OLD_LINEAR.test(decl.value)) {
  57. result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `to left` instead of `right`.', { node: decl });
  58. }
  59. }
  60. if (decl.value.indexOf('radial-gradient') !== -1) {
  61. if (OLD_RADIAL.test(decl.value)) {
  62. result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `closest-side at 0 0` ' + 'instead of `0 0, closest-side`.', { node: decl });
  63. } else if (/[^-]cover/.test(decl.value)) {
  64. result.warn('Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl });
  65. } else if (/[^-]contain/.test(decl.value)) {
  66. result.warn('Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl });
  67. }
  68. }
  69. if (decl.prop === 'text-emphasis-position') {
  70. if (decl.value === 'under' || decl.value === 'over') {
  71. result.warn('You should use 2 values for text-emphasis-position ' + 'For example, `under left` instead of just `under`.', { node: decl });
  72. }
  73. }
  74. if (SIZES.indexOf(decl.prop) !== -1) {
  75. if (decl.value.indexOf('fill-available') !== -1) {
  76. result.warn('Replace fill-available to stretch, ' + 'because spec had been changed', { node: decl });
  77. } else if (decl.value.indexOf('fill') !== -1) {
  78. result.warn('Replace fill to stretch, ' + 'because spec had been changed', { node: decl });
  79. }
  80. }
  81. var prefixer = void 0;
  82. if (decl.prop === 'transition' || decl.prop === 'transition-property') {
  83. // Transition
  84. return _this.prefixes.transition.add(decl, result);
  85. } else if (decl.prop === 'align-self') {
  86. // align-self flexbox or grid
  87. var display = _this.displayType(decl);
  88. if (display !== 'grid' && _this.prefixes.options.flexbox !== false) {
  89. prefixer = _this.prefixes.add['align-self'];
  90. if (prefixer && prefixer.prefixes) {
  91. prefixer.process(decl);
  92. }
  93. }
  94. if (display !== 'flex' && _this.prefixes.options.grid !== false) {
  95. prefixer = _this.prefixes.add['grid-row-align'];
  96. if (prefixer && prefixer.prefixes) {
  97. return prefixer.process(decl, result);
  98. }
  99. }
  100. } else if (decl.prop === 'justify-self') {
  101. // justify-self flexbox or grid
  102. var _display = _this.displayType(decl);
  103. if (_display !== 'flex' && _this.prefixes.options.grid !== false) {
  104. prefixer = _this.prefixes.add['grid-column-align'];
  105. if (prefixer && prefixer.prefixes) {
  106. return prefixer.process(decl, result);
  107. }
  108. }
  109. } else {
  110. // Properties
  111. prefixer = _this.prefixes.add[decl.prop];
  112. if (prefixer && prefixer.prefixes) {
  113. return prefixer.process(decl, result);
  114. }
  115. }
  116. return undefined;
  117. });
  118. // Values
  119. return css.walkDecls(function (decl) {
  120. if (_this.disabledValue(decl, result)) return;
  121. var unprefixed = _this.prefixes.unprefixed(decl.prop);
  122. for (var _iterator = _this.prefixes.values('add', unprefixed), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
  123. var _ref;
  124. if (_isArray) {
  125. if (_i >= _iterator.length) break;
  126. _ref = _iterator[_i++];
  127. } else {
  128. _i = _iterator.next();
  129. if (_i.done) break;
  130. _ref = _i.value;
  131. }
  132. var value = _ref;
  133. value.process(decl, result);
  134. }
  135. Value.save(_this.prefixes, decl);
  136. });
  137. };
  138. /**
  139. * Remove unnecessary pefixes
  140. */
  141. Processor.prototype.remove = function remove(css, result) {
  142. var _this2 = this;
  143. // At-rules
  144. var resolution = this.prefixes.remove['@resolution'];
  145. css.walkAtRules(function (rule, i) {
  146. if (_this2.prefixes.remove['@' + rule.name]) {
  147. if (!_this2.disabled(rule, result)) {
  148. rule.parent.removeChild(i);
  149. }
  150. } else if (rule.name === 'media' && rule.params.indexOf('-resolution') !== -1 && resolution) {
  151. resolution.clean(rule);
  152. }
  153. });
  154. // Selectors
  155. var _loop = function _loop(checker) {
  156. css.walkRules(function (rule, i) {
  157. if (checker.check(rule)) {
  158. if (!_this2.disabled(rule, result)) {
  159. rule.parent.removeChild(i);
  160. }
  161. }
  162. });
  163. };
  164. for (var _iterator2 = this.prefixes.remove.selectors, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
  165. var _ref2;
  166. if (_isArray2) {
  167. if (_i2 >= _iterator2.length) break;
  168. _ref2 = _iterator2[_i2++];
  169. } else {
  170. _i2 = _iterator2.next();
  171. if (_i2.done) break;
  172. _ref2 = _i2.value;
  173. }
  174. var checker = _ref2;
  175. _loop(checker);
  176. }
  177. return css.walkDecls(function (decl, i) {
  178. if (_this2.disabled(decl, result)) return;
  179. var rule = decl.parent;
  180. var unprefixed = _this2.prefixes.unprefixed(decl.prop);
  181. // Transition
  182. if (decl.prop === 'transition' || decl.prop === 'transition-property') {
  183. _this2.prefixes.transition.remove(decl);
  184. }
  185. // Properties
  186. if (_this2.prefixes.remove[decl.prop] && _this2.prefixes.remove[decl.prop].remove) {
  187. var notHack = _this2.prefixes.group(decl).down(function (other) {
  188. return _this2.prefixes.normalize(other.prop) === unprefixed;
  189. });
  190. if (unprefixed === 'flex-flow') {
  191. notHack = true;
  192. }
  193. if (notHack && !_this2.withHackValue(decl)) {
  194. if (decl.raw('before').indexOf('\n') > -1) {
  195. _this2.reduceSpaces(decl);
  196. }
  197. rule.removeChild(i);
  198. return;
  199. }
  200. }
  201. // Values
  202. for (var _iterator3 = _this2.prefixes.values('remove', unprefixed), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
  203. var _ref3;
  204. if (_isArray3) {
  205. if (_i3 >= _iterator3.length) break;
  206. _ref3 = _iterator3[_i3++];
  207. } else {
  208. _i3 = _iterator3.next();
  209. if (_i3.done) break;
  210. _ref3 = _i3.value;
  211. }
  212. var checker = _ref3;
  213. if (!checker.check(decl.value)) {
  214. continue;
  215. }
  216. unprefixed = checker.unprefixed;
  217. var _notHack = _this2.prefixes.group(decl).down(function (other) {
  218. return other.value.indexOf(unprefixed) !== -1;
  219. });
  220. if (_notHack) {
  221. rule.removeChild(i);
  222. return;
  223. }
  224. }
  225. });
  226. };
  227. /**
  228. * Some rare old values, which is not in standard
  229. */
  230. Processor.prototype.withHackValue = function withHackValue(decl) {
  231. return decl.prop === '-webkit-background-clip' && decl.value === 'text';
  232. };
  233. /**
  234. * Check for grid/flexbox options.
  235. */
  236. Processor.prototype.disabledValue = function disabledValue(node, result) {
  237. if (this.prefixes.options.grid === false && node.type === 'decl') {
  238. if (node.prop === 'display' && node.value.indexOf('grid') !== -1) {
  239. return true;
  240. }
  241. }
  242. if (this.prefixes.options.flexbox === false && node.type === 'decl') {
  243. if (node.prop === 'display' && node.value.indexOf('flex') !== -1) {
  244. return true;
  245. }
  246. }
  247. return this.disabled(node, result);
  248. };
  249. /**
  250. * Check for grid/flexbox options.
  251. */
  252. Processor.prototype.disabledDecl = function disabledDecl(node, result) {
  253. if (this.prefixes.options.grid === false && node.type === 'decl') {
  254. if (node.prop.indexOf('grid') !== -1 || node.prop === 'justify-items') {
  255. return true;
  256. }
  257. }
  258. if (this.prefixes.options.flexbox === false && node.type === 'decl') {
  259. var other = ['order', 'justify-content', 'align-items', 'align-content'];
  260. if (node.prop.indexOf('flex') !== -1 || other.indexOf(node.prop) !== -1) {
  261. return true;
  262. }
  263. }
  264. return this.disabled(node, result);
  265. };
  266. /**
  267. * Check for control comment and global options
  268. */
  269. Processor.prototype.disabled = function disabled(node, result) {
  270. if (!node) return false;
  271. if (node._autoprefixerDisabled !== undefined) {
  272. return node._autoprefixerDisabled;
  273. }
  274. if (node.nodes) {
  275. var status = undefined;
  276. node.each(function (i) {
  277. if (i.type !== 'comment') return;
  278. if (/(!\s*)?autoprefixer:\s*(off|on)/i.test(i.text)) {
  279. if (typeof status !== 'undefined') {
  280. result.warn('Second Autoprefixer control comment ' + 'was ignored. Autoprefixer applies control ' + 'comment to whole block, not to next rules.', { node: i });
  281. } else {
  282. status = /on/i.test(i.text);
  283. }
  284. }
  285. });
  286. var value = false;
  287. if (status !== undefined) {
  288. value = !status;
  289. } else if (node.parent) {
  290. value = this.disabled(node.parent, result);
  291. }
  292. node._autoprefixerDisabled = value;
  293. return node._autoprefixerDisabled;
  294. } else {
  295. node._autoprefixerDisabled = this.disabled(node.parent, result);
  296. return node._autoprefixerDisabled;
  297. }
  298. };
  299. /**
  300. * Normalize spaces in cascade declaration group
  301. */
  302. Processor.prototype.reduceSpaces = function reduceSpaces(decl) {
  303. var stop = false;
  304. this.prefixes.group(decl).up(function () {
  305. stop = true;
  306. return true;
  307. });
  308. if (stop) {
  309. return;
  310. }
  311. var parts = decl.raw('before').split('\n');
  312. var prevMin = parts[parts.length - 1].length;
  313. var diff = false;
  314. this.prefixes.group(decl).down(function (other) {
  315. parts = other.raw('before').split('\n');
  316. var last = parts.length - 1;
  317. if (parts[last].length > prevMin) {
  318. if (diff === false) {
  319. diff = parts[last].length - prevMin;
  320. }
  321. parts[last] = parts[last].slice(0, -diff);
  322. other.raws.before = parts.join('\n');
  323. }
  324. });
  325. };
  326. /**
  327. * Is it flebox or grid rule
  328. */
  329. Processor.prototype.displayType = function displayType(decl) {
  330. for (var _iterator4 = decl.parent.nodes, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
  331. var _ref4;
  332. if (_isArray4) {
  333. if (_i4 >= _iterator4.length) break;
  334. _ref4 = _iterator4[_i4++];
  335. } else {
  336. _i4 = _iterator4.next();
  337. if (_i4.done) break;
  338. _ref4 = _i4.value;
  339. }
  340. var i = _ref4;
  341. if (i.prop !== 'display') {
  342. continue;
  343. }
  344. if (i.value.indexOf('flex') !== -1) {
  345. return 'flex';
  346. }
  347. if (i.value.indexOf('grid') !== -1) {
  348. return 'grid';
  349. }
  350. }
  351. return false;
  352. };
  353. return Processor;
  354. }();
  355. module.exports = Processor;