postcss-fixes/index.js at master · MattDiMu/postcss-fixes · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
var postcss = require('postcss');


var presets = [
    'recommended', // default
    'safe',
    'fixes-only',
    'fallbacks-only',
    'enable-all',
    'disable-all'
];
var defaultPreset = 'recommended';

var plugins = [
    {
        id:             'postcss-pseudoelements',
        plugin: require('postcss-pseudoelements'),
        options:        {},
        isSafe:         true,
        isRecommended:  true,
        isFallback:     false
    },
    {
        id:             'postcss-flexbugs-fixes',
        plugin: require('postcss-flexbugs-fixes'),
        options:        {},
        isSafe:         true,
        isRecommended:  true,
        isFallback:     false
    },
    {
        /*
            theoretically unsafe, as a browser might calculate
            a different precision of decimals, but in practice
            we want the same precision in all browsers anway.
            therefore we recommmend using this even in development mode
        */
        id:             'postcss-calc',
        plugin: require('postcss-calc'),
        options:        {},
        isSafe:         false,
        isRecommended:  true,
        isFallback:     false
    },
    {
        id:             'postcss-unroot',
        plugin: require('postcss-unroot'),
        options:        {},
        isSafe:         false,
        isRecommended:  true,
        isFallback:     true
    },
    {
        id:             'postcss-unopacity',
        plugin: require('postcss-unopacity'),
        options:        { method: 'copy', prefixed: true },
        isSafe:         false,
        isRecommended:  true,
        isFallback:     true
    },
    {
        id:             'pixrem',
        plugin: require('pixrem'),
        options:        {
            replace: false,
            html: true, // root value autodetection
            unitPrecision: 5
        },
        isSafe:         false,
        isRecommended:  true,
        isFallback:     true
    },
    {
        id:             'postcss-nth-child-fix',
        plugin: require('postcss-nth-child-fix'),
        options:        {},
        isSafe:         true,
        isRecommended:  true,
        isFallback:     false
    },
    {
        id:             'postcss-vmin',
        plugin: require('postcss-vmin'),
        options:        {},
        isSafe:         true,
        isRecommended:  true,
        isFallback:     false
    }
];

/*
    currently not used plugins - reason why
    postcss-unnth - potentially bloats files too much, not worth the few edge cases IMO
    postcss-unrgba - when using the 'clone'-method to preserve the desired color, it gets hard to create a custom fallback
*/

function isSafe(elem) { return elem.isSafe; } // eslint-disable-line brace-style
function isRecommended(elem) { return elem.isRecommended; } // eslint-disable-line brace-style
function isFallback(elem) { return elem.isFallback; } // eslint-disable-line brace-style
function isFix(elem) { return !elem.isFallback; } // eslint-disable-line brace-style


function evalPluginsFromPreset(preset) {
    var pluginsArr = plugins;
    if (preset === 'enable-all') {
        return pluginsArr;
    } else if (preset === 'disable-all') {
        return [];
    } else if (preset === 'fixes-only') {
        return pluginsArr.filter(isFix);
    } else if (preset === 'fallbacks-only') {
        return pluginsArr.filter(isFallback);
    } else if (preset === 'safe') {
        return pluginsArr.filter(isSafe);
    } else { // recommended
        return pluginsArr.filter(isRecommended);
    }

}


module.exports = postcss.plugin('postcss-fixes', opts => {
    opts = opts || {};
    if (opts.mode && opts.mode === 'safe') console.warn('[postcss-fixes] option "mode" was renamed to "preset". ');

    var preset = defaultPreset;
    if (opts.preset) {
        if (presets.indexOf(opts.preset) > -1) {
            preset = opts.preset;
        } else {
            console.warn('[postcss-fixes] option "preset": "' + opts.preset + '" is invalid and will be ignored');
        }
    }

    var usedPlugins = evalPluginsFromPreset(preset);

    var postcssInstance = postcss();

    usedPlugins.forEach(plugin => {
        postcssInstance.use(plugin.plugin(plugin.options));
    });

    return postcssInstance;
});