init

config/webpack.config.js

@@ -51,6 +51,13 @@ const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
 
+const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
+const postcssPxToViewport = require('postcss-px-to-viewport');
+const postcssWriteSvg = require('postcss-write-svg');
+const postcssCssnext = require('postcss-cssnext');
+const postcssViewportUnits = require('postcss-viewport-units');
+const cssnano = require('cssnano');
+
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
@@ -110,6 +117,26 @@ module.exports = function(webpackEnv) {
               },
               stage: 3,
             }),
+            postcssAspectRatioMini({}),
+postcssPxToViewport({ 
+  viewportWidth: 750, // (Number) The width of the viewport. 
+  viewportHeight: 1334, // (Number) The height of the viewport. 
+  unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
+  viewportUnit: 'vw', // (String) Expected units. 
+  selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
+  minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
+  mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
+}),
+postcssWriteSvg({
+  utf8: false
+}),
+postcssCssnext({}),
+postcssViewportUnits({}),
+cssnano({
+  preset: "advanced", 
+  autoprefixer: false, 
+  "postcss-zindex": false 
+}),
             // Adds PostCSS Normalize as the reset css with default options,
             // so that it honors browserslist config in package.json
             // which in turn let's users customize the target behavior as per their needs.