126 lines
3.0 KiB
JavaScript
126 lines
3.0 KiB
JavaScript
|
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
|