tailwindcss/src/util/generateVariantFunction.js at master · PragmaticCoder/tailwindcss · 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
import _ from 'lodash'
import postcss from 'postcss'
import selectorParser from 'postcss-selector-parser'
import { useMemo } from './useMemo'

const classNameParser = selectorParser(selectors => {
  return selectors.first.filter(({ type }) => type === 'class').pop().value
})

const getClassNameFromSelector = useMemo(
  selector => classNameParser.transformSync(selector),
  selector => selector
)

export default function generateVariantFunction(generator, options = {}) {
  return {
    options,
    handler: (container, config) => {
      const cloned = postcss.root({ nodes: container.clone().nodes })

      container.before(
        _.defaultTo(
          generator({
            container: cloned,
            separator: config.separator,
            modifySelectors: modifierFunction => {
              cloned.each(rule => {
                if (rule.type !== 'rule') {
                  return
                }

                rule.selectors = rule.selectors.map(selector => {
                  return modifierFunction({
                    get className() {
                      return getClassNameFromSelector(selector)
                    },
                    selector,
                  })
                })
              })
              return cloned
            },
          }),
          cloned
        ).nodes
      )
    },
  }
}