123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409 |
- 'use strict';
- var parser = require('postcss-value-parser');
- function convert(value) {
- if (value && value.length === 2 && value[0] === 'span' && parseInt(value[1], 10) > 0) {
- return [false, parseInt(value[1], 10)];
- }
- if (value && value.length === 1 && parseInt(value[0], 10) > 0) {
- return [parseInt(value[0], 10), false];
- }
- return [false, false];
- }
- function translate(values, startIndex, endIndex) {
- var startValue = values[startIndex];
- var endValue = values[endIndex];
- if (!startValue) {
- return [false, false];
- }
- var _convert = convert(startValue),
- start = _convert[0],
- spanStart = _convert[1];
- var _convert2 = convert(endValue),
- end = _convert2[0],
- spanEnd = _convert2[1];
- if (start && !endValue) {
- return [start, false];
- }
- if (spanStart && end) {
- return [end - spanStart, spanStart];
- }
- if (start && spanEnd) {
- return [start, spanEnd];
- }
- if (start && end) {
- return [start, end - start];
- }
- return [false, false];
- }
- function parse(decl) {
- var node = parser(decl.value);
- var values = [];
- var current = 0;
- values[current] = [];
- for (var _iterator = node.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
- var _ref;
- if (_isArray) {
- if (_i >= _iterator.length) break;
- _ref = _iterator[_i++];
- } else {
- _i = _iterator.next();
- if (_i.done) break;
- _ref = _i.value;
- }
- var i = _ref;
- if (i.type === 'div') {
- current += 1;
- values[current] = [];
- } else if (i.type === 'word') {
- values[current].push(i.value);
- }
- }
- return values;
- }
- function insertDecl(decl, prop, value) {
- if (value && !decl.parent.some(function (i) {
- return i.prop === '-ms-' + prop;
- })) {
- decl.cloneBefore({
- prop: '-ms-' + prop,
- value: value.toString()
- });
- }
- }
- // Track transforms
- function prefixTrackProp(_ref2) {
- var prop = _ref2.prop,
- prefix = _ref2.prefix;
- return prefix + prop.replace('template-', '');
- }
- function transformRepeat(_ref3, _ref4) {
- var nodes = _ref3.nodes;
- var gap = _ref4.gap;
- var _nodes$reduce = nodes.reduce(function (result, node) {
- if (node.type === 'div' && node.value === ',') {
- result.key = 'size';
- } else {
- result[result.key].push(parser.stringify(node));
- }
- return result;
- }, {
- key: 'count',
- size: [],
- count: []
- }),
- count = _nodes$reduce.count,
- size = _nodes$reduce.size;
- if (gap) {
- var val = [];
- for (var i = 1; i <= count; i++) {
- if (gap && i > 1) {
- val.push(gap);
- }
- val.push(size.join());
- }
- return val.join(' ');
- }
- return '(' + size.join('') + ')[' + count.join('') + ']';
- }
- function prefixTrackValue(_ref5) {
- var value = _ref5.value,
- gap = _ref5.gap;
- var result = parser(value).nodes.reduce(function (nodes, node) {
- if (node.type === 'function' && node.value === 'repeat') {
- return nodes.concat({
- type: 'word',
- value: transformRepeat(node, { gap: gap })
- });
- }
- if (gap && node.type === 'space') {
- return nodes.concat({
- type: 'space',
- value: ' '
- }, {
- type: 'word',
- value: gap
- }, node);
- }
- return nodes.concat(node);
- }, []);
- return parser.stringify(result);
- }
- // Parse grid-template-areas
- var DOTS = /^\.+$/;
- function track(start, end) {
- return { start: start, end: end, span: end - start };
- }
- function getColumns(line) {
- return line.trim().split(/\s+/g);
- }
- function parseGridAreas(_ref6) {
- var rows = _ref6.rows,
- gap = _ref6.gap;
- return rows.reduce(function (areas, line, rowIndex) {
- if (gap.row) rowIndex *= 2;
- if (line.trim() === '') return areas;
- getColumns(line).forEach(function (area, columnIndex) {
- if (DOTS.test(area)) return;
- if (gap.column) columnIndex *= 2;
- if (typeof areas[area] === 'undefined') {
- areas[area] = {
- column: track(columnIndex + 1, columnIndex + 2),
- row: track(rowIndex + 1, rowIndex + 2)
- };
- } else {
- var _areas$area = areas[area],
- column = _areas$area.column,
- row = _areas$area.row;
- column.start = Math.min(column.start, columnIndex + 1);
- column.end = Math.max(column.end, columnIndex + 2);
- column.span = column.end - column.start;
- row.start = Math.min(row.start, rowIndex + 1);
- row.end = Math.max(row.end, rowIndex + 2);
- row.span = row.end - row.start;
- }
- });
- return areas;
- }, {});
- }
- // Parse grid-template
- function testTrack(node) {
- return node.type === 'word' && /^\[.+\]$/.test(node.value);
- }
- function parseTemplate(_ref7) {
- var decl = _ref7.decl,
- gap = _ref7.gap;
- var gridTemplate = parser(decl.value).nodes.reduce(function (result, node) {
- var type = node.type,
- value = node.value;
- if (testTrack(node) || type === 'space') return result;
- // area
- if (type === 'string') {
- result.areas.push(value);
- }
- // values and function
- if (type === 'word' || type === 'function') {
- result[result.key].push(parser.stringify(node));
- }
- // devider(/)
- if (type === 'div' && value === '/') {
- result.key = 'columns';
- }
- return result;
- }, {
- key: 'rows',
- columns: [],
- rows: [],
- areas: []
- });
- return {
- areas: parseGridAreas({
- rows: gridTemplate.areas,
- gap: gap
- }),
- columns: prefixTrackValue({
- value: gridTemplate.columns.join(' '),
- gap: gap.column
- }),
- rows: prefixTrackValue({
- value: gridTemplate.rows.join(' '),
- gap: gap.row
- })
- };
- }
- // Insert parsed grid areas
- function getMSDecls(area) {
- return [].concat({
- prop: '-ms-grid-row',
- value: String(area.row.start)
- }, area.row.span > 1 ? {
- prop: '-ms-grid-row-span',
- value: String(area.row.span)
- } : [], {
- prop: '-ms-grid-column',
- value: String(area.column.start)
- }, area.column.span > 1 ? {
- prop: '-ms-grid-column-span',
- value: String(area.column.span)
- } : []);
- }
- function getParentMedia(parent) {
- if (parent.type === 'atrule' && parent.name === 'media') {
- return parent;
- } else if (!parent.parent) {
- return false;
- }
- return getParentMedia(parent.parent);
- }
- function insertAreas(areas, decl, result) {
- var missed = Object.keys(areas);
- var parentMedia = getParentMedia(decl.parent);
- decl.root().walkDecls('grid-area', function (gridArea) {
- var value = gridArea.value;
- var area = areas[value];
- missed = missed.filter(function (e) {
- return e !== value;
- });
- if (area && parentMedia) {
- // skip if grid-template-areas already prefixed in media
- if (parentMedia.some(function (i) {
- return i.selector === gridArea.parent.selector;
- })) {
- return undefined;
- }
- // create new rule
- var rule = decl.parent.clone({
- selector: gridArea.parent.selector
- });
- rule.removeAll();
- // insert prefixed decls in new rule
- getMSDecls(area).forEach(function (i) {
- return rule.append(Object.assign(i, {
- raws: {
- between: gridArea.raws.between
- }
- }));
- });
- // insert new rule with prefixed decl to existing media
- parentMedia.append(rule);
- return undefined;
- }
- if (area) {
- gridArea.parent.walkDecls(/-ms-grid-(row|column)/, function (d) {
- d.remove();
- });
- // insert prefixed decls before grid-area
- getMSDecls(area).forEach(function (i) {
- return gridArea.cloneBefore(i);
- });
- }
- return undefined;
- });
- if (missed.length > 0) {
- decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
- }
- }
- // Gap utils
- function getGridGap(decl) {
- var gap = {};
- // try to find gap
- decl.parent.walkDecls(/grid(-(row|column))?-gap/, function (_ref8) {
- var prop = _ref8.prop,
- value = _ref8.value;
- if (prop === 'grid-gap') {
- gap.column = value;
- gap.row = value;
- }
- if (prop === 'grid-row-gap') gap.row = value;
- if (prop === 'grid-column-gap') gap.column = value;
- });
- return gap;
- }
- function warnGridGap(_ref9) {
- var gap = _ref9.gap,
- hasColumns = _ref9.hasColumns,
- decl = _ref9.decl,
- result = _ref9.result;
- var hasBothGaps = gap.row && gap.column;
- if (!hasColumns && (hasBothGaps || gap.column && !gap.row)) {
- delete gap.column;
- decl.warn(result, 'Can not impliment grid-gap without grid-tamplate-columns');
- }
- }
- module.exports = {
- parse: parse,
- translate: translate,
- parseTemplate: parseTemplate,
- parseGridAreas: parseGridAreas,
- insertAreas: insertAreas,
- insertDecl: insertDecl,
- prefixTrackProp: prefixTrackProp,
- prefixTrackValue: prefixTrackValue,
- getGridGap: getGridGap,
- warnGridGap: warnGridGap
- };
|