Added PostCss tooling to application.

frontend/init/index.pcss

@@ -1,13 +1,7 @@
 @import "normalize.css/normalize.css";
-@import "bulma/css/bulma.css";
 
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 24px;
 }
-
-html,
-body {
-  background: lightblue;
-}

package.json

@@ -7,7 +7,10 @@
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.2.2",
     "bulma": "^0.8.2",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.7.0"
   },
   "version": "0.1.0",
   "devDependencies": {

postcss.config.js

@@ -1,12 +1,19 @@
+const importImport = require("postcss-import");
+const flexBugsFixesImport = require("postcss-flexbugs-fixes");
+const presetEnvImport = require("postcss-preset-env");
+
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('postcss-preset-env')({
+    importImport,
+    flexBugsFixesImport,
+    presetEnvImport({
       autoprefixer: {
-        flexbox: 'no-2009'
+        flexbox: "no-2009",
       },
-      stage: 3
-    })
-  ]
-}
+      stage: 3,
+      features: {
+        "nesting-rules": true,
+      },
+    }),
+  ],
+};

yarn.lock

@@ -6190,7 +6190,7 @@ postcss-env-function@^2.0.2:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
-postcss-flexbugs-fixes@^4.1.0:
+postcss-flexbugs-fixes@^4.1.0, postcss-flexbugs-fixes@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
   integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==