Cherry-pick: Introduce PostCSS Preset Env (kriasoft#1733)

Fixes kriasoft#1731 # Conflicts: # package.json # yarn.lock
piglovesyou · Jun 15, 2019 · 1d2d84e · 1d2d84e
1 parent f222a4b
commit 1d2d84e
Show file tree

Hide file tree

Showing 5 changed files with 362 additions and 154 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,6 @@
     "@graphql-codegen/cli": "^1.2.1",
     "@graphql-codegen/typescript-operations": "^1.2.1",
     "@graphql-codegen/typescript-react-apollo": "^1.2.1",
-    "@types/autoprefixer": "^9.4.0",
     "@types/babel-core": "^6.25.6",
     "@types/babel__core": "^7.1.2",
     "@types/body-parser": "^1.17.0",
@@ -89,7 +88,6 @@
     "@types/passport": "^1.0.0",
     "@types/passport-facebook": "^2.1.8",
     "@types/postcss-calc": "^7.0.0",
-    "@types/postcss-nested": "^4.1.0",
     "@types/prettier": "^1.16.1",
     "@types/query-string": "^6.3.0",
     "@types/react": "^16.8.10",
@@ -111,7 +109,6 @@
     "@types/webpack-node-externals": "^1.6.3",
     "@types/whatwg-fetch": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "autoprefixer": "^9.5.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.7.1",
@@ -147,23 +144,15 @@
     "opn-cli": "^4.0.0",
     "pixrem": "^5.0.0",
     "pleeease-filters": "^4.0.0",
-    "postcss": "^7.0.14",
-    "postcss-calc": "^7.0.1",
-    "postcss-color-function": "^4.0.1",
-    "postcss-custom-media": "^7.0.7",
-    "postcss-custom-properties": "^8.0.9",
-    "postcss-custom-selectors": "^5.1.2",
+    "postcss": "^7.0.2",
+    "postcss-calc": "^6.0.1",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-media-minmax": "^4.0.0",
-    "postcss-nested": "^4.1.2",
-    "postcss-nesting": "^7.0.0",
+    "postcss-preset-env": "^6.6.0",
     "postcss-pseudoelements": "^5.0.0",
-    "postcss-selector-matches": "^4.0.0",
-    "postcss-selector-not": "^4.0.0",
-    "prettier": "^1.16.4",
-    "raw-loader": "^2.0.0",
+    "prettier": "^1.14.3",
+    "raw-loader": "^0.5.1",
     "react-deep-force-update": "^2.1.3",
     "react-dev-utils": "^8.0.0",
     "react-error-overlay": "^5.1.4",

diff --git a/src/components/Html.tsx b/src/components/Html.tsx
@@ -70,9 +70,7 @@ const Html = ({
           dangerouslySetInnerHTML={{
             __html:
               'window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;' +
-              `ga('create','${
-                config.analytics.googleTrackingId
-              }','auto');ga('send','pageview')`,
+              `ga('create','${config.analytics.googleTrackingId}','auto');ga('send','pageview')`,
           }}
         />
       )}

diff --git a/src/passport.ts b/src/passport.ts
@@ -61,9 +61,7 @@ passport.use(
                 profile: {
                   displayName: profile.displayName,
                   gender: profile._json.gender,
-                  picture: `https://graph.facebook.com/${
-                    profile.id
-                  }/picture?type=large`,
+                  picture: `https://graph.facebook.com/${profile.id}/picture?type=large`,
                 },
               },
               {
@@ -113,9 +111,7 @@ passport.use(
                   profile: {
                     displayName: profile.displayName,
                     gender: profile._json.gender,
-                    picture: `https://graph.facebook.com/${
-                      profile.id
-                    }/picture?type=large`,
+                    picture: `https://graph.facebook.com/${profile.id}/picture?type=large`,
                   },
                 },
                 {

diff --git a/tools/postcss.config.ts b/tools/postcss.config.ts
@@ -19,50 +19,25 @@ const config = {
     // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
     // https://github.com/postcss/postcss-import
     require('postcss-import')(),
-    // W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
-    // https://github.com/postcss/postcss-custom-properties
-    require('postcss-custom-properties')(),
-    // 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')(),
-    // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
-    // https://github.com/postcss/postcss-media-minmax
-    require('postcss-media-minmax')(),
-    // 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')(),
     // W3C calc() function, e.g. div { height: calc(100px - 2em); }
     // https://github.com/postcss/postcss-calc
     require('postcss-calc')(),
-    // Allows you to nest one style rule inside another
-    // https://github.com/jonathantneal/postcss-nesting
-    require('postcss-nesting')(),
-    // Unwraps nested rules like how Sass does it
-    // https://github.com/postcss/postcss-nested
-    require('postcss-nested')(),
-    // W3C color() function, e.g. div { background: color(red alpha(90%)); }
-    // https://github.com/postcss/postcss-color-function
-    require('postcss-color-function')(),
     // 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')(),
-    // 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')(),
     // Postcss flexbox bug fixer
     // https://github.com/luisrudge/postcss-flexbugs-fixes
     require('postcss-flexbugs-fixes')(),
-    // Add vendor prefixes to CSS rules using values from caniuse.com
-    // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
+    // PostCSS Preset Env, which allows you easily to use all the features in cssdb.
+    // See what features in which stage in https://preset-env.cssdb.org/features
+    // https://github.com/csstools/postcss-preset-env
+    require('postcss-preset-env')({
+      stage: 3,
       browsers: pkg.browserslist,
-      flexbox: 'no-2009',
+      autoprefixer: { flexbox: 'no-2009' },
     }),
     // CSS Nano options http://cssnano.co/
     require('cssnano')(