1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123 |
- "use strict";
- function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
- var parser = require('postcss-value-parser');
- var list = require('postcss').list;
- var uniq = require('../utils').uniq;
- var escapeRegexp = require('../utils').escapeRegexp;
- var splitSelector = require('../utils').splitSelector;
- 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 = _createForOfIteratorHelperLoose(node.nodes), _step; !(_step = _iterator()).done;) {
- var i = _step.value;
- 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(_ref) {
- var prop = _ref.prop,
- prefix = _ref.prefix;
- return prefix + prop.replace('template-', '');
- }
- function transformRepeat(_ref2, _ref3) {
- var nodes = _ref2.nodes;
- var gap = _ref3.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; // insert gap values
- if (gap) {
- var _ret = function () {
- size = size.filter(function (i) {
- return i.trim();
- });
- var val = [];
- var _loop = function _loop(i) {
- size.forEach(function (item, index) {
- if (index > 0 || i > 1) {
- val.push(gap);
- }
- val.push(item);
- });
- };
- for (var i = 1; i <= count; i++) {
- _loop(i);
- }
- return {
- v: val.join(' ')
- };
- }();
- if (typeof _ret === "object") return _ret.v;
- }
- return "(" + size.join('') + ")[" + count.join('') + "]";
- }
- function prefixTrackValue(_ref4) {
- var value = _ref4.value,
- gap = _ref4.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(_ref5) {
- var rows = _ref5.rows,
- gap = _ref5.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 verifyRowSize(result) {
- if (result.areas.length > result.rows.length) {
- result.rows.push('auto');
- }
- return result;
- }
- function parseTemplate(_ref6) {
- var decl = _ref6.decl,
- gap = _ref6.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 = verifyRowSize(result);
- result.areas.push(value);
- } // values and function
- if (type === 'word' || type === 'function') {
- result[result.key].push(parser.stringify(node));
- } // divider(/)
- if (type === 'div' && value === '/') {
- result.key = 'columns';
- result = verifyRowSize(result);
- }
- 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
- /**
- * Get an array of -ms- prefixed props and values
- * @param {Object} [area] area object with column and row data
- * @param {Boolean} [addRowSpan] should we add grid-column-row value?
- * @param {Boolean} [addColumnSpan] should we add grid-column-span value?
- * @return {Array<Object>}
- */
- function getMSDecls(area, addRowSpan, addColumnSpan) {
- if (addRowSpan === void 0) {
- addRowSpan = false;
- }
- if (addColumnSpan === void 0) {
- addColumnSpan = false;
- }
- return [].concat({
- prop: '-ms-grid-row',
- value: String(area.row.start)
- }, area.row.span > 1 || addRowSpan ? {
- prop: '-ms-grid-row-span',
- value: String(area.row.span)
- } : [], {
- prop: '-ms-grid-column',
- value: String(area.column.start)
- }, area.column.span > 1 || addColumnSpan ? {
- prop: '-ms-grid-column-span',
- value: String(area.column.span)
- } : []);
- }
- function getParentMedia(parent) {
- if (parent.type === 'atrule' && parent.name === 'media') {
- return parent;
- }
- if (!parent.parent) {
- return false;
- }
- return getParentMedia(parent.parent);
- }
- /**
- * change selectors for rules with duplicate grid-areas.
- * @param {Array<Rule>} rules
- * @param {Array<String>} templateSelectors
- * @return {Array<Rule>} rules with changed selectors
- */
- function changeDuplicateAreaSelectors(ruleSelectors, templateSelectors) {
- ruleSelectors = ruleSelectors.map(function (selector) {
- var selectorBySpace = list.space(selector);
- var selectorByComma = list.comma(selector);
- if (selectorBySpace.length > selectorByComma.length) {
- selector = selectorBySpace.slice(-1).join('');
- }
- return selector;
- });
- return ruleSelectors.map(function (ruleSelector) {
- var newSelector = templateSelectors.map(function (tplSelector, index) {
- var space = index === 0 ? '' : ' ';
- return "" + space + tplSelector + " > " + ruleSelector;
- });
- return newSelector;
- });
- }
- /**
- * check if selector of rules are equal
- * @param {Rule} ruleA
- * @param {Rule} ruleB
- * @return {Boolean}
- */
- function selectorsEqual(ruleA, ruleB) {
- return ruleA.selectors.some(function (sel) {
- return ruleB.selectors.some(function (s) {
- return s === sel;
- });
- });
- }
- /**
- * Parse data from all grid-template(-areas) declarations
- * @param {Root} css css root
- * @return {Object} parsed data
- */
- function parseGridTemplatesData(css) {
- var parsed = []; // we walk through every grid-template(-areas) declaration and store
- // data with the same area names inside the item
- css.walkDecls(/grid-template(-areas)?$/, function (d) {
- var rule = d.parent;
- var media = getParentMedia(rule);
- var gap = getGridGap(d);
- var inheritedGap = inheritGridGap(d, gap);
- var _parseTemplate = parseTemplate({
- decl: d,
- gap: inheritedGap || gap
- }),
- areas = _parseTemplate.areas;
- var areaNames = Object.keys(areas); // skip node if it doesn't have areas
- if (areaNames.length === 0) {
- return true;
- } // check parsed array for item that include the same area names
- // return index of that item
- var index = parsed.reduce(function (acc, _ref7, idx) {
- var allAreas = _ref7.allAreas;
- var hasAreas = allAreas && areaNames.some(function (area) {
- return allAreas.includes(area);
- });
- return hasAreas ? idx : acc;
- }, null);
- if (index !== null) {
- // index is found, add the grid-template data to that item
- var _parsed$index = parsed[index],
- allAreas = _parsed$index.allAreas,
- rules = _parsed$index.rules; // check if rule has no duplicate area names
- var hasNoDuplicates = rules.some(function (r) {
- return r.hasDuplicates === false && selectorsEqual(r, rule);
- });
- var duplicatesFound = false; // check need to gather all duplicate area names
- var duplicateAreaNames = rules.reduce(function (acc, r) {
- if (!r.params && selectorsEqual(r, rule)) {
- duplicatesFound = true;
- return r.duplicateAreaNames;
- }
- if (!duplicatesFound) {
- areaNames.forEach(function (name) {
- if (r.areas[name]) {
- acc.push(name);
- }
- });
- }
- return uniq(acc);
- }, []); // update grid-row/column-span values for areas with duplicate
- // area names. @see #1084 and #1146
- rules.forEach(function (r) {
- areaNames.forEach(function (name) {
- var area = r.areas[name];
- if (area && area.row.span !== areas[name].row.span) {
- areas[name].row.updateSpan = true;
- }
- if (area && area.column.span !== areas[name].column.span) {
- areas[name].column.updateSpan = true;
- }
- });
- });
- parsed[index].allAreas = uniq([].concat(allAreas, areaNames));
- parsed[index].rules.push({
- hasDuplicates: !hasNoDuplicates,
- params: media.params,
- selectors: rule.selectors,
- node: rule,
- duplicateAreaNames: duplicateAreaNames,
- areas: areas
- });
- } else {
- // index is NOT found, push the new item to the parsed array
- parsed.push({
- allAreas: areaNames,
- areasCount: 0,
- rules: [{
- hasDuplicates: false,
- duplicateRules: [],
- params: media.params,
- selectors: rule.selectors,
- node: rule,
- duplicateAreaNames: [],
- areas: areas
- }]
- });
- }
- return undefined;
- });
- return parsed;
- }
- /**
- * insert prefixed grid-area declarations
- * @param {Root} css css root
- * @param {Function} isDisabled check if the rule is disabled
- * @return {void}
- */
- function insertAreas(css, isDisabled) {
- // parse grid-template declarations
- var gridTemplatesData = parseGridTemplatesData(css); // return undefined if no declarations found
- if (gridTemplatesData.length === 0) {
- return undefined;
- } // we need to store the rules that we will insert later
- var rulesToInsert = {};
- css.walkDecls('grid-area', function (gridArea) {
- var gridAreaRule = gridArea.parent;
- var hasPrefixedRow = gridAreaRule.first.prop === '-ms-grid-row';
- var gridAreaMedia = getParentMedia(gridAreaRule);
- if (isDisabled(gridArea)) {
- return undefined;
- }
- var gridAreaRuleIndex = gridAreaMedia ? css.index(gridAreaMedia) : css.index(gridAreaRule);
- var value = gridArea.value; // found the data that matches grid-area identifier
- var data = gridTemplatesData.filter(function (d) {
- return d.allAreas.includes(value);
- })[0];
- if (!data) {
- return true;
- }
- var lastArea = data.allAreas[data.allAreas.length - 1];
- var selectorBySpace = list.space(gridAreaRule.selector);
- var selectorByComma = list.comma(gridAreaRule.selector);
- var selectorIsComplex = selectorBySpace.length > 1 && selectorBySpace.length > selectorByComma.length; // prevent doubling of prefixes
- if (hasPrefixedRow) {
- return false;
- } // create the empty object with the key as the last area name
- // e.g if we have templates with "a b c" values, "c" will be the last area
- if (!rulesToInsert[lastArea]) {
- rulesToInsert[lastArea] = {};
- }
- var lastRuleIsSet = false; // walk through every grid-template rule data
- for (var _iterator2 = _createForOfIteratorHelperLoose(data.rules), _step2; !(_step2 = _iterator2()).done;) {
- var rule = _step2.value;
- var area = rule.areas[value];
- var hasDuplicateName = rule.duplicateAreaNames.includes(value); // if we can't find the area name, update lastRule and continue
- if (!area) {
- var lastRuleIndex = css.index(rulesToInsert[lastArea].lastRule);
- if (gridAreaRuleIndex > lastRuleIndex) {
- rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
- }
- continue;
- } // for grid-templates inside media rule we need to create empty
- // array to push prefixed grid-area rules later
- if (rule.params && !rulesToInsert[lastArea][rule.params]) {
- rulesToInsert[lastArea][rule.params] = [];
- }
- if ((!rule.hasDuplicates || !hasDuplicateName) && !rule.params) {
- // grid-template has no duplicates and not inside media rule
- getMSDecls(area, false, false).reverse().forEach(function (i) {
- return gridAreaRule.prepend(Object.assign(i, {
- raws: {
- between: gridArea.raws.between
- }
- }));
- });
- rulesToInsert[lastArea].lastRule = gridAreaRule;
- lastRuleIsSet = true;
- } else if (rule.hasDuplicates && !rule.params && !selectorIsComplex) {
- (function () {
- // grid-template has duplicates and not inside media rule
- var cloned = gridAreaRule.clone();
- cloned.removeAll();
- getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
- return cloned.prepend(Object.assign(i, {
- raws: {
- between: gridArea.raws.between
- }
- }));
- });
- cloned.selectors = changeDuplicateAreaSelectors(cloned.selectors, rule.selectors);
- if (rulesToInsert[lastArea].lastRule) {
- rulesToInsert[lastArea].lastRule.after(cloned);
- }
- rulesToInsert[lastArea].lastRule = cloned;
- lastRuleIsSet = true;
- })();
- } else if (rule.hasDuplicates && !rule.params && selectorIsComplex && gridAreaRule.selector.includes(rule.selectors[0])) {
- // grid-template has duplicates and not inside media rule
- // and the selector is complex
- gridAreaRule.walkDecls(/-ms-grid-(row|column)/, function (d) {
- return d.remove();
- });
- getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
- return gridAreaRule.prepend(Object.assign(i, {
- raws: {
- between: gridArea.raws.between
- }
- }));
- });
- } else if (rule.params) {
- (function () {
- // grid-template is inside media rule
- // if we're inside media rule, we need to store prefixed rules
- // inside rulesToInsert object to be able to preserve the order of media
- // rules and merge them easily
- var cloned = gridAreaRule.clone();
- cloned.removeAll();
- getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
- return cloned.prepend(Object.assign(i, {
- raws: {
- between: gridArea.raws.between
- }
- }));
- });
- if (rule.hasDuplicates && hasDuplicateName) {
- cloned.selectors = changeDuplicateAreaSelectors(cloned.selectors, rule.selectors);
- }
- cloned.raws = rule.node.raws;
- if (css.index(rule.node.parent) > gridAreaRuleIndex) {
- // append the prefixed rules right inside media rule
- // with grid-template
- rule.node.parent.append(cloned);
- } else {
- // store the rule to insert later
- rulesToInsert[lastArea][rule.params].push(cloned);
- } // set new rule as last rule ONLY if we didn't set lastRule for
- // this grid-area before
- if (!lastRuleIsSet) {
- rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
- }
- })();
- }
- }
- return undefined;
- }); // append stored rules inside the media rules
- Object.keys(rulesToInsert).forEach(function (area) {
- var data = rulesToInsert[area];
- var lastRule = data.lastRule;
- Object.keys(data).reverse().filter(function (p) {
- return p !== 'lastRule';
- }).forEach(function (params) {
- if (data[params].length > 0 && lastRule) {
- lastRule.after({
- name: 'media',
- params: params
- });
- lastRule.next().append(data[params]);
- }
- });
- });
- return undefined;
- }
- /**
- * Warn user if grid area identifiers are not found
- * @param {Object} areas
- * @param {Declaration} decl
- * @param {Result} result
- * @return {void}
- */
- function warnMissedAreas(areas, decl, result) {
- var missed = Object.keys(areas);
- decl.root().walkDecls('grid-area', function (gridArea) {
- missed = missed.filter(function (e) {
- return e !== gridArea.value;
- });
- });
- if (missed.length > 0) {
- decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
- }
- return undefined;
- }
- /**
- * compare selectors with grid-area rule and grid-template rule
- * show warning if grid-template selector is not found
- * (this function used for grid-area rule)
- * @param {Declaration} decl
- * @param {Result} result
- * @return {void}
- */
- function warnTemplateSelectorNotFound(decl, result) {
- var rule = decl.parent;
- var root = decl.root();
- var duplicatesFound = false; // slice selector array. Remove the last part (for comparison)
- var slicedSelectorArr = list.space(rule.selector).filter(function (str) {
- return str !== '>';
- }).slice(0, -1); // we need to compare only if selector is complex.
- // e.g '.grid-cell' is simple, but '.parent > .grid-cell' is complex
- if (slicedSelectorArr.length > 0) {
- var gridTemplateFound = false;
- var foundAreaSelector = null;
- root.walkDecls(/grid-template(-areas)?$/, function (d) {
- var parent = d.parent;
- var templateSelectors = parent.selectors;
- var _parseTemplate2 = parseTemplate({
- decl: d,
- gap: getGridGap(d)
- }),
- areas = _parseTemplate2.areas;
- var hasArea = areas[decl.value]; // find the the matching selectors
- for (var _iterator3 = _createForOfIteratorHelperLoose(templateSelectors), _step3; !(_step3 = _iterator3()).done;) {
- var tplSelector = _step3.value;
- if (gridTemplateFound) {
- break;
- }
- var tplSelectorArr = list.space(tplSelector).filter(function (str) {
- return str !== '>';
- });
- gridTemplateFound = tplSelectorArr.every(function (item, idx) {
- return item === slicedSelectorArr[idx];
- });
- }
- if (gridTemplateFound || !hasArea) {
- return true;
- }
- if (!foundAreaSelector) {
- foundAreaSelector = parent.selector;
- } // if we found the duplicate area with different selector
- if (foundAreaSelector && foundAreaSelector !== parent.selector) {
- duplicatesFound = true;
- }
- return undefined;
- }); // warn user if we didn't find template
- if (!gridTemplateFound && duplicatesFound) {
- decl.warn(result, 'Autoprefixer cannot find a grid-template ' + ("containing the duplicate grid-area \"" + decl.value + "\" ") + ("with full selector matching: " + slicedSelectorArr.join(' ')));
- }
- }
- }
- /**
- * warn user if both grid-area and grid-(row|column)
- * declarations are present in the same rule
- * @param {Declaration} decl
- * @param {Result} result
- * @return {void}
- */
- function warnIfGridRowColumnExists(decl, result) {
- var rule = decl.parent;
- var decls = [];
- rule.walkDecls(/^grid-(row|column)/, function (d) {
- if (!d.prop.endsWith('-end') && !d.value.startsWith('span')) {
- decls.push(d);
- }
- });
- if (decls.length > 0) {
- decls.forEach(function (d) {
- d.warn(result, 'You already have a grid-area declaration present in the rule. ' + ("You should use either grid-area or " + d.prop + ", not both"));
- });
- }
- return undefined;
- } // Gap utils
- function getGridGap(decl) {
- var gap = {}; // try to find gap
- var testGap = /^(grid-)?((row|column)-)?gap$/;
- decl.parent.walkDecls(testGap, function (_ref8) {
- var prop = _ref8.prop,
- value = _ref8.value;
- if (/^(grid-)?gap$/.test(prop)) {
- var _parser$nodes = parser(value).nodes,
- row = _parser$nodes[0],
- column = _parser$nodes[2];
- gap.row = row && parser.stringify(row);
- gap.column = column ? parser.stringify(column) : gap.row;
- }
- if (/^(grid-)?row-gap$/.test(prop)) gap.row = value;
- if (/^(grid-)?column-gap$/.test(prop)) gap.column = value;
- });
- return gap;
- }
- /**
- * parse media parameters (for example 'min-width: 500px')
- * @param {String} params parameter to parse
- * @return {}
- */
- function parseMediaParams(params) {
- if (!params) {
- return false;
- }
- var parsed = parser(params);
- var prop;
- var value;
- parsed.walk(function (node) {
- if (node.type === 'word' && /min|max/g.test(node.value)) {
- prop = node.value;
- } else if (node.value.includes('px')) {
- value = parseInt(node.value.replace(/\D/g, ''));
- }
- });
- return [prop, value];
- }
- /**
- * Compare the selectors and decide if we
- * need to inherit gap from compared selector or not.
- * @type {String} selA
- * @type {String} selB
- * @return {Boolean}
- */
- function shouldInheritGap(selA, selB) {
- var result; // get arrays of selector split in 3-deep array
- var splitSelectorArrA = splitSelector(selA);
- var splitSelectorArrB = splitSelector(selB);
- if (splitSelectorArrA[0].length < splitSelectorArrB[0].length) {
- // abort if selectorA has lower descendant specificity then selectorB
- // (e.g '.grid' and '.hello .world .grid')
- return false;
- } else if (splitSelectorArrA[0].length > splitSelectorArrB[0].length) {
- // if selectorA has higher descendant specificity then selectorB
- // (e.g '.foo .bar .grid' and '.grid')
- var idx = splitSelectorArrA[0].reduce(function (res, _ref9, index) {
- var item = _ref9[0];
- var firstSelectorPart = splitSelectorArrB[0][0][0];
- if (item === firstSelectorPart) {
- return index;
- }
- return false;
- }, false);
- if (idx) {
- result = splitSelectorArrB[0].every(function (arr, index) {
- return arr.every(function (part, innerIndex) {
- return (// because selectorA has more space elements, we need to slice
- // selectorA array by 'idx' number to compare them
- splitSelectorArrA[0].slice(idx)[index][innerIndex] === part
- );
- });
- });
- }
- } else {
- // if selectorA has the same descendant specificity as selectorB
- // this condition covers cases such as: '.grid.foo.bar' and '.grid'
- result = splitSelectorArrB.some(function (byCommaArr) {
- return byCommaArr.every(function (bySpaceArr, index) {
- return bySpaceArr.every(function (part, innerIndex) {
- return splitSelectorArrA[0][index][innerIndex] === part;
- });
- });
- });
- }
- return result;
- }
- /**
- * inherit grid gap values from the closest rule above
- * with the same selector
- * @param {Declaration} decl
- * @param {Object} gap gap values
- * @return {Object | Boolean} return gap values or false (if not found)
- */
- function inheritGridGap(decl, gap) {
- var rule = decl.parent;
- var mediaRule = getParentMedia(rule);
- var root = rule.root(); // get an array of selector split in 3-deep array
- var splitSelectorArr = splitSelector(rule.selector); // abort if the rule already has gaps
- if (Object.keys(gap).length > 0) {
- return false;
- } // e.g ['min-width']
- var _parseMediaParams = parseMediaParams(mediaRule.params),
- prop = _parseMediaParams[0];
- var lastBySpace = splitSelectorArr[0]; // get escaped value from the selector
- // if we have '.grid-2.foo.bar' selector, will be '\.grid\-2'
- var escaped = escapeRegexp(lastBySpace[lastBySpace.length - 1][0]);
- var regexp = new RegExp("(" + escaped + "$)|(" + escaped + "[,.])"); // find the closest rule with the same selector
- var closestRuleGap;
- root.walkRules(regexp, function (r) {
- var gridGap; // abort if are checking the same rule
- if (rule.toString() === r.toString()) {
- return false;
- } // find grid-gap values
- r.walkDecls('grid-gap', function (d) {
- return gridGap = getGridGap(d);
- }); // skip rule without gaps
- if (!gridGap || Object.keys(gridGap).length === 0) {
- return true;
- } // skip rules that should not be inherited from
- if (!shouldInheritGap(rule.selector, r.selector)) {
- return true;
- }
- var media = getParentMedia(r);
- if (media) {
- // if we are inside media, we need to check that media props match
- // e.g ('min-width' === 'min-width')
- var propToCompare = parseMediaParams(media.params)[0];
- if (propToCompare === prop) {
- closestRuleGap = gridGap;
- return true;
- }
- } else {
- closestRuleGap = gridGap;
- return true;
- }
- return undefined;
- }); // if we find the closest gap object
- if (closestRuleGap && Object.keys(closestRuleGap).length > 0) {
- return closestRuleGap;
- }
- return false;
- }
- function warnGridGap(_ref10) {
- var gap = _ref10.gap,
- hasColumns = _ref10.hasColumns,
- decl = _ref10.decl,
- result = _ref10.result;
- var hasBothGaps = gap.row && gap.column;
- if (!hasColumns && (hasBothGaps || gap.column && !gap.row)) {
- delete gap.column;
- decl.warn(result, 'Can not implement grid-gap without grid-template-columns');
- }
- }
- /**
- * normalize the grid-template-rows/columns values
- * @param {String} str grid-template-rows/columns value
- * @return {Array} normalized array with values
- * @example
- * let normalized = normalizeRowColumn('1fr repeat(2, 20px 50px) 1fr')
- * normalized // <= ['1fr', '20px', '50px', '20px', '50px', '1fr']
- */
- function normalizeRowColumn(str) {
- var normalized = parser(str).nodes.reduce(function (result, node) {
- if (node.type === 'function' && node.value === 'repeat') {
- var key = 'count';
- var _node$nodes$reduce = node.nodes.reduce(function (acc, n) {
- if (n.type === 'word' && key === 'count') {
- acc[0] = Math.abs(parseInt(n.value));
- return acc;
- }
- if (n.type === 'div' && n.value === ',') {
- key = 'value';
- return acc;
- }
- if (key === 'value') {
- acc[1] += parser.stringify(n);
- }
- return acc;
- }, [0, '']),
- count = _node$nodes$reduce[0],
- value = _node$nodes$reduce[1];
- if (count) {
- for (var i = 0; i < count; i++) {
- result.push(value);
- }
- }
- return result;
- }
- if (node.type === 'space') {
- return result;
- }
- return result.concat(parser.stringify(node));
- }, []);
- return normalized;
- }
- /**
- * Autoplace grid items
- * @param {Declaration} decl
- * @param {Result} result
- * @param {Object} gap gap values
- * @param {String} autoflowValue grid-auto-flow value
- * @return {void}
- * @see https://github.com/postcss/autoprefixer/issues/1148
- */
- function autoplaceGridItems(decl, result, gap, autoflowValue) {
- if (autoflowValue === void 0) {
- autoflowValue = 'row';
- }
- var parent = decl.parent;
- var rowDecl = parent.nodes.find(function (i) {
- return i.prop === 'grid-template-rows';
- });
- var rows = normalizeRowColumn(rowDecl.value);
- var columns = normalizeRowColumn(decl.value); // Build array of area names with dummy values. If we have 3 columns and
- // 2 rows, filledRows will be equal to ['1 2 3', '4 5 6']
- var filledRows = rows.map(function (_, rowIndex) {
- return Array.from({
- length: columns.length
- }, function (v, k) {
- return k + rowIndex * columns.length + 1;
- }).join(' ');
- });
- var areas = parseGridAreas({
- rows: filledRows,
- gap: gap
- });
- var keys = Object.keys(areas);
- var items = keys.map(function (i) {
- return areas[i];
- }); // Change the order of cells if grid-auto-flow value is 'column'
- if (autoflowValue.includes('column')) {
- items = items.sort(function (a, b) {
- return a.column.start - b.column.start;
- });
- } // Insert new rules
- items.reverse().forEach(function (item, index) {
- var column = item.column,
- row = item.row;
- var nodeSelector = parent.selectors.map(function (sel) {
- return sel + (" > *:nth-child(" + (keys.length - index) + ")");
- }).join(', '); // create new rule
- var node = parent.clone().removeAll(); // change rule selector
- node.selector = nodeSelector; // insert prefixed row/column values
- node.append({
- prop: '-ms-grid-row',
- value: row.start
- });
- node.append({
- prop: '-ms-grid-column',
- value: column.start
- }); // insert rule
- parent.after(node);
- });
- return undefined;
- }
- module.exports = {
- parse: parse,
- translate: translate,
- parseTemplate: parseTemplate,
- parseGridAreas: parseGridAreas,
- warnMissedAreas: warnMissedAreas,
- insertAreas: insertAreas,
- insertDecl: insertDecl,
- prefixTrackProp: prefixTrackProp,
- prefixTrackValue: prefixTrackValue,
- getGridGap: getGridGap,
- warnGridGap: warnGridGap,
- warnTemplateSelectorNotFound: warnTemplateSelectorNotFound,
- warnIfGridRowColumnExists: warnIfGridRowColumnExists,
- inheritGridGap: inheritGridGap,
- autoplaceGridItems: autoplaceGridItems
- };
|