Merge pull request #501 from mz8i/fix/css-import-order

Fix style issues caused by wrong css import order

app/src/frontend/app.tsx

@@ -1,6 +1,9 @@
 import React, { Fragment } from 'react';
 import { Link, Route, Switch } from 'react-router-dom';
 
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './app.css';
+
 import Header from './header';
 import MapApp from './map-app';
 import { Building } from './models/building';
@@ -19,9 +22,6 @@ import MyAccountPage from './user/my-account';
 import PasswordReset from './user/password-reset';
 import SignUp from './user/signup';
 
-import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
-import './app.css';
-
 
 interface AppProps {
     user?: User;

app/src/frontend/building/data-components/data-entry-group.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment, useState } from "react";
 
-import { DownIcon, RightIcon } from "../../components/icons";
-
 import './data-entry-group.css';
 
+import { DownIcon, RightIcon } from "../../components/icons";
+
 interface DataEntryGroupProps {
     /** Name of the group */
     name: string;

app/src/frontend/building/edit-history/building-edit-summary.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
+import './building-edit-summary.css';
+
 import { dataFields } from '../../data_fields';
 import { arrayToDictionary, parseDate } from '../../helpers';
 import { EditHistoryEntry } from '../../models/edit-history-entry';
 
 import { CategoryEditSummary } from './category-edit-summary';
 
-import './building-edit-summary.css';
-
 interface BuildingEditSummaryProps {
     historyEntry: EditHistoryEntry;
 }

app/src/frontend/building/edit-history/category-edit-summary.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { FieldEditSummary } from './field-edit-summary';
-
 import './category-edit-summary.css';
 
+import { FieldEditSummary } from './field-edit-summary';
+
 interface CategoryEditSummaryProps {
     category: string;
     fields: {

app/src/frontend/building/edit-history/edit-history.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 
+import './edit-history.css';
+
 import { Building } from '../../models/building';
 import { EditHistoryEntry } from '../../models/edit-history-entry';
 import ContainerHeader from '../container-header';
 
 import { BuildingEditSummary } from './building-edit-summary';
 
-import './edit-history.css';
-
 interface EditHistoryProps {
     building: Building;
 }

app/src/frontend/components/tooltip.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import { InfoIcon } from './icons';
-
 import './tooltip.css';
 
+import { InfoIcon } from './icons';
+
 interface TooltipProps {
     text: string;
 }

app/src/frontend/header.tsx

@@ -1,11 +1,11 @@
 import React, { Fragment } from 'react';
 import { NavLink } from 'react-router-dom';
 
+import './header.css';
+
 import { Logo } from './components/logo';
 import { User } from './models/user';
 
-import './header.css';
-
 
 interface HeaderProps {
     user: User;

app/src/frontend/map/legend.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import './legend.css';
+
 import { DownIcon, UpIcon } from '../components/icons';
 import { Logo } from '../components/logo';
 
-import './legend.css';
-
 const LEGEND_CONFIG = {
     location: {
         title: 'Location',

app/src/frontend/map/map.tsx

@@ -2,6 +2,9 @@ import { GeoJsonObject } from 'geojson';
 import React, { Component, Fragment } from 'react';
 import { AttributionControl, GeoJSON, Map, TileLayer, ZoomControl } from 'react-leaflet-universal';
 
+import 'leaflet/dist/leaflet.css';
+import './map.css';
+
 import { HelpIcon } from '../components/icons';
 import { Building } from '../models/building';
 
@@ -9,9 +12,6 @@ import Legend from './legend';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 
-import '../../../node_modules/leaflet/dist/leaflet.css';
-import './map.css';
-
 const OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9';
 
 interface ColouringMapProps {

app/src/frontend/map/search-box.tsx

@@ -1,10 +1,10 @@
 import { Point } from 'geojson';
 import React, { Component } from 'react';
 
-import { SearchIcon } from '../components/icons';
-
 import './search-box.css';
 
+import { SearchIcon } from '../components/icons';
+
 interface SearchResult {
     type: string;
     attributes: {

app/src/frontend/pages/about.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import './about.css';
+
 import Categories from '../building/categories';
 import SupporterLogos from '../components/supporter-logos';
 
-import './about.css';
-
 const AboutPage = () => (
     <article>
         <section className="main-col">

app/tslint.json

@@ -7,7 +7,7 @@
       {
         "grouped-imports": true,
         "groups": [
-            { "name": "css", "match": "\\.css$", "order": 40 },
+            { "name": "css", "match": "\\.css$", "order": 15 },
             { "name": "parent directories", "match": "^\\.\\.", "order": 20 },
             { "name": "current directory", "match": "^\\.", "order": 30 },
             { "name": "libraries", "match": ".*", "order": 10 }