Add CSS reset

reddit · Mar 1, 2024 · 4aff069 · 4aff069
1 parent a0d5b2c
commit 4aff069
Show file tree

Hide file tree

Showing 19 changed files with 102 additions and 31 deletions.
diff --git a/src/elements/play-app.ts b/src/elements/play-app.ts
@@ -7,6 +7,7 @@ import {
 } from 'lit'
 import {customElement} from 'lit/decorators.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-pen/play-pen.js'
 
 declare global {
@@ -17,7 +18,9 @@ declare global {
 
 @customElement('play-app')
 export class PlayApp extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     :host {
       /* Allow height to be specified. */
       display: block;

diff --git a/src/elements/play-button.ts b/src/elements/play-button.ts
@@ -8,6 +8,7 @@ import {
 import {customElement, property} from 'lit/decorators.js'
 import type {PlayIconSVG} from './play-icon/play-icon.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-icon/play-icon.js'
 
 export type PlayButtonAppearance =
@@ -26,15 +27,9 @@ declare global {
 /** @slot - Contents. */
 @customElement('play-button')
 export class PlayButton extends LitElement {
-  @property() appearance: PlayButtonAppearance = 'plain'
-  @property({type: Boolean}) disabled?: boolean
-  @property() endIcon?: PlayIconSVG
-  @property() icon?: PlayIconSVG
-  @property() size: PlayButtonSize = 'medium'
-  @property({type: String}) label = ''
-  @property({type: Number}) badge = 0
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
 
-  static override styles: CSSResultGroup = css`
     :host {
       width: fit-content;
       display: inline-block;
@@ -187,6 +182,14 @@ export class PlayButton extends LitElement {
     }
   `
 
+  @property() appearance: PlayButtonAppearance = 'plain'
+  @property({type: Boolean}) disabled?: boolean
+  @property() endIcon?: PlayIconSVG
+  @property() icon?: PlayIconSVG
+  @property() size: PlayButtonSize = 'medium'
+  @property({type: String}) label = ''
+  @property({type: Number}) badge = 0
+
   protected override render(): TemplateResult {
     const iconOnly = this.icon && !this.label && !this.endIcon
     return html`

diff --git a/src/elements/play-console.ts b/src/elements/play-console.ts
@@ -11,6 +11,7 @@ import {customElement, property} from 'lit/decorators.js'
 import type {Diagnostics} from '../types/diagnostics.js'
 import ts from '../typescript/typescript.js'
 import {Bubble} from '../utils/bubble.js'
+import {cssReset} from '../utils/css-reset.js'
 
 declare global {
   interface HTMLElementEventMap {
@@ -30,9 +31,9 @@ export type OpenLine = {
 
 @customElement('play-console')
 export class PlayConsole extends LitElement {
-  @property({attribute: false}) diagnostics?: Diagnostics
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
 
-  static override styles: CSSResultGroup = css`
     :host {
       height: 100%;
       padding-left: 16px;
@@ -110,6 +111,8 @@ export class PlayConsole extends LitElement {
     }
   `
 
+  @property({attribute: false}) diagnostics?: Diagnostics
+
   protected override render(): TemplateResult {
     const previewErrs = []
     for (const err of this.diagnostics?.previewErrs ?? [])

diff --git a/src/elements/play-dropdown-menu.ts b/src/elements/play-dropdown-menu.ts
@@ -6,6 +6,7 @@ import {
   type TemplateResult
 } from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
+import {cssReset} from '../utils/css-reset.js'
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,10 +21,9 @@ declare global {
  */
 @customElement('play-dropdown-menu')
 export class PlayDropdownMenu extends LitElement {
-  @property({type: String}) direction?: 'down' | 'up' = 'up'
-  @state() private isOpen = false
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
 
-  static override styles: CSSResultGroup = css`
     :host ol {
       position: absolute;
       right: 0;
@@ -92,6 +92,9 @@ export class PlayDropdownMenu extends LitElement {
     }
   `
 
+  @property({type: String}) direction?: 'down' | 'up' = 'up'
+  @state() private isOpen = false
+
   #toggleMenu(): void {
     this.isOpen = !this.isOpen
   }

diff --git a/src/elements/play-editor-tip.ts b/src/elements/play-editor-tip.ts
@@ -9,6 +9,7 @@ import {
 import {customElement, property} from 'lit/decorators.js'
 import type {Diagnostics} from '../types/diagnostics.js'
 import ts from '../typescript/typescript.js'
+import {cssReset} from '../utils/css-reset.js'
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,9 +19,9 @@ declare global {
 
 @customElement('play-editor-tip')
 export class PlayEditorTip extends LitElement {
-  @property({attribute: false}) diagnostics?: Diagnostics
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
 
-  static override styles: CSSResultGroup = css`
     :host {
       display: block;
       max-width: 640px;
@@ -33,6 +34,7 @@ export class PlayEditorTip extends LitElement {
     }
   `
 
+  @property({attribute: false}) diagnostics?: Diagnostics
   @property({attribute: false}) info?: ts.QuickInfo
 
   protected override render(): TemplateResult | typeof nothing {

diff --git a/src/elements/play-editor/play-editor.ts b/src/elements/play-editor/play-editor.ts
@@ -17,6 +17,7 @@ import {
   queryAsync
 } from 'lit/decorators.js'
 import {Bubble} from '../../utils/bubble.js'
+import {cssReset} from '../../utils/css-reset.js'
 import {unindent} from '../../utils/unindent.js'
 import {newEditorState} from './editor-state.js'
 
@@ -34,6 +35,8 @@ declare global {
 @customElement('play-editor')
 export class PlayEditor extends LitElement {
   static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     .editor {
       height: 100%;
       width: 100%;

diff --git a/src/elements/play-export-dialog.ts b/src/elements/play-export-dialog.ts
@@ -8,6 +8,7 @@ import {
 import {customElement, property, query} from 'lit/decorators.js'
 import type {PlayToast} from './play-toast.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-button.js'
 import './play-toast.js'
 
@@ -19,7 +20,9 @@ declare global {
 
 @customElement('play-export-dialog')
 export class PlayExportDialog extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     dialog {
       color: var(--color-neutral-content);
       background-color: var(--color-neutral-background);

diff --git a/src/elements/play-icon/play-icon.ts b/src/elements/play-icon/play-icon.ts
@@ -1,8 +1,16 @@
-import {LitElement, html, nothing, type TemplateResult} from 'lit'
+import {
+  LitElement,
+  css,
+  html,
+  nothing,
+  type CSSResultGroup,
+  type TemplateResult
+} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import {styleMap} from 'lit/directives/style-map.js'
 import {unsafeHTML} from 'lit/directives/unsafe-html.js'
 
+import {cssReset} from '../../utils/css-reset.js'
 import addOutline from './icons/add-outline.svg'
 import caretDownOutline from './icons/caret-down-outline.svg'
 import caretUpOutline from './icons/caret-up-outline.svg'
@@ -53,6 +61,10 @@ declare global {
 
 @customElement('play-icon')
 export class PlayIcon extends LitElement {
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+  `
+
   @property({type: String}) size = '16px'
   @property({type: String}) color = 'currentColor'
   @property({type: String}) icon?: PlayIconSVG

diff --git a/src/elements/play-list-item.ts b/src/elements/play-list-item.ts
@@ -8,6 +8,7 @@ import {
 import {customElement, property} from 'lit/decorators.js'
 import type {PlayIconSVG} from './play-icon/play-icon.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-icon/play-icon.js'
 
 declare global {
@@ -18,11 +19,9 @@ declare global {
 
 @customElement('play-list-item')
 export class PlayListItem extends LitElement {
-  @property() label: String = ''
-  @property() icon?: PlayIconSVG
-  @property() endIcon?: PlayIconSVG
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
 
-  static override styles: CSSResultGroup = css`
     li {
       display: flex;
       flex-direction: row;
@@ -47,6 +46,10 @@ export class PlayListItem extends LitElement {
     }
   `
 
+  @property() label: String = ''
+  @property() icon?: PlayIconSVG
+  @property() endIcon?: PlayIconSVG
+
   protected override render(): TemplateResult {
     return html`
       <li>

diff --git a/src/elements/play-logo/play-logo.ts b/src/elements/play-logo/play-logo.ts
@@ -1,6 +1,7 @@
 import {LitElement, css, type CSSResultGroup} from 'lit'
 import {customElement} from 'lit/decorators.js'
 import {unsafeHTML} from 'lit/directives/unsafe-html.js'
+import {cssReset} from '../../utils/css-reset.js'
 import logo from './logo.svg'
 
 declare global {
@@ -11,7 +12,9 @@ declare global {
 
 @customElement('play-logo')
 export class PlayLogo extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     svg {
       display: block;
       width: 40px;

diff --git a/src/elements/play-new-pen-button.ts b/src/elements/play-new-pen-button.ts
@@ -10,6 +10,7 @@ import {repeat} from 'lit/directives/repeat.js'
 import {Bubble} from '../utils/bubble.js'
 import {openURL} from '../utils/open-url.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-dropdown-menu.js'
 import './play-icon/play-icon.js'
 import './play-list-item.js'
@@ -31,7 +32,9 @@ declare global {
 
 @customElement('play-new-pen-button')
 export class PlayNewPenButton extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     .container {
       display: flex;
       flex-direction: row;

diff --git a/src/elements/play-pen-footer.ts b/src/elements/play-pen-footer.ts
@@ -10,6 +10,7 @@ import {customElement, property, state} from 'lit/decorators.js'
 import type {Diagnostics} from '../types/diagnostics.js'
 import {openURL} from '../utils/open-url.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-button.js'
 import './play-console.js'
 import './play-dropdown-menu.js'
@@ -23,7 +24,9 @@ declare global {
 
 @customElement('play-pen-footer')
 export class PlayPenFooter extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     footer {
       background-color: var(--color-neutral-content-weak);
     }

diff --git a/src/elements/play-pen-header.ts b/src/elements/play-pen-header.ts
@@ -10,6 +10,7 @@ import {Bubble} from '../utils/bubble.js'
 import {openURL} from '../utils/open-url.js'
 import type {PlayExportDialog} from './play-export-dialog.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-button.js'
 import './play-export-dialog.js'
 import './play-icon/play-icon.js'
@@ -29,7 +30,9 @@ declare global {
 
 @customElement('play-pen-header')
 export class PlayPenHeader extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     header {
       padding-top: 16px;
       padding-right: 16px;

diff --git a/src/elements/play-pen/play-pen.ts b/src/elements/play-pen/play-pen.ts
@@ -33,6 +33,7 @@ import type {PlayEditor} from '../play-editor/play-editor.js'
 import type {PlayToast} from '../play-toast.js'
 import penVars from './pen-vars.css'
 
+import {cssReset} from '../../utils/css-reset.js'
 import '../play-editor/play-editor.js'
 import '../play-pen-footer.js'
 import '../play-pen-header.js'
@@ -54,7 +55,9 @@ declare global {
  */
 @customElement('play-pen')
 export class PlayPen extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     ${unsafeCSS(penVars)}
 
     :host {

diff --git a/src/elements/play-preview-controls.ts b/src/elements/play-preview-controls.ts
@@ -9,6 +9,7 @@ import {customElement, property} from 'lit/decorators.js'
 import type {ColorScheme} from '../types/color-scheme.js'
 import {Bubble} from '../utils/bubble.js'
 
+import {cssReset} from '../utils/css-reset.js'
 import './play-button.js'
 import './play-dropdown-menu.js'
 import './play-list-item.js'
@@ -35,7 +36,9 @@ declare global {
 
 @customElement('play-preview-controls')
 export class PlayPreviewControls extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     :host {
       display: flex;
       flex-direction: row;

diff --git a/src/elements/play-preview.ts b/src/elements/play-preview.ts
@@ -16,6 +16,7 @@ import type {ColorScheme} from '../types/color-scheme.js'
 import {Bubble} from '../utils/bubble.js'
 
 import '@devvit/previews/dist/devvit-preview.js'
+import {cssReset} from '../utils/css-reset.js'
 
 const localRuntimeCode: Blob = new Blob([penWorker.default], {
   type: 'text/javascript'
@@ -33,7 +34,9 @@ declare global {
 /** The rendered output of Devvit program under various parameters. */
 @customElement('play-preview')
 export class PlayPreview extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     .preview {
       /* Hide overflow on corners */
       overflow: hidden;

diff --git a/src/elements/play-resizable-text-input.ts b/src/elements/play-resizable-text-input.ts
@@ -8,6 +8,7 @@ import {
 } from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import {Bubble} from '../utils/bubble.js'
+import {cssReset} from '../utils/css-reset.js'
 
 declare global {
   interface HTMLElementEventMap {
@@ -20,7 +21,9 @@ declare global {
 
 @customElement('play-resizable-text-input')
 export class PlayResizableTextInput extends LitElement {
-  static override styles: CSSResultGroup = css`
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
     :host {
       position: relative;
       width: 100%;