css ttl

demo/src/record-player.ts

@@ -1,16 +1,16 @@
 // Ported from https://github.com/bitu467/record-player
+import { css } from '../../src/common/tags';
 
-const styles = new CSSStyleSheet();
+const styles = css`
-styles.replaceSync(`
+  ::slotted(*) {
-::slotted(*) {
     display: none;
-}
+  }
 
-:host {
+  :host {
     display: block;
-}
+  }
 
-.player {
+  .player {
     background-color: #d52831;
     width: 330px;
     height: 190px;
@@ -21,9 +21,9 @@ styles.replaceSync(`
     border-radius: 10px;
     box-shadow: 0 8px 0 0 #be2728;
     margin-top: -4px;
-}
+  }
 
-.record {
+  .record {
     width: 175px;
     height: 175px;
     background-color: #181312;
@@ -36,37 +36,37 @@ styles.replaceSync(`
     align-items: center;
     animation: spin 3s linear infinite;
     animation-play-state: paused;
-}
+  }
 
-.record::before,
+  .record::before,
-.record::after {
+  .record::after {
     content: '';
     position: absolute;
     border: 5px solid transparent;
     border-top-color: #2c2424;
     border-bottom-color: #2c2424;
     border-radius: 50%;
-}
+  }
 
-.record::before {
+  .record::before {
     width: 135px;
     height: 135px;
-}
+  }
 
-.record:after {
+  .record:after {
     width: 95px;
     height: 95px;
-}
+  }
 
-.label {
+  .label {
     height: 15px;
     width: 15px;
     background-color: #181312;
     border: 20px solid #ff8e00;
     border-radius: 50%;
-}
+  }
 
-.tone-arm {
+  .tone-arm {
     height: 90px;
     width: 6px;
     background-color: #ffffff;
@@ -78,9 +78,9 @@ styles.replaceSync(`
     --move-time: 3s;
     animation-fill-mode: forwards;
     animation-timing-function: linear;
-}
+  }
 
-.control {
+  .control {
     background-color: #181312;
     width: 17px;
     height: 17px;
@@ -89,9 +89,9 @@ styles.replaceSync(`
     position: absolute;
     top: -16px;
     left: -16px;
-}
+  }
 
-.tone-arm::before {
+  .tone-arm::before {
     content: '';
     position: absolute;
     height: 40px;
@@ -100,9 +100,9 @@ styles.replaceSync(`
     transform: rotate(30deg);
     bottom: -36px;
     right: 10px;
-}
+  }
 
-.tone-arm::after {
+  .tone-arm::after {
     content: '';
     position: absolute;
     height: 0px;
@@ -113,9 +113,9 @@ styles.replaceSync(`
     top: 108px;
     right: 12.5px;
     transform: rotate(30deg);
-}
+  }
 
-.btn {
+  .btn {
     width: 28px;
     height: 28px;
     background-color: #ed5650;
@@ -127,9 +127,9 @@ styles.replaceSync(`
     border: 3.5px solid rgb(190, 39, 42);
     outline: none;
     cursor: pointer;
-}
+  }
 
-.slider {
+  .slider {
     -webkit-appearance: none;
     appearance: none;
     transform: rotate(-90deg);
@@ -142,29 +142,27 @@ styles.replaceSync(`
     outline: none;
     border-radius: 3px;
     border: 6px solid #ed5650;
-}
+  }
 
-.slider::-webkit-slider-thumb {
+  .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 10px;
     height: 12px;
     background-color: #ffffff;
     cursor: pointer;
-}
+  }
 
-:host(:state(playing)) .tone-arm {
+  :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));
-}  
+  }
 
-:host(:state(playing)) .record {
+  :host(:state(playing)) .record {
     animation-play-state: running;
-}
+  }
 
-@keyframes ready-arm {
+  @keyframes ready-arm {
     20% {
       transform: rotateX(20deg);
     }
@@ -177,9 +175,9 @@ styles.replaceSync(`
     100% {
       rotate: 14deg;
     }
-}
+  }
 
-@keyframes move-arm {
+  @keyframes move-arm {
     from {
       rotate: 14deg;
     }
@@ -187,9 +185,9 @@ styles.replaceSync(`
     to {
       rotate: 42deg;
     }
-}
+  }
 
-@keyframes reset-arm {
+  @keyframes reset-arm {
     0% {
       rotate: 42deg;
     }
@@ -202,9 +200,9 @@ styles.replaceSync(`
     80% {
       transform: rotateX(20deg);
     }
-}
+  }
 
-@keyframes spin {
+  @keyframes spin {
     from {
       rotate: 0deg;
     }
@@ -212,8 +210,8 @@ styles.replaceSync(`
     to {
       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,7 +1,8 @@
-const styles = new CSSStyleSheet();
+import { css } from './common/tags';
+
 // hardcoded column and row numbers
-styles.replaceSync(`
+const styles = css`
-:host {
+  :host {
     --column-number: 10;
     --row-number: 10;
     --cell-height: 1.75rem;
@@ -18,16 +19,16 @@ styles.replaceSync(`
     scroll-snap-type: both mandatory;
     scroll-padding-top: var(--cell-height);
     scroll-padding-left: 50px;
-}
+  }
 
-textarea {
+  textarea {
     background-color: rgba(255, 255, 255, 0.75);
     grid-column: var(--text-column, 0);
     grid-row: var(--text-row, 0);
     z-index: 11;
-}
+  }
 
-s-columns {
+  s-columns {
     box-shadow: 0px 3px 5px 0px rgba(173, 168, 168, 0.6);
     display: grid;
     grid-column: 2 / -1;
@@ -37,9 +38,9 @@ s-columns {
     position: sticky;
     top: 0;
     z-index: 2;
-}
+  }
 
-s-rows {
+  s-rows {
     box-shadow: 3px 0px 5px 0px rgba(173, 168, 168, 0.4);
     display: grid;
     grid-column: 1;
@@ -53,9 +54,9 @@ s-rows {
     s-header {
       font-size: 0.75rem;
     }
-}
+  }
 
-s-header {
+  s-header {
     background-color: #f8f9fa;
     display: flex;
     padding: 0.125rem 0.5rem;
@@ -75,9 +76,9 @@ s-header {
       background-color: #d3e2fd;
       font-weight: bold;
     }
-}
+  }
 
-s-body {
+  s-body {
     display: grid;
     grid-column: 2 / -1;
     grid-row: 2 / -1;
@@ -85,12 +86,14 @@ 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;
-}
+  }
 
-::slotted(folk-cell) {
+  ::slotted(folk-cell) {
     box-sizing: border-box;
     align-items: center;
     background-color: rgb(255, 255, 255);
@@ -99,17 +102,17 @@ s-columns, s-rows, s-body {
     justify-content: start;
     scroll-snap-align: start;
     overflow: hidden;
-}
+  }
 
-::slotted(folk-cell[type='number']) {
+  ::slotted(folk-cell[type='number']) {
     justify-content: end;
-}
+  }
 
-::slotted(folk-cell:focus) {
+  ::slotted(folk-cell:focus) {
     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';