Update postcss config to include nesting

Author: ravichdev

package-lock.json

@@ -25,9 +25,9 @@
   "devDependencies": {
     "@babel/cli": "7.8.4",
     "@babel/core": "7.8.4",
-    "@babel/preset-env": "7.11.5",
     "@babel/plugin-proposal-optional-chaining": "7.8.3",
     "@babel/plugin-transform-react-jsx": "7.8.3",
+    "@babel/preset-env": "7.11.5",
     "@material/button": "5.1.0",
     "@material/card": "5.1.0",
     "@material/checkbox": "5.1.0",
@@ -44,8 +44,8 @@
     "@material/switch": "6.0.0",
     "@material/tab-bar": "5.1.0",
     "@material/textfield": "5.1.0",
-    "@material/top-app-bar": "5.1.0",
     "@material/tooltip": "8.0.0",
+    "@material/top-app-bar": "5.1.0",
     "@material/typography": "5.1.0",
     "@sheerun/mutationobserver-shim": "0.3.3",
     "@testing-library/dom": "7.2.2",
@@ -123,7 +123,7 @@
     "postcss-import": "12.0.1",
     "postcss-loader": "3.0.0",
     "postcss-mixins": "6.2.3",
-    "postcss-nested": "4.2.1",
+    "postcss-nested": "4.2.3",
     "postcss-preset-env": "6.7.0",
     "postcss-simple-vars": "5.0.2",
     "prettier": "npm:[email protected]",

package.json

@@ -85,10 +85,11 @@ module.exports = {
 			stage: 0,
 			preserve: false, // Omit pre-polyfilled CSS.
 			features: {
-				'nesting-rules': false, // Uses postcss-nesting which doesn't behave like Sass.
+				'nesting-rules': true, // Uses postcss-nesting which doesn't behave like Sass.
 				'custom-properties': {
 					preserve: true, // Do not remove :root selector.
 				},
+				'custom-media-queries': true,
 			},
 			autoprefixer: {
 				grid: true,

postcss.config.js

@@ -22,6 +22,12 @@
 	& .mdc-top-app-bar__action-item,
 	& .mdc-top-app-bar__navigation-icon {
 		color: var(--mdc-theme-on-header, var(--mdc-theme-on-primary, #fff));
+
+		&:hover,
+		&:focus,
+		&:visited {
+			color: var(--mdc-theme-on-header, var(--mdc-theme-on-primary, #fff));
+		}
 	}
 
 	& .mdc-top-app-bar__section--align-start {