grid-utils.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. 'use strict';
  2. var parser = require('postcss-value-parser');
  3. function convert(value) {
  4. if (value && value.length === 2 && value[0] === 'span' && parseInt(value[1], 10) > 0) {
  5. return [false, parseInt(value[1], 10)];
  6. }
  7. if (value && value.length === 1 && parseInt(value[0], 10) > 0) {
  8. return [parseInt(value[0], 10), false];
  9. }
  10. return [false, false];
  11. }
  12. function translate(values, startIndex, endIndex) {
  13. var startValue = values[startIndex];
  14. var endValue = values[endIndex];
  15. if (!startValue) {
  16. return [false, false];
  17. }
  18. var _convert = convert(startValue),
  19. start = _convert[0],
  20. spanStart = _convert[1];
  21. var _convert2 = convert(endValue),
  22. end = _convert2[0],
  23. spanEnd = _convert2[1];
  24. if (start && !endValue) {
  25. return [start, false];
  26. }
  27. if (spanStart && end) {
  28. return [end - spanStart, spanStart];
  29. }
  30. if (start && spanEnd) {
  31. return [start, spanEnd];
  32. }
  33. if (start && end) {
  34. return [start, end - start];
  35. }
  36. return [false, false];
  37. }
  38. function parse(decl) {
  39. var node = parser(decl.value);
  40. var values = [];
  41. var current = 0;
  42. values[current] = [];
  43. for (var _iterator = node.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
  44. var _ref;
  45. if (_isArray) {
  46. if (_i >= _iterator.length) break;
  47. _ref = _iterator[_i++];
  48. } else {
  49. _i = _iterator.next();
  50. if (_i.done) break;
  51. _ref = _i.value;
  52. }
  53. var i = _ref;
  54. if (i.type === 'div') {
  55. current += 1;
  56. values[current] = [];
  57. } else if (i.type === 'word') {
  58. values[current].push(i.value);
  59. }
  60. }
  61. return values;
  62. }
  63. function insertDecl(decl, prop, value) {
  64. if (value && !decl.parent.some(function (i) {
  65. return i.prop === '-ms-' + prop;
  66. })) {
  67. decl.cloneBefore({
  68. prop: '-ms-' + prop,
  69. value: value.toString()
  70. });
  71. }
  72. }
  73. // Track transforms
  74. function prefixTrackProp(_ref2) {
  75. var prop = _ref2.prop,
  76. prefix = _ref2.prefix;
  77. return prefix + prop.replace('template-', '');
  78. }
  79. function transformRepeat(_ref3, _ref4) {
  80. var nodes = _ref3.nodes;
  81. var gap = _ref4.gap;
  82. var _nodes$reduce = nodes.reduce(function (result, node) {
  83. if (node.type === 'div' && node.value === ',') {
  84. result.key = 'size';
  85. } else {
  86. result[result.key].push(parser.stringify(node));
  87. }
  88. return result;
  89. }, {
  90. key: 'count',
  91. size: [],
  92. count: []
  93. }),
  94. count = _nodes$reduce.count,
  95. size = _nodes$reduce.size;
  96. if (gap) {
  97. var val = [];
  98. for (var i = 1; i <= count; i++) {
  99. if (gap && i > 1) {
  100. val.push(gap);
  101. }
  102. val.push(size.join());
  103. }
  104. return val.join(' ');
  105. }
  106. return '(' + size.join('') + ')[' + count.join('') + ']';
  107. }
  108. function prefixTrackValue(_ref5) {
  109. var value = _ref5.value,
  110. gap = _ref5.gap;
  111. var result = parser(value).nodes.reduce(function (nodes, node) {
  112. if (node.type === 'function' && node.value === 'repeat') {
  113. return nodes.concat({
  114. type: 'word',
  115. value: transformRepeat(node, { gap: gap })
  116. });
  117. }
  118. if (gap && node.type === 'space') {
  119. return nodes.concat({
  120. type: 'space',
  121. value: ' '
  122. }, {
  123. type: 'word',
  124. value: gap
  125. }, node);
  126. }
  127. return nodes.concat(node);
  128. }, []);
  129. return parser.stringify(result);
  130. }
  131. // Parse grid-template-areas
  132. var DOTS = /^\.+$/;
  133. function track(start, end) {
  134. return { start: start, end: end, span: end - start };
  135. }
  136. function getColumns(line) {
  137. return line.trim().split(/\s+/g);
  138. }
  139. function parseGridAreas(_ref6) {
  140. var rows = _ref6.rows,
  141. gap = _ref6.gap;
  142. return rows.reduce(function (areas, line, rowIndex) {
  143. if (gap.row) rowIndex *= 2;
  144. if (line.trim() === '') return areas;
  145. getColumns(line).forEach(function (area, columnIndex) {
  146. if (DOTS.test(area)) return;
  147. if (gap.column) columnIndex *= 2;
  148. if (typeof areas[area] === 'undefined') {
  149. areas[area] = {
  150. column: track(columnIndex + 1, columnIndex + 2),
  151. row: track(rowIndex + 1, rowIndex + 2)
  152. };
  153. } else {
  154. var _areas$area = areas[area],
  155. column = _areas$area.column,
  156. row = _areas$area.row;
  157. column.start = Math.min(column.start, columnIndex + 1);
  158. column.end = Math.max(column.end, columnIndex + 2);
  159. column.span = column.end - column.start;
  160. row.start = Math.min(row.start, rowIndex + 1);
  161. row.end = Math.max(row.end, rowIndex + 2);
  162. row.span = row.end - row.start;
  163. }
  164. });
  165. return areas;
  166. }, {});
  167. }
  168. // Parse grid-template
  169. function testTrack(node) {
  170. return node.type === 'word' && /^\[.+\]$/.test(node.value);
  171. }
  172. function parseTemplate(_ref7) {
  173. var decl = _ref7.decl,
  174. gap = _ref7.gap;
  175. var gridTemplate = parser(decl.value).nodes.reduce(function (result, node) {
  176. var type = node.type,
  177. value = node.value;
  178. if (testTrack(node) || type === 'space') return result;
  179. // area
  180. if (type === 'string') {
  181. result.areas.push(value);
  182. }
  183. // values and function
  184. if (type === 'word' || type === 'function') {
  185. result[result.key].push(parser.stringify(node));
  186. }
  187. // devider(/)
  188. if (type === 'div' && value === '/') {
  189. result.key = 'columns';
  190. }
  191. return result;
  192. }, {
  193. key: 'rows',
  194. columns: [],
  195. rows: [],
  196. areas: []
  197. });
  198. return {
  199. areas: parseGridAreas({
  200. rows: gridTemplate.areas,
  201. gap: gap
  202. }),
  203. columns: prefixTrackValue({
  204. value: gridTemplate.columns.join(' '),
  205. gap: gap.column
  206. }),
  207. rows: prefixTrackValue({
  208. value: gridTemplate.rows.join(' '),
  209. gap: gap.row
  210. })
  211. };
  212. }
  213. // Insert parsed grid areas
  214. function getMSDecls(area) {
  215. return [].concat({
  216. prop: '-ms-grid-row',
  217. value: String(area.row.start)
  218. }, area.row.span > 1 ? {
  219. prop: '-ms-grid-row-span',
  220. value: String(area.row.span)
  221. } : [], {
  222. prop: '-ms-grid-column',
  223. value: String(area.column.start)
  224. }, area.column.span > 1 ? {
  225. prop: '-ms-grid-column-span',
  226. value: String(area.column.span)
  227. } : []);
  228. }
  229. function getParentMedia(parent) {
  230. if (parent.type === 'atrule' && parent.name === 'media') {
  231. return parent;
  232. } else if (!parent.parent) {
  233. return false;
  234. }
  235. return getParentMedia(parent.parent);
  236. }
  237. function insertAreas(areas, decl, result) {
  238. var missed = Object.keys(areas);
  239. var parentMedia = getParentMedia(decl.parent);
  240. decl.root().walkDecls('grid-area', function (gridArea) {
  241. var value = gridArea.value;
  242. var area = areas[value];
  243. missed = missed.filter(function (e) {
  244. return e !== value;
  245. });
  246. if (area && parentMedia) {
  247. // skip if grid-template-areas already prefixed in media
  248. if (parentMedia.some(function (i) {
  249. return i.selector === gridArea.parent.selector;
  250. })) {
  251. return undefined;
  252. }
  253. // create new rule
  254. var rule = decl.parent.clone({
  255. selector: gridArea.parent.selector
  256. });
  257. rule.removeAll();
  258. // insert prefixed decls in new rule
  259. getMSDecls(area).forEach(function (i) {
  260. return rule.append(Object.assign(i, {
  261. raws: {
  262. between: gridArea.raws.between
  263. }
  264. }));
  265. });
  266. // insert new rule with prefixed decl to existing media
  267. parentMedia.append(rule);
  268. return undefined;
  269. }
  270. if (area) {
  271. gridArea.parent.walkDecls(/-ms-grid-(row|column)/, function (d) {
  272. d.remove();
  273. });
  274. // insert prefixed decls before grid-area
  275. getMSDecls(area).forEach(function (i) {
  276. return gridArea.cloneBefore(i);
  277. });
  278. }
  279. return undefined;
  280. });
  281. if (missed.length > 0) {
  282. decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
  283. }
  284. }
  285. // Gap utils
  286. function getGridGap(decl) {
  287. var gap = {};
  288. // try to find gap
  289. decl.parent.walkDecls(/grid(-(row|column))?-gap/, function (_ref8) {
  290. var prop = _ref8.prop,
  291. value = _ref8.value;
  292. if (prop === 'grid-gap') {
  293. gap.column = value;
  294. gap.row = value;
  295. }
  296. if (prop === 'grid-row-gap') gap.row = value;
  297. if (prop === 'grid-column-gap') gap.column = value;
  298. });
  299. return gap;
  300. }
  301. function warnGridGap(_ref9) {
  302. var gap = _ref9.gap,
  303. hasColumns = _ref9.hasColumns,
  304. decl = _ref9.decl,
  305. result = _ref9.result;
  306. var hasBothGaps = gap.row && gap.column;
  307. if (!hasColumns && (hasBothGaps || gap.column && !gap.row)) {
  308. delete gap.column;
  309. decl.warn(result, 'Can not impliment grid-gap without grid-tamplate-columns');
  310. }
  311. }
  312. module.exports = {
  313. parse: parse,
  314. translate: translate,
  315. parseTemplate: parseTemplate,
  316. parseGridAreas: parseGridAreas,
  317. insertAreas: insertAreas,
  318. insertDecl: insertDecl,
  319. prefixTrackProp: prefixTrackProp,
  320. prefixTrackValue: prefixTrackValue,
  321. getGridGap: getGridGap,
  322. warnGridGap: warnGridGap
  323. };