Skip to content

Commit da884dc

Browse files
jthuangarmjthuangarm
committed
Add mini-css-extract-plugin for CSS handling
1 parent 6ae3540 commit da884dc

6 files changed

Lines changed: 49 additions & 7 deletions

File tree

‎package-lock.json‎

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -767,6 +767,7 @@
767767
"lzma-native": "8.0.6",
768768
"markdown-link-check": "^3.14.2",
769769
"markdownlint-cli": "^0.48.0",
770+
"mini-css-extract-plugin": "^2.10.2",
770771
"minimist": "^1.2.8",
771772
"node-fetch": "^3.3.2",
772773
"octokit": "^5.0.5",

‎src/views/component-viewer/component-viewer-webview-provider.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export class ComponentViewerWebviewProvider implements vscode.WebviewViewProvide
3232
private _view: vscode.WebviewView | undefined;
3333
private _dataChangeDisposable: vscode.Disposable | undefined;
3434
private _codiconCssUri: vscode.Uri | undefined;
35+
private _styleUri: vscode.Uri | undefined;
3536
private _scriptUri: vscode.Uri | undefined;
3637
private _loading = false;
3738
private _emptyMessage = '';
@@ -76,6 +77,11 @@ export class ComponentViewerWebviewProvider implements vscode.WebviewViewProvide
7677
);
7778
this._scriptUri = webviewView.webview.asWebviewUri(scriptPath);
7879

80+
const stylePath = vscode.Uri.joinPath(
81+
this._extensionUri, 'dist', 'webviews', 'tree-table.css'
82+
);
83+
this._styleUri = webviewView.webview.asWebviewUri(stylePath);
84+
7985
webviewView.webview.options = {
8086
enableScripts: true,
8187
localResourceRoots: [this._extensionUri],
@@ -85,6 +91,7 @@ export class ComponentViewerWebviewProvider implements vscode.WebviewViewProvide
8591
webviewView.webview.html = this.buildShell(
8692
webviewView.webview.cspSource ?? '',
8793
String(this._codiconCssUri),
94+
String(this._styleUri),
8895
String(this._scriptUri),
8996
);
9097

@@ -219,14 +226,15 @@ export class ComponentViewerWebviewProvider implements vscode.WebviewViewProvide
219226
/* HTML shell */
220227
/* ------------------------------------------------------------------ */
221228

222-
private buildShell(cspSource: string, codiconCssUri: string, scriptUri: string): string {
229+
private buildShell(cspSource: string, codiconCssUri: string, styleUri: string, scriptUri: string): string {
223230
return `<!DOCTYPE html>
224231
<html lang="en">
225232
<head>
226233
<meta charset="UTF-8">
227234
<meta name="viewport" content="width=device-width, initial-scale=1.0">
228-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${cspSource} 'unsafe-inline'; script-src ${cspSource}; font-src ${cspSource};">
235+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${cspSource}; script-src ${cspSource}; font-src ${cspSource};">
229236
<link rel="stylesheet" href="${codiconCssUri}">
237+
<link rel="stylesheet" href="${styleUri}">
230238
</head>
231239
<body>
232240
<div id="root"></div>

‎src/webviews/tree-table/src/TreeRow.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react';
17+
import React, { useLayoutEffect, useRef } from 'react';
1818
import type { FlatRow, TooltipContent } from './types';
1919

2020
interface TreeRowProps {
@@ -42,6 +42,13 @@ function buildTooltip(head: string | undefined, body: string | undefined): Toolt
4242

4343
function TreeRowInner({ row, lockable, lockTooltip, unlockTooltip, selected, onToggle, onLock, onSelect, onTooltipEnter, onTooltipLeave }: TreeRowProps): React.ReactElement {
4444
const indent = row.depth * INDENT_PX;
45+
const cellNameRef = useRef<HTMLTableCellElement>(null);
46+
47+
useLayoutEffect(() => {
48+
if (cellNameRef.current) {
49+
cellNameRef.current.style.paddingLeft = `${indent + 4}px`;
50+
}
51+
}, [indent]);
4552

4653
const rowClasses = ['row'];
4754
if (row.expanded) { rowClasses.push('expanded'); }
@@ -105,7 +112,7 @@ function TreeRowInner({ row, lockable, lockTooltip, unlockTooltip, selected, onT
105112
onMouseEnter={handleMouseEnter}
106113
onMouseLeave={onTooltipLeave}
107114
>
108-
<td className="cell-name" style={{ paddingLeft: indent + 4 }}>
115+
<td className="cell-name" ref={cellNameRef}>
109116
{toggle}<span className="name">{row.name}</span>
110117
</td>
111118
<td className="cell-value">

‎src/webviews/tree-table/src/TreeTable.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,6 @@ export function TreeTable({ vscodeApi }: TreeTableProps): React.ReactElement {
260260
<div
261261
ref={tooltipRef}
262262
className="custom-tooltip visible"
263-
style={{ left: tooltipPos.x + 12, top: tooltipPos.y + 16 }}
264263
>
265264
{tooltipContent.head && <strong>{tooltipContent.head}</strong>}
266265
{tooltipContent.bodyLines?.map((line, i) => (

‎webpack.config.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
const path = require('path');
2121
const webpack = require('webpack');
22+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2223

2324
/** @typedef {import('webpack').Configuration} WebpackConfig **/
2425
/** @type WebpackConfig */
@@ -68,13 +69,18 @@ const webviewConfig = {
6869
},
6970
{
7071
test: /\.css$/,
71-
use: ['style-loader', 'css-loader']
72+
use: [MiniCssExtractPlugin.loader, 'css-loader']
7273
}
7374
]
7475
},
7576
resolve: {
7677
extensions: ['.tsx', '.ts', '.js']
77-
}
78+
},
79+
plugins: [
80+
new MiniCssExtractPlugin({
81+
filename: '[name].css'
82+
})
83+
]
7884
// No vscode external — webviews run in the browser sandbox
7985
};
8086

0 commit comments

Comments
 (0)