React-starter-kit: Use postcss-preset-env instead of loading each plugins

Created on 28 May 2019 · 3Comments · Source: kriasoft/react-starter-kit

How about only supporting PostCSS features Stage 3+ and remove less matured features?

In #1726, @kutaloweb pointed out the syntax of Home.css is not valid in his IDE. Indeed "nesting rules" is far from stable (Stage 0). Here I would like to discuss to what extent we're going to support in PostCSS. To do that, cssdb.org provides us a rich and comprehensive list of CSS drafts and how mature they are. I suggest Stage 3+ is a decent default in RSK.

The sections below indicates which stage the existing plugins are listed.

postcss-preset-env can replace these existings

By intoducing postcss-preset-env we can remove the below existing plugins since it includes them. And if we pass Stage 3 as a supporting version that means we don't support "nesting rules" of Stage 0 any more.

Stage3

    // https://github.com/postcss/postcss-custom-properties
    require('postcss-custom-properties')(),

    // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
    // https://github.com/postcss/postcss-media-minmax
    require('postcss-media-minmax')(),

Stage2

    // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
    // https://github.com/postcss/postcss-selector-matches
    require('postcss-selector-matches')(),

    // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
    // https://github.com/postcss/postcss-selector-not
    require('postcss-selector-not')(),

Stage1

    // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
    // https://github.com/postcss/postcss-custom-media
    require('postcss-custom-media')(),

    // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
    // https://github.com/postcss/postcss-custom-selectors
    require('postcss-custom-selectors')(),

Stage0

    // Allows you to nest one style rule inside another
    // https://github.com/jonathantneal/postcss-nesting
    require('postcss-nesting')(),

Ready to remove

...with comments.

    // W3C color() function, e.g. div { background: color(red alpha(90%)); }
    // https://github.com/postcss/postcss-color-function
    require('postcss-color-function')(),
    // # The site says the syntax is deprecated 

    // Add vendor prefixes to CSS rules using values from caniuse.com
    // https://github.com/postcss/autoprefixer
    require('autoprefixer')({
      browsers: pkg.browserslist,
      flexbox: 'no-2009',
    }),
    // # postcss-preset-env includes it internally

    // Unwraps nested rules like how Sass does it
    // https://github.com/postcss/postcss-nested
    require('postcss-nested')(),
    // # I think this is duplicated to 'postcss-nesting', no?

The plugins that should remain

These plugins should remain in postcss.config.js because postcss-preset-env doesn't provide the equivalent features.

    // https://github.com/postcss/postcss-import
    require('postcss-import')(),

    // W3C calc() function, e.g. div { height: calc(100px - 2em); }
    // https://github.com/postcss/postcss-calc
    require('postcss-calc')(),

    // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
    // https://github.com/iamvdo/pleeease-filters
    require('pleeease-filters')(),

    // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
    // https://github.com/robwierzbowski/node-pixrem
    require('pixrem')(),

    // Postcss flexbox bug fixer
    // https://github.com/luisrudge/postcss-flexbugs-fixes
    require('postcss-flexbugs-fixes')(),

@langpavel , this can be called breaking change, but I think RSK gets more stable. First I would like to hear your opinion.

enhancement

Source