You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.0 KiB
125 lines
3.0 KiB
let Declaration = require('../declaration') |
|
let { |
|
prefixTrackProp, |
|
prefixTrackValue, |
|
autoplaceGridItems, |
|
getGridGap, |
|
inheritGridGap |
|
} = require('./grid-utils') |
|
let Processor = require('../processor') |
|
|
|
class GridRowsColumns extends Declaration { |
|
/** |
|
* Change property name for IE |
|
*/ |
|
prefixed(prop, prefix) { |
|
if (prefix === '-ms-') { |
|
return prefixTrackProp({ prop, prefix }) |
|
} |
|
return super.prefixed(prop, prefix) |
|
} |
|
|
|
/** |
|
* Change IE property back |
|
*/ |
|
normalize(prop) { |
|
return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1') |
|
} |
|
|
|
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' |
|
) |
|
|
|
/** |
|
* Not to prefix rows declaration if grid-template(-areas) is present |
|
*/ |
|
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({ |
|
value, |
|
gap: gapValue |
|
}) |
|
|
|
/** |
|
* Insert prefixes |
|
*/ |
|
decl.cloneBefore({ |
|
prop: prefixTrackProp({ prop, prefix }), |
|
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') { |
|
/** |
|
* Show warning if grid-template-rows decl is not found |
|
*/ |
|
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 |
|
} |
|
|
|
/** |
|
* Show warning if grid-template-columns decl is not found |
|
*/ |
|
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' |
|
) |
|
} |
|
|
|
/** |
|
* Autoplace grid items |
|
*/ |
|
if (isColumnProp && !hasGridTemplate) { |
|
autoplaceGridItems(decl, result, gap, autoflowValue) |
|
} |
|
} |
|
|
|
return undefined |
|
} |
|
} |
|
|
|
GridRowsColumns.names = [ |
|
'grid-template-rows', |
|
'grid-template-columns', |
|
'grid-rows', |
|
'grid-columns' |
|
] |
|
|
|
module.exports = GridRowsColumns
|
|
|