123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- 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
|