css ttl

demo/src/record-player.ts

@@ -1,7 +1,7 @@
 // Ported from https://github.com/bitu467/record-player
+import { css } from '../../src/common/tags';
 
-const styles = new CSSStyleSheet();
+const styles = css`
-styles.replaceSync(`
   ::slotted(*) {
     display: none;
   }
@@ -154,9 +154,7 @@ styles.replaceSync(`
   }
 
   :host(:state(playing)) .tone-arm {
-  animation: 
+    animation: ready-arm var(--move-time), move-arm var(--duration) var(--move-time),
-    ready-arm var(--move-time), 
-    move-arm var(--duration) var(--move-time), 
       reset-arm var(--move-time) calc(var(--duration) + var(--move-time));
   }
 
@@ -213,7 +211,7 @@ styles.replaceSync(`
       rotate: 360deg;
     }
   }
-`);
+`;
 
 export class RecordPlayer extends HTMLElement {
   static tagName = 'record-player';

src/common/tags.ts

@@ -4,6 +4,10 @@ export const vert = String.raw;
 
 export const frag = String.raw;
 
-export const css = String.raw;
-
 export const html = String.raw;
+
+export function css(strings: TemplateStringsArray, ...values: any[]) {
+  const styles = new CSSStyleSheet();
+  styles.replaceSync(String.raw(strings, ...values));
+  return styles;
+}

src/folk-event-propagator.ts

@@ -3,8 +3,7 @@ import { FolkRope } from './folk-rope.ts';
 import * as parser from '@babel/parser';
 import type { Node } from '@babel/types';
 
-const styles = new CSSStyleSheet();
+const styles = css`
-styles.replaceSync(css`
   :host {
     display: block;
     position: absolute;
@@ -27,7 +26,7 @@ styles.replaceSync(css`
     translate: -50% -50%;
     border-radius: 5px;
   }
-`);
+`;
 
 export class FolkEventPropagator extends FolkRope {
   static override tagName = 'folk-event-propagator';

src/folk-ink.ts

@@ -1,4 +1,5 @@
 import { getStroke, StrokeOptions } from 'perfect-freehand';
+import { css } from './common/tags';
 
 export type Point = [x: number, y: number, pressure: number];
 
@@ -6,9 +7,9 @@ export type Stroke = number[][];
 
 // TODO: look into any-pointer media queries to tell if the user has a mouse or touch screen
 // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer
-const styles = new CSSStyleSheet();
+const styles = css`
-styles.replaceSync(`
+  :host,
-  :host, svg {
+  svg {
     display: block;
     height: 100%;
     width: 100%;
@@ -21,7 +22,7 @@ styles.replaceSync(`
     inset: 0 0 0 0;
     cursor: var(--tracing-cursor, crosshair);
   }
-`);
+`;
 
 declare global {
   interface HTMLElementTagNameMap {

src/folk-map.ts

@@ -2,9 +2,10 @@ import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'lea
 
 // @ts-ignore
 // Vite specific import :(
-import css from 'leaflet/dist/leaflet.css?inline';
+import leafletCSS from 'leaflet/dist/leaflet.css?inline';
-const styles = new CSSStyleSheet();
+import { css } from './common/tags';
-styles.replaceSync(`${css}
+const styles = css`
+  ${leafletCSS}
   :host {
     display: block;
   }
@@ -13,7 +14,7 @@ styles.replaceSync(`${css}
     height: 100%;
     width: 100%;
   }
-`);
+`;
 
 export class RecenterEvent extends Event {
   constructor() {

src/folk-shape.ts

@@ -73,8 +73,7 @@ export class TransformEvent extends Event {
 
 export type Dimension = number | 'auto';
 
-const styles = new CSSStyleSheet();
+const styles = css`
-styles.replaceSync(css`
   :host {
     display: block;
     position: absolute;
@@ -209,7 +208,7 @@ styles.replaceSync(css`
     opacity: 0;
     cursor: default;
   }
-`);
+`;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -229,7 +228,7 @@ export class FolkShape extends HTMLElement {
   #shadow = this.attachShadow({ mode: 'open' });
   #internals = this.attachInternals();
 
-  #dynamicStyles = new CSSStyleSheet();
+  #dynamicStyles = css``;
 
   #type = (this.getAttribute('type') || 'rectangle') as Shape;
   get type(): Shape {

src/folk-spreadsheet.ts

@@ -1,6 +1,7 @@
-const styles = new CSSStyleSheet();
+import { css } from './common/tags';
+
 // hardcoded column and row numbers
-styles.replaceSync(`
+const styles = css`
   :host {
     --column-number: 10;
     --row-number: 10;
@@ -85,7 +86,9 @@ s-body {
     grid-template-rows: subgrid;
   }
 
-s-columns, s-rows, s-body {
+  s-columns,
+  s-rows,
+  s-body {
     background-color: var(--border-color);
     gap: 1px;
   }
@@ -109,7 +112,7 @@ s-columns, s-rows, s-body {
     outline: 2px solid #1b73e8;
     z-index: 4;
   }
-`);
+`;
 
 const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 

src/folk-toolbar.ts

@@ -1,8 +1,7 @@
 import { FolkEventPropagator } from './folk-event-propagator.ts';
 import { css } from './common/tags.ts';
 
-const styles = new CSSStyleSheet();
+const styles = css`
-styles.replaceSync(css`
   :host {
     position: fixed;
     bottom: 16px;
@@ -27,7 +26,7 @@ styles.replaceSync(css`
   button.active {
     background: #eee;
   }
-`);
+`;
 
 export class FolkToolbar extends HTMLElement {
   static tagName = 'folk-toolbar';