Move to css-in-js approach

[jjti]

closes https://github.com/Lattice-Automation/seqviz/issues/171

This gets rid of the .css file and all the style loaders that are causing window/self issues during SSR'ing of SeqViz (via Next, namely). This also picks up a related fix (for self) in seqparse: https://github.com/Lattice-Automation/seqparse/releases/tag/0.2.1

This moves all the CSS styles into boring TS objects that are imported and passed directly to the components like:

export const highlight: React.CSSProperties = {
  cursor: "pointer",
  fill: "rgba(255, 251, 7, 0.25)",
  strokeWidth: 1,
};

      <rect
        className="la-vz-highlight"
        style={highlight}
      />

In all cases I tried to leave the original className in case consumers were already overwriting style via those classnames

[jjti]

@isaacguerreir @bugzpodder @drphelps ya'll in one way or another expressed that this was of interest. I hope you'll check out the latest patch release in 3.8.3 and let me know if this unblocks you (and/or causes new issues): https://github.com/Lattice-Automation/seqviz/releases/tag/3.8.3

I removed the CSS files (moving styling all into JS) and did some other small things to remove the messed up global/window refs that were failing our the Next builds:

before

import dynamic from "next/dynamic";
import * as React from "react";

const App = dynamic(() => import("../lib/App"), {
  ssr: false,
});

after

import * as React from "react";

import App from "../lib/App";

export default () => <App />;

[isaacguerreir]

Works like a charm. Thanks @jjtimmons! Believe or not, I think you unlock a lot of cool features I'm willing to do now that seqviz is SSR-compatible.

[bugzpodder]

Works like a charm. Thanks @jjtimmons! Believe or not, I think you unlock a lot of cool features I'm willing to do now that seqviz is SSR-compatible.

@isaacguerreir curious why SSR-compatibility impacts your abilities to do these features