[#140] introduced ConstructibleStyleSheets utility class allowing to …

…centralize usages of reusable sass stylesheets
CovidTrackerFr · May 4, 2021 · 3aeda9f · 3aeda9f
1 parent ff2295f
commit 3aeda9f
Show file tree

Hide file tree

Showing 14 changed files with 33 additions and 31 deletions.
diff --git a/src/components/vmd-appointment-card.component.ts b/src/components/vmd-appointment-card.component.ts
@@ -11,10 +11,9 @@ import {
 import {Router} from "../routing/Router";
 import {Dates} from "../utils/Dates";
 import appointmentCardCss from "./vmd-appointment-card.component.scss";
-import globalCss from "../styles/global.scss";
 import {Strings} from "../utils/Strings";
 import {TemplateResult} from "lit-html";
-import {styleMap} from "lit-html/directives/style-map";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 type LieuCliqueContext = {lieu: Lieu};
 export type LieuCliqueCustomEvent = CustomEvent<LieuCliqueContext>;
@@ -24,7 +23,7 @@ export class VmdAppointmentCardComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`${unsafeCSS(appointmentCardCss)}`,
         css`
         `

diff --git a/src/components/vmd-appointment-metadata.component.ts b/src/components/vmd-appointment-metadata.component.ts
@@ -1,6 +1,6 @@
 import {LitElement, html, customElement, property, css, unsafeCSS} from 'lit-element';
 import {classMap} from "lit-html/directives/class-map";
-import globalCss from "../styles/global.scss";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 export type MetadataWidthType = 'full-width'|'fit-to-content'|'3col-equally-distributed'
 const METADATA_WIDTH_CLASSES: {[type in MetadataWidthType]: string} = {
@@ -15,7 +15,7 @@ export class VmdAppointmentMetadataComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`
         `
     ];

diff --git a/src/components/vmd-button-switch.component.ts b/src/components/vmd-button-switch.component.ts
@@ -1,8 +1,8 @@
 import {css, customElement, html, LitElement, property, unsafeCSS} from "lit-element";
-import globalCss from "../styles/global.scss";
 import buttonSwitchCss from "./vmd-button-switch.component.scss";
 import {repeat} from "lit-html/directives/repeat";
 import {classMap} from "lit-html/directives/class-map";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 export type ValueStrCustomEvent<T extends string> = CustomEvent<{value: T}>;
 
@@ -16,7 +16,7 @@ export class VmdButtonSwitchComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`${unsafeCSS(buttonSwitchCss)}`,
         css`
             :host {

diff --git a/src/components/vmd-commune-selector.component.ts b/src/components/vmd-commune-selector.component.ts
@@ -11,10 +11,10 @@ import {classMap} from "lit-html/directives/class-map";
 import {Commune, Departement} from "../state/State";
 import {repeat} from "lit-html/directives/repeat";
 import communeSelectorCss from "./vmd-commune-selector.component.scss";
-import globalCss from "../styles/global.scss";
 import {Strings} from "../utils/Strings";
 import {TemplateResult} from "lit-html";
 import {DirectiveFn} from "lit-html/lib/directive";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 
 export type AutocompleteTriggered = { value: string };
@@ -26,7 +26,7 @@ export class VmdCommuneSelectorComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`${unsafeCSS(communeSelectorCss)}`,
         css`
         `

diff --git a/src/components/vmd-departement-selector.component.ts b/src/components/vmd-departement-selector.component.ts
@@ -1,7 +1,7 @@
 import {LitElement, html, customElement, property, css, unsafeCSS} from 'lit-element'
 import {repeat} from "lit-html/directives/repeat";
-import globalCss from "../styles/global.scss";
 import {CodeDepartement, Departement} from "../state/State";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 export type DepartementSelected = { departement: Departement|undefined };
 
@@ -10,7 +10,7 @@ export class VmdDepartementSelectorComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`
             :host {
                 display: block;

diff --git a/src/components/vmd-selector.component.ts b/src/components/vmd-selector.component.ts
@@ -1,6 +1,6 @@
 import {css, customElement, html, LitElement, property, unsafeCSS} from "lit-element";
-import globalCss from "../styles/global.scss";
 import {repeat} from "lit-html/directives/repeat";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 export type ValueStrCustomEvent<T extends string> = CustomEvent<{value: T}>;
 
@@ -14,7 +14,7 @@ export class VmdSelectorComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`
             :host {
                 display: block;

diff --git a/src/components/vmd-tranche-age-selector.component.ts b/src/components/vmd-tranche-age-selector.component.ts
@@ -1,6 +1,6 @@
 import {css, customElement, html, LitElement, property, unsafeCSS} from "lit-element";
-import globalCss from "../styles/global.scss";
 import {CodeTrancheAge, TrancheAge} from "../state/State";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 export type TrancheAgeSelectionne = { trancheAge: TrancheAge|undefined };
 
@@ -9,7 +9,7 @@ export class VmdTrancheAgeSelectorComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`
             :host {
                 display: block;

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,3 @@
-import './styles/global.scss'
 import './vmd-app.component'
 import './components/vmd-tranche-age-selector.component'
 import './components/vmd-departement-selector.component'

diff --git a/src/styles/ConstructibleStyleSheets.ts b/src/styles/ConstructibleStyleSheets.ts
@@ -0,0 +1,7 @@
+import {css, unsafeCSS} from "lit-element";
+import globalCss from "./global.scss";
+import homeCss from "../views/vmd-home.view.scss";
+
+
+export const CSS_Global = css`${unsafeCSS(globalCss)}`
+export const CSS_Home = css`${unsafeCSS(homeCss)}`
diff --git a/src/views/vmd-home.view.ts b/src/views/vmd-home.view.ts
@@ -1,7 +1,5 @@
 import {css, customElement, html, LitElement, property, unsafeCSS} from 'lit-element';
 import {Router} from "../routing/Router";
-import globalCss from "../styles/global.scss";
-import homeViewCss from "./vmd-home.view.scss";
 import {
     Commune,
     Departement,
@@ -16,14 +14,15 @@ import {
     CommuneSelected,
     DepartementSelected
 } from "../components/vmd-commune-selector.component";
+import {CSS_Global, CSS_Home} from "../styles/ConstructibleStyleSheets";
 
 @customElement('vmd-home')
 export class VmdHomeView extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
-        css`${unsafeCSS(homeViewCss)}`,
+        CSS_Global,
+        CSS_Home,
         css`
             :host {
                 display: block;

diff --git a/src/views/vmd-lieux.view.ts b/src/views/vmd-lieux.view.ts
@@ -1,11 +1,11 @@
 import {css, customElement, html, LitElement, unsafeCSS} from 'lit-element';
-import globalCss from "../styles/global.scss";
 import {Icon, map, marker, tileLayer} from 'leaflet'
 import leafletCss from 'leaflet/dist/leaflet.css';
 import leafletMarkerCss from 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 // @ts-ignore
 import {MarkerClusterGroup}  from 'leaflet.markercluster'
 import {Router} from "../routing/Router";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 // Code imported (and refactored a little bit)
 // from https://github.com/rozierguillaume/covidtracker-tools/blob/main/src/ViteMaDose/carteCentres.html
@@ -27,7 +27,7 @@ export class VmdLieuxView extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`${unsafeCSS(leafletCss)}`,
         css`${unsafeCSS(leafletMarkerCss)}`,
         css`

diff --git a/src/views/vmd-rdv.view.ts b/src/views/vmd-rdv.view.ts
@@ -1,7 +1,6 @@
 import {css, customElement, html, LitElement, property, unsafeCSS} from 'lit-element';
 import {repeat} from "lit-html/directives/repeat";
 import {styleMap} from "lit-html/directives/style-map";
-import globalCss from "../styles/global.scss";
 import {Router} from "../routing/Router";
 import rdvViewCss from "./vmd-rdv.view.scss";
 import distanceEntreDeuxPoints from "../distance"
@@ -31,14 +30,15 @@ import {Analytics} from "../utils/Analytics";
 import {LieuCliqueCustomEvent} from "../components/vmd-appointment-card.component";
 import {setDebouncedInterval} from "../utils/Schedulers";
 import {ArrayBuilder} from "../utils/Arrays";
+import {CSS_Global} from "../styles/ConstructibleStyleSheets";
 
 const MAX_DISTANCE_CENTRE_IN_KM = 100;
 
 export abstract class AbstractVmdRdvView extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`${unsafeCSS(rdvViewCss)}`,
         css`
         `

diff --git a/src/views/vmd-statistiques.view.ts b/src/views/vmd-statistiques.view.ts
@@ -3,20 +3,18 @@ import '../components/graphs/vmd-stats-by-date-centres-graph.component'
 
 import {css, customElement, html, LitElement, property, unsafeCSS} from 'lit-element';
 
-import globalCss from "../styles/global.scss";
-import homeViewCss from "../views/vmd-home.view.scss";
-
 import {
     State,
     StatsByDate,
     StatsLieu,
 } from "../state/State";
+import {CSS_Global, CSS_Home} from "../styles/ConstructibleStyleSheets";
 
 @customElement('vmd-statistiques')
 export class VmdLieuxStatistiques extends LitElement {
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
-        css`${unsafeCSS(homeViewCss)}`,
+        CSS_Global,
+        CSS_Home,
         css`
             :host {
                 display: block;

diff --git a/src/vmd-app.component.ts b/src/vmd-app.component.ts
@@ -1,13 +1,13 @@
 import {LitElement, html, customElement, property, css, unsafeCSS} from 'lit-element';
 import {Router, SlottedTemplateResultFactory} from "./routing/Router";
-import globalCss from './styles/global.scss'
+import {CSS_Global} from "./styles/ConstructibleStyleSheets";
 
 @customElement('vmd-app')
 export class VmdAppComponent extends LitElement {
 
     //language=css
     static styles = [
-        css`${unsafeCSS(globalCss)}`,
+        CSS_Global,
         css`
             .appLogo {}
             .appLogo._phone {