diff --git a/package.json b/package.json index 7c59be1f63e..148924c491e 100644 --- a/package.json +++ b/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", diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx index 5bdfb00a682..de57f925e98 100644 --- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx @@ -150,6 +150,7 @@ export const MenuItem = React.memo( { diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.styles.ts b/packages/grafana-ui/src/components/Table/TableNG/TableNG.styles.ts new file mode 100644 index 00000000000..d5136987960 --- /dev/null +++ b/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 }; diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index ccc2318b03f..a2942767481 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/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; -`; diff --git a/scripts/webpack/webpack.dev.js b/scripts/webpack/webpack.dev.js index 94977e64e03..8138f4a2a6f 100644 --- a/scripts/webpack/webpack.dev.js +++ b/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, diff --git a/yarn.lock b/yarn.lock index 8fb2d06cb00..c1ef28f631c 100644 --- a/yarn.lock +++ b/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"