-
Notifications
You must be signed in to change notification settings - Fork 9
/
postcss.config.js
54 lines (47 loc) · 3.05 KB
/
postcss.config.js
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
/*
* See: https://github.com/postcss/postcss-loader#usage
*
* TODO: configure/use css-nano
*/
const isDev = process.env.NODE_ENV !== 'production';
const isProd = process.env.NODE_ENV === 'production';
plugins = () => {
let result = [
//require('precss')({ /* ...options */ }), // Allows you to use Sass-like markup in your CSS files. (not used at the moment)
//require('autoprefixer')({ /* ...options */ }), // Add this if you do not use "postcss-cssnext"
//require('postcss-custom-properties')({ /* ...options */ }), // Add this if you do not use "postcss-cssnext"
//require('postcss-calc')({ /* ...options */ }), // Add this if you do not use "postcss-cssnext"
//require('postcss-nested-props')({ /* ...options */ }), // Unwrap nested properties (not used at the moment).
require('postcss-import')({ /* ...options */ }), // CSS import
require('postcss-url')({ /* ...options */ }), // Rebase, inline or copy on url()
require('postcss-mixins')({ /* ...options */ }), // PostCSS plugin for mixins
require('postcss-cssnext')({ // Use tomorrow's CSS syntax, today :-)
features: {
customProperties: false, // Use 'postcss-css-variables' insted of 'postcss-custom-properties',
rem: false, // Disable px fallback for rem/em
} // See: http://cssnext.io/usage/
}), // Require 'postcss-cssnext' AFTER "postcss-import"
// // This is the difference between cssnext working or not
// // See: https://medium.com/written-with-envy/webpack-2-postcss-cssnext-fdcd2fd7d0bd
require('postcss-css-variables')({ /* ...options */ }), // Transform CSS Custom Properties(CSS variables) syntax into a static representation
// // The 'postcss-custom-properties' plugin does not support CSS variables inside media queries and the like
// // This plugin is required until the 'postcss-custom-properties' supports this feature
// // Note: Using postcss-css-varaibles is "playing with fire", see: https://github.com/postcss/postcss-custom-properties/issues/32
require('postcss-hexrgba')({ /* ...options */ }), // Adds shorthand hex methods to rgba() values
];
if (isDev) {
result.concat([
require('postcss-reporter')(),
require('postcss-browser-reporter')(), // Error reporting when the build fails
]);
}
if (isProd) {
result.concat([
require("cssnano")({ autoprefixer: false }),
]);
}
return result;
};
module.exports = {
plugins: plugins()
};