fix: revert all day previous commit

Author: meucamille

package.json

@@ -13,7 +13,6 @@
 	"engines": {
 		"node": ">=12"
 	},
-	"type": "module",
 	"eslintConfig": {
 		"extends": [
 			"react-app",
@@ -119,4 +118,4 @@
 			"limit": "10 KB"
 		}
 	]
-}
+}

rollup.config.js

@@ -12,13 +12,14 @@ import autoprefixer from "autoprefixer";
 import path from 'path'
 
 export default [
+	// CommonJS
 	{
 		input: "src/index.tsx",
 		external: ["./lib/style.css", "lodash"],
 		output: {
 			dir: "./",
 			entryFileNames: "lib/cjs/index.js",
-			format: "es",
+			format: "cjs",
 			globals:{
 				"lodash": "_"
 			}

src/controls/controls.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useContext, useState } from "react";
 import ReactDOM from "react-dom";
 import { MapContext } from "../map";
+import "../styles/controls.css";
 
 export interface MapControlsProps {
 	templateGridStyle? : React.CSSProperties;
@@ -10,19 +11,6 @@ export const MapControls: FC<MapControlsProps> = ({ children, templateGridStyle
 	const map = useContext(MapContext);
 	const [overlay, setOverlay] = useState<Element | null>();
 
-	const customCssStyle: React.CSSProperties = {
-		display: "grid",
-		height: "100%",
-		gridTemplateColumns: "1fr 1fr",
-		gridTemplateRows: "1fr 1fr",
-		gridTemplateAreas: "top-left top-right bottom-left bottom-right",
-		alignContent: "space-between",
-		justifyContent: "space-between",
-		gap: "8px",
-		padding: "8px",
-		pointerEvents: "none",
-	};
-
 	if (map && !overlay) {
 		setOverlay(
 			map
@@ -33,9 +21,12 @@ export const MapControls: FC<MapControlsProps> = ({ children, templateGridStyle
 
 	return overlay
 		? ReactDOM.createPortal(
-			<div style={{ ...templateGridStyle, ...customCssStyle }}>{children}</div>,
-			overlay
-		)
+				<div className="controls" style={templateGridStyle}>
+					{children}
+				</div>,
+				overlay
+		  )
+
 		: null;
 };
 

src/controls/full-screen-control.tsx

@@ -2,6 +2,7 @@ import React, { FC, useContext, useEffect, useState } from "react";
 import { FullScreen } from "ol/control";
 import { Map } from "ol";
 import { MapContext } from "../map/map-context";
+import style from "./control.css";
 
 import screenfull from "screenfull";
 
@@ -73,7 +74,7 @@ export const FullScreenControl: FC<Props> = ({ CustomControl }) => {
 		/>
 	) : (
 		<div
-			style={{ position: "relative", width: "max-content" }}
+			className={style.control}
 			ref={(el) => {
 				el && defaultControl && el.appendChild(defaultControl);
 			}}

src/map/map.tsx

@@ -5,6 +5,7 @@ import React, {
 	FunctionComponent,
 	MutableRefObject,
 } from "react";
+import "../styles/map.css";
 import { MapContext } from "./map-context";
 import * as ol from "ol";
 import { useEvent } from "../events/use-event";