debt: remove dependency on linaria, use css modules instead

.esbuild.config.js

@@ -1,6 +1,6 @@
 const esbuild = require("esbuild");
 const svgr = require("esbuild-plugin-svgr");
-const linaria = require("@linaria/esbuild");
+const css = require("esbuild-css-modules-plugin");
 
 const watch = process.argv.includes("--watch");
 const minify = !watch || process.argv.includes("--minify");
@@ -82,14 +82,6 @@ esbuild
  "process.env.NODE_ENV": defineProd ? '"production"' : '"development"',
  }
  : undefined,
- plugins: [
- svgr(),
- linaria.default({
- sourceMap: watch,
- babelOptions: {
- presets: ["@babel/preset-typescript", "@babel/preset-react"],
- },
- }),
- ],
+ plugins: [svgr(), css({ v2: true, filter: /\.css$/i })],
  })
  .catch(() => process.exit(1));

.vscode/settings.json

@@ -14,11 +14,14 @@
  "typescript.preferences.quoteStyle": "double",
  "editor.formatOnSave": true,
  "[typescriptreact]": {
-  "editor.defaultFormatter": "vscode.typescript-language-features"
+ "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features"
  },
+ "[css]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
  "editor.codeActionsOnSave": {
  "source.organizeImports": true
  }

media/editor/copyPaste.css

@@ -0,0 +1,19 @@
+.radio-list {
+ display: flex;
+ margin-bottom: 12px;
+}
+
+.radio-list > * {
+ margin-right: 8px;
+}
+
+.radio-container {
+ display: flex;
+ align-items: center;
+}
+
+.button-wrap {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+}

media/editor/copyPaste.tsx

@@ -1,14 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license
 
-import { styled } from "@linaria/react";
 import * as base64 from "js-base64";
 import React, { useCallback, useMemo, useState } from "react";
 import { MessageType, PasteMode } from "../../shared/protocol";
+import _style from "./copyPaste.css";
 import { useUniqueId } from "./hooks";
 import { messageHandler } from "./state";
+import { throwOnUndefinedAccessInDev } from "./util";
 import { VsButton, VsWidgetPopover } from "./vscodeUi";
 
+const style = throwOnUndefinedAccessInDev(_style);
+
 const enum Encoding {
  Base64 = "base64",
  Utf8 = "utf-8",
@@ -35,19 +38,6 @@ const decode: { [key in Encoding]: (data: string) => Uint8Array } = {
  [Encoding.Utf8]: d => new TextEncoder().encode(d),
 };
 
-const RadioList = styled.div`
- display: flex;
- margin-bottom: 12px;
-
- > * {
- margin-right: 8px;
- }
-`;
-
-const RadioContainer = styled.div`
- display: flex;
- align-items: center;
-`;
 
 const EncodingOption: React.FC<{
  value: Encoding;
@@ -56,7 +46,7 @@ const EncodingOption: React.FC<{
  onChecked: (encoding: Encoding) => void;
 }> = ({ value, enabled, checked, onChecked }) => {
  const id = useUniqueId();
- return <RadioContainer>
+ return <div className={style.radioContainer}>
  <input
  id={id}
  type="radio"
@@ -71,7 +61,7 @@ const EncodingOption: React.FC<{
  }}
  />
  <label htmlFor={id}>{encodingLabel[value]}</label>
- </RadioContainer>;
+ </div>;
 };
 
 const InsertionOption: React.FC<{
@@ -81,7 +71,7 @@ const InsertionOption: React.FC<{
  onChecked: (encoding: PasteMode) => void;
 }> = ({ value, label, checked, onChecked }) => {
  const id = useUniqueId();
- return <RadioContainer>
+ return <div className={style.radioContainer}>
  <input
  id={id}
  type="radio"
@@ -95,15 +85,9 @@ const InsertionOption: React.FC<{
  }}
  />
  <label htmlFor={id}>{label}</label>
- </RadioContainer>;
+ </div>;
 };
 
-const ButtonWrap = styled.div`
- display: flex;
- width: 100%;
- justify-content: center;
-`;
-
 export const PastePopup: React.FC<{
  context?: { target: HTMLElement; data: string; offset: number; };
  hide: () => void;
@@ -128,28 +112,28 @@ export const PastePopup: React.FC<{
  }, [decoded, mode, hide, context?.offset]);
 
  return <VsWidgetPopover anchor={context?.target || null} hide={hide} visible={!!context}>
- <RadioList>
+ <div className={style.radioList}>
  <span>Paste as:</span>
  {encodings.map(e => <EncodingOption
  key={e}
  value={e}
  enabled={isData[e](context?.data || "")}
  checked={e === encoding}
  onChecked={setEncoding}
-  />
+ />
  )}
- </RadioList>
- <RadioList>
+ </div>
+ <div className={style.radioList}>
  <span>Paste mode:</span>
  <InsertionOption label="Replace" checked={mode == PasteMode.Replace} value={PasteMode.Replace} onChecked={setMode} />
  <InsertionOption label="Insert" checked={mode == PasteMode.Insert} value={PasteMode.Insert} onChecked={setMode} />
- </RadioList>
- <ButtonWrap>
+ </div>
+ <div className={style.buttonWrap}>
  <VsButton disabled={!decodedValid} onClick={doReplace}>
  {decodedValid
  ? <>{mode === PasteMode.Replace ? "Replace" : "Insert"} {decoded.length} bytes</>
  : "Encoding Error"}
-  </VsButton>
- </ButtonWrap>
+ </VsButton>
+ </div>
  </VsWidgetPopover>;
 };

media/editor/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+ const classMap: Record<string, string>;
+ export default classMap;
+}

media/editor/dataDisplay.css

@@ -0,0 +1,81 @@
+.header {
+ font-weight: bold;
+ color: var(--vscode-editorLineNumber-activeForeground);
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+}
+
+.address {
+ font-family: var(--vscode-editor-font-family);
+ color: var(--vscode-editorLineNumber-foreground);
+ text-transform: uppercase;
+ line-height: var(--cell-size);
+}
+
+.data-cell-group {
+ padding: 0 calc(var(--cell-size) / 4);
+ display: inline-flex;
+ cursor: default;
+ user-select: text;
+}
+
+.non-graphic-char {
+ color: var(--vscode-tab-unfocusedInactiveForeground);
+}
+
+.data-cell-hovered {
+ background: var(--vscode-editor-hoverHighlightBackground);
+}
+
+.data-cell-selected {
+ background: var(--vscode-editor-selectionBackground);
+ color: var(--vscode-editor-selectionForeground);
+}
+
+.data-cell-selected-hovered {
+ background: var(--vscode-editor-inactiveSelectionBackground);
+ color: inherit;
+}
+
+.data-cell-unsaved {
+ background: var(--vscode-minimapGutter-modifiedBackground);
+}
+
+.data-display {
+ position: sticky;
+ inset: 0;
+ height: 0px;
+}
+
+.data-inspector-wrap {
+ position: absolute;
+ top: var(--cell-size);
+ font-weight: normal;
+ z-index: 2;
+ line-height: var(--cell-size);
+ left: calc(var(--cell-size) / 4);
+ right: var(--scrollbar-width);
+ overflow: hidden;
+}
+
+.data-inspector-wrap dl {
+ gap: 0 0.4rem !important;
+}
+
+.data-page {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.data-row {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+}
+
+.data-cell-char {
+ width: calc(var(--cell-size) * 0.7) !important;
+}