grid-template.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. let Declaration = require('../declaration')
  2. let {
  3. parseTemplate,
  4. warnMissedAreas,
  5. getGridGap,
  6. warnGridGap,
  7. inheritGridGap
  8. } = require('./grid-utils')
  9. class GridTemplate extends Declaration {
  10. /**
  11. * Translate grid-template to separate -ms- prefixed properties
  12. */
  13. insert(decl, prefix, prefixes, result) {
  14. if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
  15. if (decl.parent.some(i => i.prop === '-ms-grid-rows')) {
  16. return undefined
  17. }
  18. let gap = getGridGap(decl)
  19. /**
  20. * we must insert inherited gap values in some cases:
  21. * if we are inside media query && if we have no grid-gap value
  22. */
  23. let inheritedGap = inheritGridGap(decl, gap)
  24. let { rows, columns, areas } = parseTemplate({
  25. decl,
  26. gap: inheritedGap || gap
  27. })
  28. let hasAreas = Object.keys(areas).length > 0
  29. let hasRows = Boolean(rows)
  30. let hasColumns = Boolean(columns)
  31. warnGridGap({
  32. gap,
  33. hasColumns,
  34. decl,
  35. result
  36. })
  37. warnMissedAreas(areas, decl, result)
  38. if ((hasRows && hasColumns) || hasAreas) {
  39. decl.cloneBefore({
  40. prop: '-ms-grid-rows',
  41. value: rows,
  42. raws: {}
  43. })
  44. }
  45. if (hasColumns) {
  46. decl.cloneBefore({
  47. prop: '-ms-grid-columns',
  48. value: columns,
  49. raws: {}
  50. })
  51. }
  52. return decl
  53. }
  54. }
  55. GridTemplate.names = ['grid-template']
  56. module.exports = GridTemplate