grid-rows-columns.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. let Declaration = require('../declaration')
  2. let {
  3. prefixTrackProp,
  4. prefixTrackValue,
  5. autoplaceGridItems,
  6. getGridGap,
  7. inheritGridGap
  8. } = require('./grid-utils')
  9. let Processor = require('../processor')
  10. class GridRowsColumns extends Declaration {
  11. /**
  12. * Change property name for IE
  13. */
  14. prefixed(prop, prefix) {
  15. if (prefix === '-ms-') {
  16. return prefixTrackProp({ prop, prefix })
  17. }
  18. return super.prefixed(prop, prefix)
  19. }
  20. /**
  21. * Change IE property back
  22. */
  23. normalize(prop) {
  24. return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1')
  25. }
  26. insert(decl, prefix, prefixes, result) {
  27. if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
  28. let { parent, prop, value } = decl
  29. let isRowProp = prop.includes('rows')
  30. let isColumnProp = prop.includes('columns')
  31. let hasGridTemplate = parent.some(
  32. i => i.prop === 'grid-template' || i.prop === 'grid-template-areas'
  33. )
  34. /**
  35. * Not to prefix rows declaration if grid-template(-areas) is present
  36. */
  37. if (hasGridTemplate && isRowProp) {
  38. return false
  39. }
  40. let processor = new Processor({ options: {} })
  41. let status = processor.gridStatus(parent, result)
  42. let gap = getGridGap(decl)
  43. gap = inheritGridGap(decl, gap) || gap
  44. let gapValue = isRowProp ? gap.row : gap.column
  45. if ((status === 'no-autoplace' || status === true) && !hasGridTemplate) {
  46. gapValue = null
  47. }
  48. let prefixValue = prefixTrackValue({
  49. value,
  50. gap: gapValue
  51. })
  52. /**
  53. * Insert prefixes
  54. */
  55. decl.cloneBefore({
  56. prop: prefixTrackProp({ prop, prefix }),
  57. value: prefixValue
  58. })
  59. let autoflow = parent.nodes.find(i => i.prop === 'grid-auto-flow')
  60. let autoflowValue = 'row'
  61. if (autoflow && !processor.disabled(autoflow, result)) {
  62. autoflowValue = autoflow.value.trim()
  63. }
  64. if (status === 'autoplace') {
  65. /**
  66. * Show warning if grid-template-rows decl is not found
  67. */
  68. let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows')
  69. if (!rowDecl && hasGridTemplate) {
  70. return undefined
  71. } else if (!rowDecl && !hasGridTemplate) {
  72. decl.warn(
  73. result,
  74. 'Autoplacement does not work without grid-template-rows property'
  75. )
  76. return undefined
  77. }
  78. /**
  79. * Show warning if grid-template-columns decl is not found
  80. */
  81. let columnDecl = parent.nodes.find(i => {
  82. return i.prop === 'grid-template-columns'
  83. })
  84. if (!columnDecl && !hasGridTemplate) {
  85. decl.warn(
  86. result,
  87. 'Autoplacement does not work without grid-template-columns property'
  88. )
  89. }
  90. /**
  91. * Autoplace grid items
  92. */
  93. if (isColumnProp && !hasGridTemplate) {
  94. autoplaceGridItems(decl, result, gap, autoflowValue)
  95. }
  96. }
  97. return undefined
  98. }
  99. }
  100. GridRowsColumns.names = [
  101. 'grid-template-rows',
  102. 'grid-template-columns',
  103. 'grid-rows',
  104. 'grid-columns'
  105. ]
  106. module.exports = GridRowsColumns