use css for custom model box from local file (graphhopper#318)

Author: karussell

src/map/MapOptions.modules.css renamed to src/map/MapOptions.module.css

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import styles from './MapOptions.modules.css'
+import styles from './MapOptions.module.css'
 import { MapOptionsStoreState } from '@/stores/MapOptionsStore'
 import Dispatcher from '@/stores/Dispatcher'
 import { SelectMapLayer, ToggleRoutingGraph, ToggleUrbanDensityLayer } from '@/actions/Actions'

src/map/MapOptions.tsx

@@ -0,0 +1,15 @@
+.cm-s-default .cm-string {
+    color: #067D17;
+}
+
+.cm-s-default .cm-property {
+    color: #871094;
+}
+
+.cm-s-default .cm-number {
+    color: #1750EB;
+}
+
+.cm-s-default .cm-atom {
+    color: #0033B3;
+}

src/sidebar/CustomModelBox.css

@@ -1,8 +1,7 @@
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/lint/lint.css'
-// todo: this belongs to this app and we should not take it from the demo...
-import 'custom-model-editor/demo/style.css'
+import '@/sidebar/CustomModelBox.css'
 import styles from '@/sidebar/CustomModelBox.module.css'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { create } from 'custom-model-editor/src/index'

src/sidebar/CustomModelBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './RoutingProfiles.modules.css'
+import styles from './RoutingProfiles.module.css'
 import Dispatcher from '@/stores/Dispatcher'
 import { ClearRoute, DismissLastError, SetCustomModelBoxEnabled, SetVehicleProfile } from '@/actions/Actions'
 import { RoutingProfile } from '@/api/graphhopper'

src/sidebar/search/routingProfiles/RoutingProfiles.modules.css renamed to src/sidebar/search/routingProfiles/RoutingProfiles.module.css

@@ -57,7 +57,9 @@ module.exports = {
                     {
                         loader: 'css-loader',
                         options: {
-                            modules: true,
+                            modules: {
+                                auto: (resourcePath) => resourcePath.endsWith(".module.css")
+                            },
                         },
                     },
                 ],

src/sidebar/search/routingProfiles/RoutingProfiles.tsx

@@ -22,6 +22,7 @@ const develop = {
                         loader: 'css-loader',
                         options: {
                             modules: {
+                                auto: (resourcePath) => resourcePath.endsWith(".module.css"),
                                 localIdentName: '[path][name]__[local]',
                             },
                         },