Scope tailwind preflight styles (#740)

Anywidget loads CSS from the _css attribute to the global scope. A
widget most take care not to conflict with any other CSS selectors. The
stylesheet from the tailwind preflight, loaded with `@tailwind base`,
will conflict with stylesheets from Sphinx themes (#698) or the VScode
interactive display (#696).

To scope the preflight stylesheet to descendants of a wrapper should fix
that.

---------

Co-authored-by: Kyle Barron <[email protected]>

Author: Bjoern-Rapp

src/globals.css

@@ -1,3 +1,32 @@
-@tailwind base;
+div.lonboard {
+  color: #11181c;
+  color: hsl(var(--nextui-foreground));
+  background-color: #fff;
+  background-color: hsl(var(--nextui-background));
+  margin: 0;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Ubuntu,
+    Cantarell,
+    Noto Sans,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    Segoe UI Symbol,
+    "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+
+  @tailwind base;
+}
+
 @tailwind components;
 @tailwind utilities;

src/index.tsx

@@ -213,68 +213,72 @@ function App() {
   );
 
   return (
-    <div
-      id={`map-${mapId}`}
-      className="flex"
-      style={{ height: mapHeight ? `${mapHeight}px` : "24rem" }}
-    >
-      <Toolbar />
-
-      {showTooltip && highlightedFeature && (
-        <SidePanel
-          info={highlightedFeature}
-          onClose={() => actorRef.send({ type: "Close side panel" })}
-        />
-      )}
-      <div className="bg-red-800 h-full w-full relative">
-        <DeckGL
-          style={{ width: "100%", height: "100%" }}
-          initialViewState={
-            ["longitude", "latitude", "zoom"].every((key) =>
-              Object.keys(initialViewState).includes(key),
-            )
-              ? initialViewState
-              : DEFAULT_INITIAL_VIEW_STATE
-          }
-          controller={true}
-          layers={
-            bboxSelectPolygonLayer
-              ? layers.concat(bboxSelectPolygonLayer)
-              : layers
-          }
-          getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
-          pickingRadius={pickingRadius}
-          onClick={onMapClickHandler}
-          onHover={onMapHoverHandler}
-          useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
-          // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
-          _typedArrayManagerProps={{
-            overAlloc: 1,
-            poolSize: 0,
-          }}
-          onViewStateChange={(event) => {
-            const { viewState } = event;
-
-            // This condition is necessary to confirm that the viewState is
-            // of type MapViewState.
-            if ("latitude" in viewState) {
-              const { longitude, latitude, zoom, pitch, bearing } = viewState;
-              setViewState({
-                longitude,
-                latitude,
-                zoom,
-                pitch,
-                bearing,
-              });
+    <div className="lonboard">
+      <div
+        id={`map-${mapId}`}
+        className="flex"
+        style={{ height: mapHeight ? `${mapHeight}px` : "24rem" }}
+      >
+        <Toolbar />
+
+        {showTooltip && highlightedFeature && (
+          <SidePanel
+            info={highlightedFeature}
+            onClose={() => actorRef.send({ type: "Close side panel" })}
+          />
+        )}
+        <div className="bg-red-800 h-full w-full relative">
+          <DeckGL
+            style={{ width: "100%", height: "100%" }}
+            initialViewState={
+              ["longitude", "latitude", "zoom"].every((key) =>
+                Object.keys(initialViewState).includes(key),
+              )
+                ? initialViewState
+                : DEFAULT_INITIAL_VIEW_STATE
             }
-          }}
-          parameters={parameters || {}}
-        >
-          <Map
-            mapStyle={mapStyle || DEFAULT_MAP_STYLE}
-            customAttribution={customAttribution}
-          ></Map>
-        </DeckGL>
+            controller={true}
+            layers={
+              bboxSelectPolygonLayer
+                ? layers.concat(bboxSelectPolygonLayer)
+                : layers
+            }
+            getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
+            pickingRadius={pickingRadius}
+            onClick={onMapClickHandler}
+            onHover={onMapHoverHandler}
+            useDevicePixels={
+              isDefined(useDevicePixels) ? useDevicePixels : true
+            }
+            // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
+            _typedArrayManagerProps={{
+              overAlloc: 1,
+              poolSize: 0,
+            }}
+            onViewStateChange={(event) => {
+              const { viewState } = event;
+
+              // This condition is necessary to confirm that the viewState is
+              // of type MapViewState.
+              if ("latitude" in viewState) {
+                const { longitude, latitude, zoom, pitch, bearing } = viewState;
+                setViewState({
+                  longitude,
+                  latitude,
+                  zoom,
+                  pitch,
+                  bearing,
+                });
+              }
+            }}
+            parameters={parameters || {}}
+          >
+            <Map
+              mapStyle={mapStyle || DEFAULT_MAP_STYLE}
+              customAttribution={customAttribution}
+            ></Map>
+          </DeckGL>
+        </div>
       </div>
     </div>
   );