fix: replace direct CSS imports with Emotion CSS-in-JS

Grafana's plugin validator blocks direct .css imports
(code-rules-no-direct-css-imports). Fold the json-view and panel
stylesheets into the panel's Emotion getStyles as scoped selectors,
delete the standalone CSS files, and bump to 1.0.1.

Styling is unchanged: computed colors and layout are identical to
1.0.0 (verified in localdev).

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: idelvall

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.1
+
+- Replace direct CSS imports with Emotion CSS-in-JS (scoped styles) so the plugin passes Grafana's `code-rules-no-direct-css-imports` validation. No visual or behavioral changes.
+
 ## 1.0.0
 
 Initial public release.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "earthly-jsontree-panel",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Grafana panel that renders JSON/JSONB query results as a collapsible, copyable tree.",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",

src/json-view/json-view.ts

@@ -1,5 +1,3 @@
-import './style.css';
-
 import getDataType from './utils/getDataType';
 import { listen, detach, element } from './utils/dom';
 

src/json-view/style.css

@@ -5,7 +5,6 @@ import { JsonTreeOptions } from '../types';
 import { css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
 import jsonview from '../json-view';
-import './styles.css';
 
 type Props = PanelProps<JsonTreeOptions>;
 
@@ -20,6 +19,91 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     flexDirection: 'column',
     boxSizing: 'border-box',
+
+    '& .jsonTreeRoot': {
+      height: '100%',
+      width: '100%',
+      overflow: 'auto',
+      scrollbarWidth: 'thin',
+    },
+    '& .jsonTreeRoot.compact *': {
+      lineHeight: 1.25,
+      fontSize: 12,
+    },
+
+    '& .json-container': {
+      fontFamily: 'monospace',
+      fontSize: 12,
+      backgroundColor: 'transparent',
+      color: '#808080',
+      boxSizing: 'border-box',
+    },
+    '& .json-container .line': {
+      margin: '4px 0',
+      display: 'flex',
+      justifyContent: 'flex-start',
+    },
+    '& .json-container .caret-icon': {
+      width: 18,
+      textAlign: 'center',
+      cursor: 'pointer',
+    },
+    '& .json-container .empty-icon': {
+      width: 18,
+    },
+    '& .json-container .json-type': {
+      marginRight: 4,
+      marginLeft: 4,
+    },
+    '& .json-container .json-key': {
+      color: '#eeeeee',
+      marginRight: 4,
+      marginLeft: 4,
+      minWidth: 12,
+    },
+    '& .json-container .json-index': {
+      marginRight: 4,
+      marginLeft: 4,
+    },
+    '& .json-container .json-value': {
+      flex: 1,
+      minWidth: 0,
+      wordBreak: 'break-word',
+      whiteSpace: 'normal',
+      marginLeft: 4,
+    },
+    '& .json-container .json-number': {
+      color: '#ffb86c',
+    },
+    '& .json-container .json-boolean, & .json-container .json-null': {
+      color: '#83ff50',
+    },
+    '& .json-container .json-string': {
+      color: '#89b0c7',
+    },
+    '& .json-container .hidden': {
+      display: 'none',
+    },
+    '& .json-container .fas': {
+      display: 'inline-block',
+      borderStyle: 'solid',
+      width: 0,
+      height: 0,
+    },
+    '& .json-container .fa-caret-down': {
+      borderWidth: '6px 5px 0 5px',
+      borderColor: '#808080 transparent',
+    },
+    '& .json-container .fa-caret-right': {
+      borderWidth: '5px 0 5px 6px',
+      borderColor: 'transparent transparent transparent #808080',
+    },
+    '& .fa-caret-right:before': {
+      content: '""',
+    },
+    '& .fa-caret-down:before': {
+      content: '""',
+    },
   })
 });