| | let Declaration = require('../declaration') |
| | let Processor = require('../processor') |
| | let { |
| | autoplaceGridItems, |
| | getGridGap, |
| | inheritGridGap, |
| | prefixTrackProp, |
| | prefixTrackValue |
| | } = require('./grid-utils') |
| |
|
| | class GridRowsColumns extends Declaration { |
| | insert(decl, prefix, prefixes, result) { |
| | if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes) |
| |
|
| | let { parent, prop, value } = decl |
| | let isRowProp = prop.includes('rows') |
| | let isColumnProp = prop.includes('columns') |
| |
|
| | let hasGridTemplate = parent.some( |
| | i => i.prop === 'grid-template' || i.prop === 'grid-template-areas' |
| | ) |
| |
|
| | |
| | |
| | |
| | if (hasGridTemplate && isRowProp) { |
| | return false |
| | } |
| |
|
| | let processor = new Processor({ options: {} }) |
| | let status = processor.gridStatus(parent, result) |
| | let gap = getGridGap(decl) |
| | gap = inheritGridGap(decl, gap) || gap |
| |
|
| | let gapValue = isRowProp ? gap.row : gap.column |
| |
|
| | if ((status === 'no-autoplace' || status === true) && !hasGridTemplate) { |
| | gapValue = null |
| | } |
| |
|
| | let prefixValue = prefixTrackValue({ |
| | gap: gapValue, |
| | value |
| | }) |
| |
|
| | |
| | |
| | |
| | decl.cloneBefore({ |
| | prop: prefixTrackProp({ prefix, prop }), |
| | value: prefixValue |
| | }) |
| |
|
| | let autoflow = parent.nodes.find(i => i.prop === 'grid-auto-flow') |
| | let autoflowValue = 'row' |
| |
|
| | if (autoflow && !processor.disabled(autoflow, result)) { |
| | autoflowValue = autoflow.value.trim() |
| | } |
| | if (status === 'autoplace') { |
| | |
| | |
| | |
| | let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows') |
| |
|
| | if (!rowDecl && hasGridTemplate) { |
| | return undefined |
| | } else if (!rowDecl && !hasGridTemplate) { |
| | decl.warn( |
| | result, |
| | 'Autoplacement does not work without grid-template-rows property' |
| | ) |
| | return undefined |
| | } |
| |
|
| | |
| | |
| | |
| | let columnDecl = parent.nodes.find(i => { |
| | return i.prop === 'grid-template-columns' |
| | }) |
| | if (!columnDecl && !hasGridTemplate) { |
| | decl.warn( |
| | result, |
| | 'Autoplacement does not work without grid-template-columns property' |
| | ) |
| | } |
| |
|
| | |
| | |
| | |
| | if (isColumnProp && !hasGridTemplate) { |
| | autoplaceGridItems(decl, result, gap, autoflowValue) |
| | } |
| | } |
| |
|
| | return undefined |
| | } |
| |
|
| | |
| | |
| | |
| | normalize(prop) { |
| | return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1') |
| | } |
| |
|
| | |
| | |
| | |
| | prefixed(prop, prefix) { |
| | if (prefix === '-ms-') { |
| | return prefixTrackProp({ prefix, prop }) |
| | } |
| | return super.prefixed(prop, prefix) |
| | } |
| | } |
| |
|
| | GridRowsColumns.names = [ |
| | 'grid-template-rows', |
| | 'grid-template-columns', |
| | 'grid-rows', |
| | 'grid-columns' |
| | ] |
| |
|
| | module.exports = GridRowsColumns |
| |
|