feat(postcss): add nested plugin

package-lock.json

@@ -6507,6 +6507,16 @@
         }
       }
     },
+    "postcss-nested": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz",
+      "integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-selector-parser": "^5.0.0"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "babel-preset-react-app": "^9.0.0",
     "husky": "^3.0.0",
     "parcel-bundler": "^1.12.3",
+    "postcss-nested": "^4.1.2",
     "react-dom": "^16.8.6",
     "rollup": "^1.16.2",
     "rollup-plugin-babel": "^4.3.3",

rollup.config.js

@@ -2,6 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import postcss from 'rollup-plugin-postcss';
+import postCssNested from 'postcss-nested';
 import autoprefixer from 'autoprefixer';
 import bundleSize from 'rollup-plugin-bundle-size';
 
@@ -28,7 +29,10 @@ export default [{
 		plugins: [
 			bundleSize(),
 			postcss({
-				plugins: [autoprefixer()]
+				plugins: [
+					autoprefixer(),
+					postCssNested()
+				]
 			}),
 			resolve(),
 			babel({

src/style.css

@@ -50,11 +50,11 @@
   stroke: #333;
   stroke-width: 2;
   pointer-events: all;
-}
 
-.react-graph__edge.selected {
+  &.selected {
     stroke: #ff5050;
   }
+}
 
 .react-graph__nodes {
   width: 100%;
@@ -75,15 +75,15 @@
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
-}
 
-.react-graph__node:hover > * {
+  &:hover > * {
     box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
   }
 
-.react-graph__node.selected > * {
+  &.selected > * {
     box-shadow: 0 0 0 2px #000;
   }
+}
 
 .react-graph__handle {
   position: absolute;
@@ -104,10 +104,10 @@
   left: 0;
   transform-origin: left top;
   pointer-events: none;
-}
 
-.react-graph__nodesselection-rect {
+  &-rect {
     position: absolute;
     background: rgba(0, 89, 220, 0.08);
     border: 1px dotted rgba(0, 89, 220, 0.8);
   }
+}