fix(front): move css loading from js => css (#457)

## 📝 Description
The current CSS processing pipeline does not support loading CSS styles
from JavaScript. Because of this, we've moved loading styles from JS
files to the `main.css` file.

## ✅ Checklist
- [x] I have tested this change
- [ ] This change requires documentation update

Author: skipi

front/assets/css/main.css

@@ -1,3 +1,15 @@
+/* Vendor library styles */
+@import "tippy.js/dist/tippy.css";
+@import "tippy.js/dist/svg-arrow.css";
+
+@import 'tom-select/dist/css/tom-select.min.css';
+
+@import 'pikaday/css/pikaday.css';
+
+@import 'billboard.js/dist/billboard.min.css';
+
+@import "github-markdown-css/github-markdown-light.css";
+
 /* Main CSS entry point - combines all CSS files */
 @import "./app-semaphore.css";
 @import "./app.css";

front/assets/js/dashboard/interval_selector.js

@@ -1,7 +1,6 @@
 import $ from "jquery"; // live on click event
 
 import pikaday from 'pikaday';
-import 'pikaday/css/pikaday.css';
 import querystringify from 'querystringify';
 
 export class IntervalSelector {

front/assets/js/deployments/components/subjects.js

@@ -4,7 +4,7 @@ export default {
   }
 }
 
-import 'tom-select/dist/css/tom-select.min.css'
+
 import TomSelect from 'tom-select'
 
 class SubjectsComponent {

front/assets/js/deployments/history_page.js

@@ -2,7 +2,6 @@ import { QueryList } from "../query_list"
 import { Props } from "../props"
 import _ from "lodash"
 
-import 'pikaday/css/pikaday.css';
 import pikaday from 'pikaday';
 
 export default {

front/assets/js/flaky_tests/components/disruption_history_chart.tsx

@@ -1,6 +1,5 @@
 import { createRef } from "preact";
 import bb, { bar } from "billboard.js";
-import 'billboard.js/dist/billboard.min.css';
 import { HistoryItem } from "../types/flaky_test_item";
 import { useEffect } from "preact/hooks";
 

front/assets/js/flaky_tests/components/history_chart.tsx

@@ -1,6 +1,5 @@
 import { Fragment, createRef } from "preact";
 import bb, { bar } from "billboard.js";
-import 'billboard.js/dist/billboard.min.css';
 import { HistoryItem } from "../types/flaky_test_item";
 import { useEffect } from "preact/hooks";
 import { ChartHelpers } from "js/toolbox";

front/assets/js/flaky_tests/components/top_flaky_charts.tsx

@@ -1,6 +1,5 @@
 
 import * as stores from "../stores";
-import 'billboard.js/dist/billboard.min.css';
 import { Status } from "../types";
 import { LoadingIndicator } from "./loading_indicator";
 import { Message } from "./flaky_test_table";

front/assets/js/flaky_tests/pages/flaky_tests_page.tsx

@@ -6,8 +6,6 @@ import * as types from "../types";
 // @ts-ignore
 import { Notice } from "js/notice";
 import * as components from "../components";
-import 'tippy.js/dist/tippy.css'; // optional
-import 'tippy.js/themes/light.css';
 import { RequestStatus, Status } from "../types";
 import { FetchData } from "../network/request";
 import { FlakyTestItem, HistoryItem } from "../types/flaky_test_item";

front/assets/js/insights/components/custom_dashboards.tsx

@@ -16,8 +16,6 @@ import { DashboardItemCard } from './dashboard_item_card';
 import { InsightsType, typeByMetric } from '../types/insights_type';
 import { empty_custom_dashboard } from './zero_state/empty_custom_dashboard';
 import Tippy from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css'; // optional
-import 'tippy.js/themes/light.css';
 import { handleMetricDatePickerChanged } from "../util/event_handlers";
 import * as stores from "../stores";
 

front/assets/js/insights/components/dashboard_item_card.tsx

@@ -2,8 +2,6 @@ import { DashboardItem } from '../types/dashboard';
 import { InsightsType, typeByMetric } from '../types/insights_type';
 import * as customCharts from './custom_charts';
 import Tippy from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css'; // optional
-import 'tippy.js/themes/light.css';
 import { useState } from 'preact/hooks';
 import { metricFromNumber } from "../util/metric";