fix: restructure css files to match rollup config (postcss)

Author: meucamille

package-lock.json

@@ -51,7 +51,7 @@
 	},
 	"devDependencies": {
 		"@rollup/plugin-commonjs": "^11.1.0",
-		"@rollup/plugin-node-resolve": "^13.0.0",
+		"@rollup/plugin-node-resolve": "^13.3.0",
 		"@rollup/plugin-typescript": "^8.2.1",
 		"@semantic-release/changelog": "^5.0.1",
 		"@semantic-release/commit-analyzer": "^8.0.1",

package.json

@@ -1,17 +1,21 @@
+/* eslint-disable import/no-anonymous-default-export */
 import resolve from "@rollup/plugin-node-resolve";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import typescript from "@rollup/plugin-typescript";
 import del from "rollup-plugin-delete";
 import svgr from "@svgr/rollup";
 import commonjs from "@rollup/plugin-commonjs";
 import postcss from "rollup-plugin-postcss";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
 import { eslint } from "rollup-plugin-eslint";
 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",
@@ -30,7 +34,11 @@ export default [
 				noEmit: true
 			}),
 			peerDepsExternal(),
-			resolve(),
+			resolve({
+				jsnext: true,
+				main: true,
+				browser: true,
+			}),
 			svgr(),
 			commonjs({
 				include: "node_modules/**",
@@ -40,20 +48,19 @@ export default [
 				}
 			}),
 			postcss({
-				extensions: [".css"],
+				extensions: ['.css'],
+				extract: path.resolve("lib/style.css"),
+				modules: true,
 				plugins: [autoprefixer()],
-				sourceMap: true,
-				extract: true,
-				minimize: true
+			}),
+			nodeResolve({
+				extensions: ['.css']
 			}),
 			eslint({
 				exclude: [
-					"src/map/map.css",
-					"src/controls/controls.css",
-					"src/controls/controls.css",
+					"src/styles/*.css"
 				]
-			}),
-		],
-		external: ["lodash"]
+			})
+		]
 	},
 ];

rollup.config.js

@@ -1,7 +1,7 @@
 import React, { FC, useContext, useState } from "react";
 import ReactDOM from "react-dom";
 import { MapContext } from "../map";
-import "./controls.css";
+import "../styles/controls.css";
 
 export const MapControls: FC<{ templateGridStyle: React.CSSProperties }> = ({
 	children,

src/controls/controls.tsx

@@ -2,7 +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 "./control.css";
+import "../styles/control.css";
 
 import screenfull from "screenfull";
 

src/controls/full-screen-control.tsx

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

src/map/map.tsx

@@ -13,6 +13,7 @@
     ],
     "include": [
         "src/**/*.ts",
-        "src/**/*.tsx"
+        "src/**/*.tsx",
+        "src/**/*.css"
     ]
 }