grid-template-areas.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. let Declaration = require('../declaration')
  2. let {
  3. parseGridAreas,
  4. warnMissedAreas,
  5. prefixTrackProp,
  6. prefixTrackValue,
  7. getGridGap,
  8. warnGridGap,
  9. inheritGridGap
  10. } = require('./grid-utils')
  11. function getGridRows(tpl) {
  12. return tpl
  13. .trim()
  14. .slice(1, -1)
  15. .split(/["']\s*["']?/g)
  16. }
  17. class GridTemplateAreas extends Declaration {
  18. /**
  19. * Translate grid-template-areas to separate -ms- prefixed properties
  20. */
  21. insert(decl, prefix, prefixes, result) {
  22. if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
  23. let hasColumns = false
  24. let hasRows = false
  25. let parent = decl.parent
  26. let gap = getGridGap(decl)
  27. gap = inheritGridGap(decl, gap) || gap
  28. // remove already prefixed rows
  29. // to prevent doubling prefixes
  30. parent.walkDecls(/-ms-grid-rows/, i => i.remove())
  31. // add empty tracks to rows
  32. parent.walkDecls(/grid-template-(rows|columns)/, trackDecl => {
  33. if (trackDecl.prop === 'grid-template-rows') {
  34. hasRows = true
  35. let { prop, value } = trackDecl
  36. trackDecl.cloneBefore({
  37. prop: prefixTrackProp({ prop, prefix }),
  38. value: prefixTrackValue({ value, gap: gap.row })
  39. })
  40. } else {
  41. hasColumns = true
  42. }
  43. })
  44. let gridRows = getGridRows(decl.value)
  45. if (hasColumns && !hasRows && gap.row && gridRows.length > 1) {
  46. decl.cloneBefore({
  47. prop: '-ms-grid-rows',
  48. value: prefixTrackValue({
  49. value: `repeat(${gridRows.length}, auto)`,
  50. gap: gap.row
  51. }),
  52. raws: {}
  53. })
  54. }
  55. // warnings
  56. warnGridGap({
  57. gap,
  58. hasColumns,
  59. decl,
  60. result
  61. })
  62. let areas = parseGridAreas({
  63. rows: gridRows,
  64. gap
  65. })
  66. warnMissedAreas(areas, decl, result)
  67. return decl
  68. }
  69. }
  70. GridTemplateAreas.names = ['grid-template-areas']
  71. module.exports = GridTemplateAreas