postcss.config.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. const AUTOPREFIXER_BROWSERS = [
  2. 'Android >= 4',
  3. 'Chrome >= 35',
  4. 'Firefox >= 31',
  5. 'Explorer >= 9',
  6. 'iOS >= 7',
  7. 'Opera >= 12',
  8. 'Safari >= 7.1',
  9. ]
  10. module.exports = {
  11. plugins: [
  12. // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
  13. // https://github.com/postcss/postcss-import
  14. require('postcss-import')(),
  15. // W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
  16. // https://github.com/postcss/postcss-custom-properties
  17. require('postcss-custom-properties')(),
  18. // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
  19. // https://github.com/postcss/postcss-custom-media
  20. require('postcss-custom-media')(),
  21. // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
  22. // https://github.com/postcss/postcss-media-minmax
  23. require('postcss-media-minmax')(),
  24. // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
  25. // https://github.com/postcss/postcss-custom-selectors
  26. require('postcss-custom-selectors')(),
  27. // W3C calc() function, e.g. div { height: calc(100px - 2em); }
  28. // https://github.com/postcss/postcss-calc
  29. require('postcss-calc')(),
  30. // Allows you to nest one style rule inside another
  31. // https://github.com/jonathantneal/postcss-nesting
  32. require('postcss-nesting')(),
  33. // W3C color() function, e.g. div { background: color(red alpha(90%)); }
  34. // https://github.com/postcss/postcss-color-function
  35. require('postcss-color-function')(),
  36. // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
  37. // https://github.com/iamvdo/pleeease-filters
  38. require('pleeease-filters')(),
  39. // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
  40. // https://github.com/robwierzbowski/node-pixrem
  41. require('pixrem')(),
  42. // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
  43. // https://github.com/postcss/postcss-selector-matches
  44. require('postcss-selector-matches')(),
  45. // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
  46. // https://github.com/postcss/postcss-selector-not
  47. require('postcss-selector-not')(),
  48. // Add vendor prefixes to CSS rules using values from caniuse.com
  49. // https://github.com/postcss/autoprefixer
  50. require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
  51. ],
  52. }