feat: added css-file and write forced handles

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "dev": "lerna run dev --parallel",
     "build": "lerna run build --stream",
+    "nco": "lerna exec 'ncu -u'",
     "prerelease": "lerna run build --scope react-mops",
     "release": "lerna publish --conventional-commits",
     "test": "echo 'No tests specified' exit 0"

packages/demo/src/elements.tsx

@@ -81,8 +81,9 @@ export const Container = styled.div<{ withGrid?: { x: number; y: number }; hasBo
 		`}
 `;
 export const Inner = styled.div`
-	background-image: linear-gradient(180deg, hsl(340, 100%, 40%), hsl(340, 100%, 30%));
-	color: hsl(340, 100%, 80%);
+	background-color: hsl(250, 100%, 50%);
+	background-image: linear-gradient(180deg, hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.5));
+	color: hsla(0, 0%, 100%, 0.4);
 	display: flex;
 	align-items: center;
 	align-content: center;

packages/demo/src/global-style.ts

@@ -1,39 +1,15 @@
-import {resizeClasses, resizeCursors, rotationClasses, rotationCursors} from "react-mops";
-import {createGlobalStyle, css} from "styled-components";
+import {createGlobalStyle} from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
 	body {
 		margin: 0;
 		font-family: sans-serif;
 		background: #eee;
-		color:  hsla(0, 0%, 0%, 0.8);
-
-		${rotationClasses.map(
-			(c, i) => css`
-				&.${c} * {
-					cursor: -webkit-image-set(
-								url(${rotationCursors[i]["1x"]}) 1x,
-								url(${rotationCursors[i]["2x"]}) 2x
-							)
-							9 9,
-						auto !important;
-				}
-			`
-		)}
-
-		${resizeClasses.map(
-			(c, i) => css`
-				&.${c} * {
-					cursor: ${resizeCursors[i]} !important;
-				}
-			`
-		)}
+		color: hsla(0, 0%, 0%, 0.8);
 	}
-
 	*,
 	*::before,
 	*::after {
 		box-sizing: border-box;
 	}
-
 `;

packages/demo/src/index.ts

@@ -1,5 +1,6 @@
 import {createElement} from "react";
 import {hydrate} from "react-dom";
+import "react-mops/react-mops.css";
 import {BrowserRouter} from "react-router-dom";
 import {App} from "./app";
 

packages/demo/src/pages/home.tsx

@@ -20,7 +20,6 @@ import {
 	Example,
 	Examples,
 	Headline,
-	Icon,
 	Inner,
 	InvisibleMarker,
 	StyledBox,
@@ -244,8 +243,8 @@ export function Home() {
 										onRotateEnd={b => {
 											updateItem({uuid, ...b});
 										}}
-										minHeight={100}
-										minWidth={100}
+										// minHeight={100} // not implemented
+										// minWidth={100} // not implemented
 										marker={showMarkers ? undefined : InvisibleMarker}
 										fullHandles={!showMarkers}
 										size={size}
@@ -255,9 +254,7 @@ export function Home() {
 											...shouldSnap,
 											hasSiblings && toSiblings(items.filter(item => item.uuid !== uuid))
 										].filter(Boolean)}>
-										<Inner >
-											<Icon icon="M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z"/>
-										</Inner>
+										<Inner />
 									</Box>
 								))}
 							</Container>

packages/demo/src/server/template.tsx

@@ -8,6 +8,7 @@ export const Document = (props: any) => (
 			<meta charSet="utf-8" />
 			<meta name="viewport" content="width=device-width, initial-scale=1" />
 			<link rel="shortcut icon" href="/assets/logo.ico" />
+			{props.isServer && <link rel="stylesheet" href="/main.css" />}
 			{props.head.meta.toComponents()}
 			{props.head.link.toComponents()}
 			{Parser(props.styles)}

packages/demo/webpack.dev.js

@@ -6,7 +6,7 @@ module.exports = (env, argv) =>
 		module: {
 			rules: [
 				{
-					test: /\.jpg?$/,
+					test: /\.(png|jpe?g)$/i,
 					use: [
 						{
 							loader: "file-loader"

packages/demo/webpack.prod.js

@@ -10,7 +10,7 @@ module.exports = (env, argv) =>
 		module: {
 			rules: [
 				{
-					test: /\.jpg?$/,
+					test: /\.(png|jpe?g)$/i,
 					use: [
 						{
 							loader: "file-loader"

packages/react-mops/package.json

@@ -45,18 +45,19 @@
     "test": "test"
   },
   "scripts": {
-    "prebuild": "ngineer clean",
+    "prebuild": "yarn clean",
     "build": "ngineer --rollup --prod",
-    "clean": "ngineer clean",
-    "predev": "ngineer clean",
-    "dev": "ngineer --rollup --watch",
+    "clean": "ngineer clean 'src/elements.css.d.ts'",
+    "dev": "yarn watch",
     "test": "ngineer test",
     "watch": "ngineer --rollup --watch",
-    "prewatch": "ngineer clean"
+    "prewatch": "yarn clean"
   },
   "dependencies": {
+    "@types/classnames": "^2.2.9",
     "@types/react": "^16.9.2",
     "@types/uuid": "^3.4.5",
+    "classnames": "2.2.6",
     "immutability-helper": "^3.0.1",
     "ts-lib": "^0.0.5",
     "uuid": "^3.3.3"
@@ -66,9 +67,13 @@
     "@ngineer/configs": "1.3.1",
     "@ngineer/testing-utils": "1.3.1",
     "@types/react-dom": "16.9.0",
+    "autoprefixer": "9.6.1",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "rollup-plugin-url": "2.2.2",
+    "rollup-plugin-postcss": "2.0.3",
+    "postcss-url": "8.0.0",
+    "cssnano": "4.1.10",
     "ts-node": "8.3.0",
     "typescript": "3.6.2"
   },

packages/react-mops/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	plugins: {
+		"postcss-url": {
+			url: "inline"
+		},
+		cssnano: process.env.NODE_ENV === "production" ? {} : null
+	}
+};

packages/react-mops/react-mops.css

@@ -0,0 +1 @@
+@import "./dist/index.css";

packages/react-mops/rollup.config.js

@@ -1,7 +1,9 @@
 const path = require("path");
-import url from "rollup-plugin-url"
-import {createBanner, getPlugins} from "@ngineer/config-rollup/typescript";
+const url = require("rollup-plugin-url");
+const {createBanner, getPlugins} = require("@ngineer/config-rollup/typescript");
+const postcss = require("rollup-plugin-postcss");
 
+const autoprefixer = require("autoprefixer");
 
 module.exports = () => {
 	const cwd = process.cwd();
@@ -28,6 +30,13 @@ module.exports = () => {
 			],
 			plugins: [
 				url(),
+				postcss({
+					extract: true,
+					modules: {
+						generateScopedName:
+							process.env === "production" ? "[hash:base64:5]" : "[local]"
+					}
+				}),
 				...getPlugins(tsconfig)
 			]
 		}

packages/react-mops/src/box.tsx

@@ -301,14 +301,16 @@ export const Box: React.RefForwardingComponent<
 							metaKey
 						}}>
 						<Handles style={contentStyle} draw={drawBox}>
-							{handles.map(handle => (
-								<Handle
-									key={handle.variation}
-									{...handle}
-									marker={marker}
-									full={fullHandles}
-								/>
-							))}
+							{handles.map(handle => {
+								return (
+									<Handle
+										key={handle.variation}
+										{...handle}
+										marker={marker}
+										full={fullHandles}
+									/>
+								)
+							})}
 						</Handles>
 					</PropProvider>
 				)}

packages/react-mops/src/cursors/index.ts

@@ -1,47 +1,17 @@
-import png_eRotate1x from "./images/e-rotate.png";
-import png_eRotate2x from "./images/e-rotate@2x.png";
-import png_nRotate1x from "./images/n-rotate.png";
-import png_nRotate2x from "./images/n-rotate@2x.png";
-import png_neRotate1x from "./images/ne-rotate.png";
-import png_neRotate2x from "./images/ne-rotate@2x.png";
-import png_nwRotate1x from "./images/nw-rotate.png";
-import png_nwRotate2x from "./images/nw-rotate@2x.png";
-import png_sRotate1x from "./images/s-rotate.png";
-import png_sRotate2x from "./images/s-rotate@2x.png";
-import png_seRotate1x from "./images/se-rotate.png";
-import png_seRotate2x from "./images/se-rotate@2x.png";
-import png_swRotate1x from "./images/sw-rotate.png";
-import png_swRotate2x from "./images/sw-rotate@2x.png";
-import png_wRotate1x from "./images/w-rotate.png";
-import png_wRotate2x from "./images/w-rotate@2x.png";
-
 export const resizeClasses = [
-	"Mops--col-resize",
-	"Mops--nwse-resize",
-	"Mops--row-resize",
-	"Mops--nesw-resize"
+	"colResize",
+	"nwseResize",
+	"rowResize",
+	"neswResize"
 ];
 
-export const resizeCursors = ["col-resize", "nwse-resize", "row-resize", "nesw-resize"];
-
 export const rotationClasses = [
-	"Mops--e-rotate",
-	"Mops--se-rotate",
-	"Mops--s-rotate",
-	"Mops--sw-rotate",
-	"Mops--w-rotate",
-	"Mops--nw-rotate",
-	"Mops--n-rotate",
-	"Mops--ne-rotate"
-];
-
-export const rotationCursors = [
-	{"1x": png_eRotate1x, "2x": png_eRotate2x},
-	{"1x": png_seRotate1x, "2x": png_seRotate2x},
-	{"1x": png_sRotate1x, "2x": png_sRotate2x},
-	{"1x": png_swRotate1x, "2x": png_swRotate2x},
-	{"1x": png_wRotate1x, "2x": png_wRotate2x},
-	{"1x": png_nwRotate1x, "2x": png_nwRotate2x},
-	{"1x": png_nRotate1x, "2x": png_nRotate2x},
-	{"1x": png_neRotate1x, "2x": png_neRotate2x}
+	"eRotate",
+	"seRotate",
+	"sRotate",
+	"swRotate",
+	"wRotate",
+	"nwRotate",
+	"nRotate",
+	"neRotate"
 ];