alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(postcss): add nested plugin

Browse Source
This commit is contained in:
moklick
2019-07-25 00:10:56 +02:00
parent 9fe6cff644
commit f7a7ea2b22
5 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactGraph.js
Vendored
+1 -1
View File
@@ -33019,7 +33019,7 @@
} }
} }
var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n}\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n}\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}"; var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n }\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n }";
styleInject(css); styleInject(css);
var ReactGraph = var ReactGraph =
package-lock.json
Generated
+10
View File
@@ -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": { "postcss-normalize-charset": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
package.json
+1
View File
@@ -22,6 +22,7 @@
"babel-preset-react-app": "^9.0.0", "babel-preset-react-app": "^9.0.0",
"husky": "^3.0.0", "husky": "^3.0.0",
"parcel-bundler": "^1.12.3", "parcel-bundler": "^1.12.3",
"postcss-nested": "^4.1.2",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"rollup": "^1.16.2", "rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3", "rollup-plugin-babel": "^4.3.3",
rollup.config.js
+5 -1
View File
@@ -2,6 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs'; import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel'; import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss'; import postcss from 'rollup-plugin-postcss';
import postCssNested from 'postcss-nested';
import autoprefixer from 'autoprefixer'; import autoprefixer from 'autoprefixer';
import bundleSize from 'rollup-plugin-bundle-size'; import bundleSize from 'rollup-plugin-bundle-size';
@@ -28,7 +29,10 @@ export default [{
plugins: [ plugins: [
bundleSize(), bundleSize(),
postcss({ postcss({
plugins: [autoprefixer()] plugins: [
autoprefixer(),
postCssNested()
]
}), }),
resolve(), resolve(),
babel({ babel({
src/style.css
+14 -14
View File
@@ -50,10 +50,10 @@
stroke: #333; stroke: #333;
stroke-width: 2; stroke-width: 2;
pointer-events: all; pointer-events: all;
}
.react-graph__edge.selected { &.selected {
stroke: #ff5050; stroke: #ff5050;
}
} }
.react-graph__nodes { .react-graph__nodes {
@@ -75,14 +75,14 @@
user-select: none; user-select: none;
pointer-events: all; pointer-events: all;
transform-origin: 0 0; transform-origin: 0 0;
}
.react-graph__node:hover > * { &:hover > * {
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
} }
.react-graph__node.selected > * { &.selected > * {
box-shadow: 0 0 0 2px #000; box-shadow: 0 0 0 2px #000;
}
} }
.react-graph__handle { .react-graph__handle {
@@ -104,10 +104,10 @@
left: 0; left: 0;
transform-origin: left top; transform-origin: left top;
pointer-events: none; pointer-events: none;
}
.react-graph__nodesselection-rect { &-rect {
position: absolute; position: absolute;
background: rgba(0, 89, 220, 0.08); background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8); border: 1px dotted rgba(0, 89, 220, 0.8);
}
} }