From d4e12a2962584f5c11dc3785532e21bb2c9c988f Mon Sep 17 00:00:00 2001 From: David Luzar Date: Thu, 28 Jan 2021 12:58:35 +0100 Subject: [PATCH] reuse scss variables in js for SSOT (#2867) --- src/components/Avatar.scss | 2 +- src/components/CollabButton.scss | 2 +- src/components/ColorPicker.scss | 2 +- src/components/ContextMenu.scss | 2 +- src/components/Dialog.scss | 2 +- src/components/ExportDialog.scss | 2 +- src/components/HelpDialog.scss | 2 +- src/components/HintViewer.scss | 2 +- src/components/IconPicker.scss | 2 +- src/components/Modal.scss | 2 +- src/components/PasteChartDialog.scss | 2 +- src/components/Stats.scss | 2 +- src/components/TextInput.scss | 2 +- src/components/Toast.scss | 2 +- src/components/ToolIcon.scss | 2 +- src/components/Tooltip.scss | 2 +- src/css/styles.scss | 2 +- src/css/{_variables.scss => variables.module.scss} | 4 ++++ src/excalidraw-app/collab/RoomDialog.scss | 2 +- src/is-mobile.tsx | 6 ++---- 20 files changed, 24 insertions(+), 22 deletions(-) rename src/css/{_variables.scss => variables.module.scss} (73%) diff --git a/src/components/Avatar.scss b/src/components/Avatar.scss index 61f084b7..d077d916 100644 --- a/src/components/Avatar.scss +++ b/src/components/Avatar.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .Avatar { diff --git a/src/components/CollabButton.scss b/src/components/CollabButton.scss index fd51cc05..5d9a86de 100644 --- a/src/components/CollabButton.scss +++ b/src/components/CollabButton.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .CollabButton.is-collaborating { diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker.scss index 23a6aac8..cb29e66d 100644 --- a/src/components/ColorPicker.scss +++ b/src/components/ColorPicker.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .color-picker { diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss index 8661cb93..f4ec1142 100644 --- a/src/components/ContextMenu.scss +++ b/src/components/ContextMenu.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .context-menu { diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss index c00a9088..37d19219 100644 --- a/src/components/Dialog.scss +++ b/src/components/Dialog.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .Dialog { diff --git a/src/components/ExportDialog.scss b/src/components/ExportDialog.scss index 3086d72b..c47cdf40 100644 --- a/src/components/ExportDialog.scss +++ b/src/components/ExportDialog.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .ExportDialog__preview { diff --git a/src/components/HelpDialog.scss b/src/components/HelpDialog.scss index 88e1eb69..6b5701b8 100644 --- a/src/components/HelpDialog.scss +++ b/src/components/HelpDialog.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .HelpDialog h3 { diff --git a/src/components/HintViewer.scss b/src/components/HintViewer.scss index 87b502b6..7f87354c 100644 --- a/src/components/HintViewer.scss +++ b/src/components/HintViewer.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; // this is loosely based on the longest hint text $wide-viewport-width: 1000px; diff --git a/src/components/IconPicker.scss b/src/components/IconPicker.scss index ced5c5c2..284c3652 100644 --- a/src/components/IconPicker.scss +++ b/src/components/IconPicker.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .picker-container { diff --git a/src/components/Modal.scss b/src/components/Modal.scss index 2b34500d..2666f351 100644 --- a/src/components/Modal.scss +++ b/src/components/Modal.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .Modal { diff --git a/src/components/PasteChartDialog.scss b/src/components/PasteChartDialog.scss index 9d45fb2d..dc76306a 100644 --- a/src/components/PasteChartDialog.scss +++ b/src/components/PasteChartDialog.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .PasteChartDialog { diff --git a/src/components/Stats.scss b/src/components/Stats.scss index a6849f3b..84864f93 100644 --- a/src/components/Stats.scss +++ b/src/components/Stats.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .Stats { position: fixed; diff --git a/src/components/TextInput.scss b/src/components/TextInput.scss index 3ff96c87..930372ff 100644 --- a/src/components/TextInput.scss +++ b/src/components/TextInput.scss @@ -1,4 +1,4 @@ -@import "../css/_variables.scss"; +@import "../css/variables.module"; .excalidraw { .TextInput { diff --git a/src/components/Toast.scss b/src/components/Toast.scss index 493e2fbd..70cc8018 100644 --- a/src/components/Toast.scss +++ b/src/components/Toast.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .Toast { diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss index 91e8e1bc..df07ca02 100644 --- a/src/components/ToolIcon.scss +++ b/src/components/ToolIcon.scss @@ -1,5 +1,5 @@ @import "open-color/open-color.scss"; -@import "../css/variables"; +@import "../css/variables.module"; .excalidraw { .ToolIcon { diff --git a/src/components/Tooltip.scss b/src/components/Tooltip.scss index 9fe048f6..cf99e01a 100644 --- a/src/components/Tooltip.scss +++ b/src/components/Tooltip.scss @@ -1,4 +1,4 @@ -@import "../css/_variables"; +@import "../css/variables.module"; .excalidraw { .Tooltip { position: relative; diff --git a/src/css/styles.scss b/src/css/styles.scss index da616124..2bfed7ed 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -1,4 +1,4 @@ -@import "./_variables"; +@import "./variables.module"; @import "./theme"; .excalidraw { diff --git a/src/css/_variables.scss b/src/css/variables.module.scss similarity index 73% rename from src/css/_variables.scss rename to src/css/variables.module.scss index 4e4ac861..5b9ee7a8 100644 --- a/src/css/_variables.scss +++ b/src/css/variables.module.scss @@ -2,3 +2,7 @@ // keep up to date with is-mobile.tsx $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)"; + +:export { + isMobileQuery: unquote($is-mobile-query); +} diff --git a/src/excalidraw-app/collab/RoomDialog.scss b/src/excalidraw-app/collab/RoomDialog.scss index de784d93..5a045136 100644 --- a/src/excalidraw-app/collab/RoomDialog.scss +++ b/src/excalidraw-app/collab/RoomDialog.scss @@ -1,4 +1,4 @@ -@import "../../css/_variables"; +@import "../../css/variables.module"; .excalidraw { .RoomDialog-linkContainer { diff --git a/src/is-mobile.tsx b/src/is-mobile.tsx index e12419fd..4e34f710 100644 --- a/src/is-mobile.tsx +++ b/src/is-mobile.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef, useContext } from "react"; +import variables from "./css/variables.module.scss"; const context = React.createContext(false); @@ -10,10 +11,7 @@ export const IsMobileProvider = ({ const query = useRef(); if (!query.current) { query.current = window.matchMedia - ? window.matchMedia( - // keep up to date with _variables.scss - "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)", - ) + ? window.matchMedia(variables.isMobileQuery) : (({ matches: false, addListener: () => {},