postcss.config.js (3172B)
1 /** 2 * React Starter Kit (https://www.reactstarterkit.com/) 3 * 4 * Copyright © 2014-present Kriasoft, LLC. All rights reserved. 5 * 6 * This source code is licensed under the MIT license found in the 7 * LICENSE.txt file in the root directory of this source tree. 8 */ 9 10 module.exports = () => ({ 11 // The list of plugins for PostCSS 12 // https://github.com/postcss/postcss 13 plugins: [ 14 // Transfer @global-import rule by inlining content with :global CSS Modules scope 15 // e.g. @global-import 'draft-js/dist/Draft.css' 16 // https://github.com/scherebedov/postcss-global-import 17 require('postcss-global-import')(), 18 // Transfer @import rule by inlining content, e.g. @import 'normalize.css' 19 // https://github.com/postcss/postcss-import 20 require('postcss-import')(), 21 // W3C variables, e.g. :root { --color: red; } div { background: var(--color); } 22 // https://github.com/postcss/postcss-custom-properties 23 require('postcss-custom-properties')(), 24 // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em); 25 // https://github.com/postcss/postcss-custom-media 26 require('postcss-custom-media')(), 27 // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { } 28 // https://github.com/postcss/postcss-media-minmax 29 require('postcss-media-minmax')(), 30 // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6; 31 // https://github.com/postcss/postcss-custom-selectors 32 require('postcss-custom-selectors')(), 33 // W3C calc() function, e.g. div { height: calc(100px - 2em); } 34 // https://github.com/postcss/postcss-calc 35 require('postcss-calc')(), 36 // Allows you to nest one style rule inside another 37 // https://github.com/jonathantneal/postcss-nesting 38 require('postcss-nesting')(), 39 // Unwraps nested rules like how Sass does it 40 // https://github.com/postcss/postcss-nested 41 require('postcss-nested')(), 42 // W3C color() function, e.g. div { background: color(red alpha(90%)); } 43 // https://github.com/postcss/postcss-color-function 44 require('postcss-color-function')(), 45 // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); } 46 // https://github.com/iamvdo/pleeease-filters 47 require('pleeease-filters')(), 48 // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; } 49 // https://github.com/robwierzbowski/node-pixrem 50 require('pixrem')(), 51 // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { } 52 // https://github.com/postcss/postcss-selector-matches 53 require('postcss-selector-matches')(), 54 // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors 55 // https://github.com/postcss/postcss-selector-not 56 require('postcss-selector-not')(), 57 // Postcss flexbox bug fixer 58 // https://github.com/luisrudge/postcss-flexbugs-fixes 59 require('postcss-flexbugs-fixes')(), 60 // Add vendor prefixes to CSS rules using values from caniuse.com 61 // https://github.com/postcss/autoprefixer 62 require('autoprefixer')(/* package.json/browserslist */), 63 ], 64 });