postcss-fuss/fuss-functions.js at master · accurat/postcss-fuss · 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
const flatMap = require('lodash/flatMap')

module.exports = {
    color(name, color) {
        return [
            { className: name, prop: 'color', value: color },
            { className: `bg-${name}`, prop: 'background-color', value: color },
            { className: `b--${name}`, prop: 'border-color', value: color },
        ]
    },

    colorVariants(rulesBlock) {
        const variantsBlock = flatMap(rulesBlock, rule => {
            if (!rule.className) return rule

            const { className, prop, value: color } = rule
            return [
                {
                    className: `${className}-light`,
                    prop,
                    value: `color-mod(${color} lightness(+10%))`,
                },
                {
                    className: `${className}-dark`,
                    prop,
                    value: `color-mod(${color} lightness(-10%))`,
                },
            ]
        })

        return rulesBlock.concat(variantsBlock)
    },

    colorStates(rulesBlock) {
        const statesBlock = flatMap(rulesBlock, rule => {
            if (!rule.className) return rule

            const { className, prop, value } = rule
            return [
                { className: `hover-${className}:hover`, prop, value },
                { className: `active-${className}:hover:active`, prop, value },
                { className: `focus-${className}:focus`, prop, value },
            ]
        })

        return rulesBlock.concat(statesBlock)
    },

    responsive(rulesBlock) {
        const blockM = rulesBlock.map((rule) => {
            if (!rule.className) return rule
            const { className, prop, value } = rule
            return {
                className: `${className}-m`,
                breakpoint: '(min-width: 480px) and (max-width: 1024px)',
                prop,
                value,
            }
        })
        const blockL = rulesBlock.map((rule) => {
            if (!rule.className) return rule
            const { className, prop, value } = rule
            return {
                className: `${className}-l`,
                breakpoint: '(min-width: 1024px)',
                prop,
                value,
            }
        })
        return rulesBlock.concat(blockM, blockL)
    },
}