From ea7673f70e30ff82f426b2283e01f42e3f1945c0 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Sun, 11 Jul 2021 15:59:37 -0400 Subject: [PATCH] Split up CSS into multiple files and use CSS imports (#206) This splits up our `styles.css` file into multiple CSS files that sit alongside the TSX files that use their classes. All "generic" CSS that isn't used by any one particular component, such as our `thingy` class, is currently being put into `page.css`. The CSS files are imported via `import` statements in their associated TSX files. As such, this fixes #164. This also starts formatting our CSS using Prettier. It also moves some of our `` tags back into `index.html`, reverting a tiny bit of #205, to ensure that some of the metadata can be recognized by browsers, and start loading asynchronously, independently of the page's JavaScript (I see no reason why any of those elements need to change dynamically based on the app's state, so there don't seem to be any downsides to this). --- .gitignore | 1 + .vscode/settings.json | 4 ++ __mocks__/css-mock.js | 1 + dist/index.html | 3 ++ lib/color-widget.css | 7 +++ lib/color-widget.tsx | 2 + lib/export-svg.css | 13 ++++++ lib/export-svg.tsx | 2 + lib/hover-debug-helper.css | 8 ++++ lib/hover-debug-helper.tsx | 2 + lib/numeric-slider.css | 23 ++++++++++ dist/css/style.css => lib/page.css | 71 +++--------------------------- lib/page.tsx | 5 +-- lib/pages/vocabulary-page.css | 6 +++ lib/pages/vocabulary-page.tsx | 2 + package.json | 7 ++- 16 files changed, 87 insertions(+), 70 deletions(-) create mode 100644 __mocks__/css-mock.js create mode 100644 lib/color-widget.css create mode 100644 lib/export-svg.css create mode 100644 lib/hover-debug-helper.css create mode 100644 lib/numeric-slider.css rename dist/css/style.css => lib/page.css (50%) create mode 100644 lib/pages/vocabulary-page.css diff --git a/.gitignore b/.gitignore index 9d4be20..a8c4e02 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ lib/_svg-vocabulary.ts lib/**/*.avsc.ts dist/browser-main.js dist/browser-main.js.map +dist/browser-main.css diff --git a/.vscode/settings.json b/.vscode/settings.json index f88f7d5..547d7c4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,4 +17,8 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, + "[css]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, } \ No newline at end of file diff --git a/__mocks__/css-mock.js b/__mocks__/css-mock.js new file mode 100644 index 0000000..f053ebf --- /dev/null +++ b/__mocks__/css-mock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/dist/index.html b/dist/index.html index 51c36ac..909f388 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,4 +1,7 @@ + + + diff --git a/lib/color-widget.css b/lib/color-widget.css new file mode 100644 index 0000000..ddb484a --- /dev/null +++ b/lib/color-widget.css @@ -0,0 +1,7 @@ +.sidebar .color-widget { + display: flex; +} + +.sidebar .color-widget label { + flex-grow: 1; +} diff --git a/lib/color-widget.tsx b/lib/color-widget.tsx index c740818..c5f51bf 100644 --- a/lib/color-widget.tsx +++ b/lib/color-widget.tsx @@ -1,6 +1,8 @@ import React from "react"; import { slugify } from "./util"; +import "./color-widget.css"; + type ColorWidgetProps = { label: string; value: string; diff --git a/lib/export-svg.css b/lib/export-svg.css new file mode 100644 index 0000000..00ddbdf --- /dev/null +++ b/lib/export-svg.css @@ -0,0 +1,13 @@ +.overlay-wrapper { + position: fixed; + display: flex; + background-color: rgba(0, 0, 0, 0.9); + flex-direction: column; + align-items: center; + justify-content: center; + color: white; + top: 0; + left: 0; + bottom: 0; + right: 0; +} diff --git a/lib/export-svg.tsx b/lib/export-svg.tsx index 718a3ac..2ee294f 100644 --- a/lib/export-svg.tsx +++ b/lib/export-svg.tsx @@ -3,6 +3,8 @@ import { renderToStaticMarkup } from "react-dom/server"; import { createGIF } from "./animated-gif"; import { getSvgMetadata, SvgWithBackground } from "./auto-sizing-svg"; +import "./export-svg.css"; + function getSvgDocument(svgMarkup: string): string { return [ ``, diff --git a/lib/hover-debug-helper.css b/lib/hover-debug-helper.css new file mode 100644 index 0000000..9f7ccaf --- /dev/null +++ b/lib/hover-debug-helper.css @@ -0,0 +1,8 @@ +.hover-debug-helper { + font-family: "Consolas", "Monaco", monospace; + color: white; + background: rgba(0, 0, 0, 0.75); + padding: 4px; + margin-top: 4px; + margin-left: 4px; +} diff --git a/lib/hover-debug-helper.tsx b/lib/hover-debug-helper.tsx index 360fd2f..2f93d28 100644 --- a/lib/hover-debug-helper.tsx +++ b/lib/hover-debug-helper.tsx @@ -1,5 +1,7 @@ import React, { useState } from "react"; +import "./hover-debug-helper.css"; + function getTargetPathInfo(target: SVGElement): string[] { const path: string[] = []; let node = target; diff --git a/lib/numeric-slider.css b/lib/numeric-slider.css new file mode 100644 index 0000000..4fb09f7 --- /dev/null +++ b/lib/numeric-slider.css @@ -0,0 +1,23 @@ +.sidebar .numeric-slider { + display: flex; + flex-direction: column; +} + +.sidebar .numeric-slider .slider { + display: flex; +} + +.sidebar .numeric-slider .slider input { + flex-basis: 90%; +} + +.sidebar .numeric-slider .slider .slider-value { + /** + * We want to keep a minimum width for the value or else + * there will be a "jitter" effect where the slider will + * contract as a result of the label getting smaller, + * which will then change the value of the slider, which + * will then change the width of the label, ad infinitum. + */ + min-width: 2em; +} diff --git a/dist/css/style.css b/lib/page.css similarity index 50% rename from dist/css/style.css rename to lib/page.css index 2dffc83..aa748eb 100644 --- a/dist/css/style.css +++ b/lib/page.css @@ -1,4 +1,5 @@ -html, body { +html, +body { margin: 0; padding: 0; font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif; @@ -31,8 +32,8 @@ header h1 { } .MSlogo { - height:50px; - vertical-align:middle; + height: 50px; + vertical-align: middle; margin-bottom: 3px; } @@ -45,25 +46,11 @@ footer { grid-area: footer; } -select, input[type="text"] { +select, +input[type="text"] { padding: 8px; } -.checkerboard-bg { - /* https://codepen.io/pascalvgaal/pen/jPXPNP/ */ - background: #eee url('data:image/svg+xml,'); - background-size: 20px 20px; -} - -.hover-debug-helper { - font-family: "Consolas", "Monaco", monospace; - color: white; - background: rgba(0, 0, 0, 0.75); - padding: 4px; - margin-top: 4px; - margin-left: 4px; -} - /** Stupid class we're using instead of

to avoid ValidateDOMNesting warnings. */ .thingy { margin-top: 10px; @@ -125,49 +112,3 @@ ul.navbar li:last-child { margin-top: 10px; margin-bottom: 10px; } - -.sidebar .color-widget { - display: flex; -} - -.sidebar .color-widget label { - flex-grow: 1; -} - -.sidebar .numeric-slider { - display: flex; - flex-direction: column; -} - -.sidebar .numeric-slider .slider { - display: flex; -} - -.sidebar .numeric-slider .slider input { - flex-basis: 90%; -} - -.sidebar .numeric-slider .slider .slider-value { - /** - * We want to keep a minimum width for the value or else - * there will be a "jitter" effect where the slider will - * contract as a result of the label getting smaller, - * which will then change the value of the slider, which - * will then change the width of the label, ad infinitum. - */ - min-width: 2em; -} - -.overlay-wrapper { - position: fixed; - display: flex; - background-color: rgba(0, 0, 0, 0.9); - flex-direction: column; - align-items: center; - justify-content: center; - color: white; - top: 0; - left: 0; - bottom: 0; - right: 0; -} \ No newline at end of file diff --git a/lib/page.tsx b/lib/page.tsx index 1b49da8..ea2cb92 100644 --- a/lib/page.tsx +++ b/lib/page.tsx @@ -2,6 +2,8 @@ import React, { MouseEvent, useContext } from "react"; import { Helmet } from "react-helmet"; import type { PageName } from "./pages"; +import "./page.css"; + export type PageContext = { currPage: PageName; allPages: PageName[]; @@ -68,10 +70,7 @@ export const Page: React.FC = ({ title, children }) => { return (

- {fullTitle} - -

diff --git a/lib/pages/vocabulary-page.css b/lib/pages/vocabulary-page.css new file mode 100644 index 0000000..4c158f3 --- /dev/null +++ b/lib/pages/vocabulary-page.css @@ -0,0 +1,6 @@ +.checkerboard-bg { + /* https://codepen.io/pascalvgaal/pen/jPXPNP/ */ + background: #eee + url('data:image/svg+xml,'); + background-size: 20px 20px; +} diff --git a/lib/pages/vocabulary-page.tsx b/lib/pages/vocabulary-page.tsx index f8b552d..35fb0db 100644 --- a/lib/pages/vocabulary-page.tsx +++ b/lib/pages/vocabulary-page.tsx @@ -11,6 +11,8 @@ import { SymbolContextWidget } from "../symbol-context-widget"; import { HoverDebugHelper } from "../hover-debug-helper"; import { Page } from "../page"; +import "./vocabulary-page.css"; + type SvgSymbolProps = { data: SvgSymbolData; scale?: number; diff --git a/package.json b/package.json index 916d216..60d18b6 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "main": "index.js", "scripts": { "deploy": "npm run build && gh-pages -d dist", - "prettier:check": "prettier --check lib/**/*.ts lib/**/*.tsx", - "prettier:fix": "prettier --write lib/**/*.ts lib/**/*.tsx", + "prettier:check": "prettier --check lib/**/*.ts lib/**/*.tsx lib/**/*.css", + "prettier:fix": "prettier --write lib/**/*.ts lib/**/*.tsx lib/**/*.css", "typecheck": "tsc --noemit", "eslint": "eslint lib --ext .ts,.tsx --max-warnings 1", "lint": "npm run prettier:check && npm run typecheck && npm run eslint", @@ -22,6 +22,9 @@ "author": "", "license": "ISC", "jest": { + "moduleNameMapper": { + "\\.(css)$": "/__mocks__/css-mock.js" + }, "testPathIgnorePatterns": [ "dist", ".cache"