webpack transform

package.json

@@ -303,6 +303,7 @@
     "@visx/tooltip": "3.3.0",
     "@welldone-software/why-did-you-render": "8.0.3",
     "@wyw-in-js/babel-preset": "^0.5.4",
+    "@wyw-in-js/webpack-loader": "^0.5.4",
     "angular": "1.8.3",
     "angular-bindonce": "0.3.1",
     "angular-route": "1.8.3",

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -150,6 +150,7 @@ export const MenuItem = React.memo(
       <ItemElement
         target={target}
         className={itemStyle}
+        data-test="hello :)"
         rel={target === '_blank' ? 'noopener noreferrer' : undefined}
         href={url}
         onClick={(event) => {

packages/grafana-ui/src/components/Table/TableNG/TableNG.styles.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @emotion/syntax-preference */
+import { css } from '@linaria/core';
+
+const menuItem = css`
+  // max-width: 200px;
+  outline: 4px solid tomato;
+  background-color: tomato;
+`;
+
+export const styles = { menuItem };

packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

@@ -1,5 +1,4 @@
 import 'react-data-grid/lib/styles.css';
-import { css } from '@linaria/core';
 import React, { useMemo, useState, useLayoutEffect } from 'react';
 import DataGrid, { Column, RenderRowProps, Row, SortColumn } from 'react-data-grid';
 import { Cell } from 'react-table';
@@ -14,6 +13,7 @@ import { TableCellDisplayMode, TableNGProps } from '../types';
 import { getCellColors } from '../utils';
 
 import { TableCellNG } from './Cells/TableCellNG';
+import { styles } from './TableNG.styles';
 
 const DEFAULT_CELL_PADDING = 6;
 
@@ -179,7 +179,7 @@ export function TableNG(props: TableNGProps) {
           onClick={() => {
             setIsInspecting(true);
           }}
-          className={menuItem}
+          className={styles.menuItem}
         />
       </>
     );
@@ -260,8 +260,3 @@ function getComparator(sortColumnType: string): Comparator {
       return (a, b) => String(a).localeCompare(String(b), undefined, { sensitivity: 'base' });
   }
 }
-
-// styles
-const menuItem = css`
-  max-width: 200px;
-`;

scripts/webpack/webpack.dev.js

@@ -72,6 +72,10 @@ module.exports = (env = {}) => {
             options: esbuildOptions,
           },
         },
+        {
+          test: /\.styles\.ts$/,
+          use: [{ loader: '@wyw-in-js/webpack-loader' }],
+        },
         require('./sass.rule.js')({
           sourceMap: false,
           preserveUrl: false,

yarn.lock

@@ -11995,6 +11995,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wyw-in-js/webpack-loader@npm:^0.5.4":
+  version: 0.5.4
+  resolution: "@wyw-in-js/webpack-loader@npm:0.5.4"
+  dependencies:
+    "@wyw-in-js/shared": "npm:0.5.4"
+    "@wyw-in-js/transform": "npm:0.5.4"
+  peerDependencies:
+    webpack: ^5.76.0
+  checksum: 10/c41f8e1f7663bb7adb4c8ec3acadce9339bbe75a42a87b08d888c02cac8fcb1b95e9e6887878d7a0847ffc32090d7f4261a2a78ece784b175ef8e20abd2a1035
+  languageName: node
+  linkType: hard
+
 "@xobotyi/scrollbar-width@npm:^1.9.5":
   version: 1.9.5
   resolution: "@xobotyi/scrollbar-width@npm:1.9.5"
@@ -19449,6 +19461,7 @@ __metadata:
     "@visx/tooltip": "npm:3.3.0"
     "@welldone-software/why-did-you-render": "npm:8.0.3"
     "@wyw-in-js/babel-preset": "npm:^0.5.4"
+    "@wyw-in-js/webpack-loader": "npm:^0.5.4"
     angular: "npm:1.8.3"
     angular-bindonce: "npm:0.3.1"
     angular-route: "npm:1.8.3"