tailwindcss-grid/index.js at master · chrisrowe/tailwindcss-grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const _ = require('lodash')

module.exports = function ({
  grids = _.range(1, 13),
  gaps = {},
  autoMinWidths = {},
  variants = ['responsive'],
}) {
  return function ({
    e,
    addUtilities
  }) {
    addUtilities(
      [{
          '.grid': {
            display: 'grid',
          },
        },
        {
          '.grid-dense': {
            gridAutoFlow: 'dense',
          },
        },
        ..._.map(gaps, (size, name) => {
          const gridGap = name.endsWith('-y') ?
            'gridRowGap' :
            name.endsWith('-x') ?
            'gridColumnGap' :
            'gridGap'

          return {
            [`.${e(`grid-gap-${name}`)}`]: {
              [gridGap]: size,
            },
          }
        }),
        ...grids.map(columns => ({
          [`.grid-columns-${columns}`]: {
            gridTemplateColumns: `repeat(${columns}, 1fr)`,
          },
        })),
        ..._.map(autoMinWidths, (size, name) => ({
          [`.${e(`grid-automin-${name}`)}`]: {
            gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`,
          },
        })),
        ..._.range(1, _.max(grids) + 1).map(span => ({
          [`.col-span-${span}`]: {
            gridColumnStart: `span ${span}`,
          },
        })),
        ..._.range(1, _.max(grids) + 2).map(line => ({
          [`.col-start-${line}`]: {
            gridColumnStart: `${line}`,
          },
          [`.col-end-${line}`]: {
            gridColumnEnd: `${line}`,
          },
        })),
        ..._.range(1, _.max(grids) + 1).map(span => ({
          [`.row-span-${span}`]: {
            gridRowStart: `span ${span}`,
          },
        })),
        ..._.range(1, _.max(grids) + 2).map(line => ({
          [`.row-start-${line}`]: {
            gridRowStart: `${line}`,
          },
          [`.row-end-${line}`]: {
            gridRowEnd: `${line}`,
          },
        })),
      ],
      variants,
    )
  }
}