grid-rows-columns.js 3.0 KB

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