[REM] component: remove support for css tag

src/app/template_set.ts

@@ -100,3 +100,15 @@ export class TemplateSet {
     });
   }
 }
+
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+export function xml(...args: Parameters<typeof String.raw>) {
+  const name = `__template__${xml.nextId++}`;
+  const value = String.raw(...args);
+  globalTemplates[name] = value;
+  return name;
+}
+
+xml.nextId = 1;

src/component/component.ts

@@ -7,7 +7,6 @@ import type { ComponentNode } from "./component_node";
 
 export class Component {
   static template: string = "";
-  static style: string = "";
   static props?: any;
 
   props: any;

src/component/component_node.ts

@@ -12,7 +12,6 @@ import {
 import { handleError, fibersInError } from "./error_handling";
 import { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";
-import { applyStyles } from "./style";
 
 export function component(
   name: string | typeof Component,
@@ -106,9 +105,6 @@ export class ComponentNode<T extends typeof Component = typeof Component>
     this.childEnv = env;
     this.component = new C(props, env, this) as any;
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
-    if (C.style) {
-      applyStyles(C);
-    }
     this.component.setup();
   }
 

src/component/style.ts

@@ -1,88 +0,0 @@
-import { Component } from "./component";
-
-export const globalStylesheets: { [key: string]: HTMLStyleElement } = {};
-
-export function registerSheet(id: string, css: string) {
-  const sheet = document.createElement("style");
-  sheet.innerHTML = processSheet(css);
-  globalStylesheets[id] = sheet;
-}
-
-/**
- * Apply the stylesheets defined by the component. Note that we need to make
- * sure all inherited stylesheets are applied as well, in a reverse order to
- * ensure that <style/> will be applied to the DOM in the order they are
- * included in the document. We then delete the `style` key from the constructor
- * to make sure we do not apply it again.
- */
-export function applyStyles(ComponentClass: typeof Component) {
-  const toApply: [string, string][] = [];
-  while (ComponentClass && ComponentClass.style) {
-    if (ComponentClass.hasOwnProperty("style")) {
-      toApply.push([ComponentClass.style, ComponentClass.name]);
-      delete (ComponentClass as any).style;
-    }
-    ComponentClass = Object.getPrototypeOf(ComponentClass);
-  }
-  while (toApply.length) {
-    const [styleId, componentName] = toApply.pop()!;
-    activateSheet(styleId, componentName);
-  }
-}
-
-function activateSheet(id: string, name: string) {
-  const sheet = globalStylesheets[id];
-  if (!sheet) {
-    throw new Error(
-      `Invalid css stylesheet for component '${name}'. Did you forget to use the 'css' tag helper?`
-    );
-  }
-  sheet.dataset.component = name;
-  document.head.appendChild(sheet);
-}
-
-function processSheet(str: string): string {
-  const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-  const selectorStack: string[][] = [];
-  const parts: string[] = [];
-  let rules: string[] = [];
-  function generateSelector(stackIndex: number, parentSelector?: string) {
-    const parts: string[] = [];
-    for (const selector of selectorStack[stackIndex]) {
-      let part = (parentSelector && parentSelector + " " + selector) || selector;
-      if (part.includes("&")) {
-        part = selector.replace(/&/g, parentSelector || "");
-      }
-      if (stackIndex < selectorStack.length - 1) {
-        part = generateSelector(stackIndex + 1, part);
-      }
-      parts.push(part);
-    }
-    return parts.join(", ");
-  }
-  function generateRules() {
-    if (rules.length) {
-      parts.push(generateSelector(0) + " {");
-      parts.push(...rules);
-      parts.push("}");
-      rules = [];
-    }
-  }
-  while (tokens.length) {
-    let token = tokens.shift()!;
-    if (token === "}") {
-      generateRules();
-      selectorStack.pop();
-    } else {
-      if (tokens[0] === "{") {
-        generateRules();
-        selectorStack.push(token.split(/\s*,\s*/));
-        tokens.shift();
-      }
-      if (tokens[0] === ";") {
-        rules.push("  " + token + ";");
-      }
-    }
-  }
-  return parts.join("\n");
-}

src/index.ts

@@ -56,7 +56,7 @@ export function useComponent(): Component {
 export { status } from "./component/status";
 export { Portal } from "./portal";
 export { Memo } from "./memo";
-export { css, xml } from "./tags";
+export { xml } from "./app/template_set";
 export { useState, reactive } from "./reactivity";
 export { useEffect, useEnv, useExternalListener, useRef, useSubEnv } from "./hooks";
 export { EventBus, whenReady, loadFile, markup } from "./utils";

src/memo.ts

@@ -1,6 +1,6 @@
 import { Component } from "./component/component";
 import type { ComponentNode } from "./component/component_node";
-import { xml } from "./tags";
+import { xml } from "./app/template_set";
 import { Fiber } from "./component/fibers";
 
 export class Memo extends Component {

src/portal.ts

@@ -1,6 +1,6 @@
 import type { ComponentNode } from "./component/component_node";
 import { Component } from "./component/component";
-import { xml } from "./tags";
+import { xml } from "./app/template_set";
 import { BDom, text, VNode } from "./blockdom";
 
 const VText: any = text("").constructor;

src/tags.ts

@@ -1,28 +0,0 @@
-import { registerSheet } from "./component/style";
-import { globalTemplates } from "./app/template_set";
-
-// -----------------------------------------------------------------------------
-//  Global templates
-// -----------------------------------------------------------------------------
-
-export function xml(...args: Parameters<typeof String.raw>) {
-  const name = `__template__${xml.nextId++}`;
-  const value = String.raw(...args);
-  globalTemplates[name] = value;
-  return name;
-}
-
-xml.nextId = 1;
-
-// -----------------------------------------------------------------------------
-//  Global stylesheets
-// -----------------------------------------------------------------------------
-
-export function css(strings: TemplateStringsArray, ...args: any[]) {
-  const name = `__sheet__${css.nextId++}`;
-  const value = String.raw(strings, ...args);
-  registerSheet(name, value);
-  return name;
-}
-
-css.nextId = 1;

tests/compiler/translation.test.ts

@@ -1,6 +1,5 @@
-import { Component, mount } from "../../src";
+import { Component, mount, xml } from "../../src";
 import { makeTestFixture, snapshotEverything } from "../helpers";
-import { xml } from "../../src/tags";
 
 let fixture: HTMLElement;
 

tests/components/app.test.ts

@@ -1,6 +1,5 @@
-import { App, Component } from "../../src";
+import { App, Component, xml } from "../../src";
 import { status } from "../../src/component/status";
-import { xml } from "../../src/tags";
 import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";
 
 let fixture: HTMLElement;

tests/components/basics.test.ts

@@ -1,5 +1,4 @@
-import { App, Component, mount, status, useState } from "../../src";
+import { App, Component, mount, status, useState, xml } from "../../src";
-import { xml } from "../../src/tags";
 import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { markup } from "../../src/utils";
 

tests/components/concurrency.test.ts

@@ -7,11 +7,11 @@ import {
   onWillUnmount,
   onWillUpdateProps,
   useState,
+  xml,
 } from "../../src";
 import { Fiber } from "../../src/component/fibers";
 import { Scheduler } from "../../src/component/scheduler";
 import { status } from "../../src/component/status";
-import { xml } from "../../src/tags";
 import {
   makeDeferred,
   makeTestFixture,

tests/components/error_handling.test.ts

@@ -7,8 +7,8 @@ import {
   onWillStart,
   onWillUnmount,
   useState,
+  xml,
 } from "../../src/index";
-import { xml } from "../../src/tags";
 import {
   logStep,
   makeTestFixture,

tests/components/higher_order_component.test.ts

@@ -1,5 +1,4 @@
-import { App, Component, mount, useState } from "../../src";
+import { App, Component, mount, useState, xml } from "../../src";
-import { xml } from "../../src/tags";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;

tests/components/lifecycle.test.ts

@@ -1,4 +1,4 @@
-import { App, Component, mount, onMounted, onWillStart, useState } from "../../src";
+import { App, Component, mount, onMounted, onWillStart, useState, xml } from "../../src";
 import {
   onWillPatch,
   onWillUnmount,
@@ -7,7 +7,6 @@ import {
   onWillRender,
 } from "../../src/component/lifecycle_hooks";
 import { status } from "../../src/component/status";
-import { xml } from "../../src/tags";
 import {
   elem,
   makeDeferred,

tests/components/props.test.ts

@@ -1,5 +1,4 @@
-import { Component, mount, onWillUpdateProps, useState } from "../../src";
+import { Component, mount, onWillUpdateProps, useState, xml } from "../../src";
-import { xml } from "../../src/tags";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;

tests/components/reactivity.test.ts

@@ -6,8 +6,8 @@ import {
   onWillPatch,
   onWillUnmount,
   useState,
+  xml,
 } from "../../src";
-import { xml } from "../../src/tags";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;

tests/components/style_tag.test.ts

@@ -1,175 +0,0 @@
-import { Component, css, mount, xml } from "../../src";
-import { makeTestFixture } from "../helpers";
-
-let fixture: HTMLElement;
-beforeEach(() => {
-  fixture = makeTestFixture();
-  document.head.innerHTML = "";
-});
-
-describe("styles and component", () => {
-  test("can define an inline stylesheet", async () => {
-    class Root extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = css`
-        .app {
-          color: red;
-        }
-      `;
-    }
-    expect(document.head.innerHTML).toBe("");
-    await mount(Root, fixture);
-    expect(document.head.innerHTML).toBe(`<style data-component=\"Root\">.app {
-  color: red;
-}</style>`);
-    const style = getComputedStyle(fixture.querySelector("div")!);
-    expect(style.color).toBe("red");
-    expect(fixture.innerHTML).toBe('<div class="app">text</div>');
-  });
-
-  test("inherited components properly apply css", async () => {
-    class Root extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = css`
-        .app {
-          color: red;
-        }
-      `;
-    }
-    class OtherRoot extends Root {
-      static style = css`
-        .app {
-          font-weight: bold;
-        }
-      `;
-    }
-    expect(document.head.innerHTML).toBe("");
-    await mount(OtherRoot, fixture);
-    expect(document.head.innerHTML).toBe(`<style data-component=\"Root\">.app {
-  color: red;
-}</style><style data-component=\"OtherRoot\">.app {
-  font-weight: bold;
-}</style>`);
-    const style = getComputedStyle(fixture.querySelector("div")!);
-    expect(style.color).toBe("red");
-    expect(style.fontWeight).toBe("bold");
-    expect(fixture.innerHTML).toBe('<div class="app">text</div>');
-  });
-
-  test("inherited components properly apply css, part 2", async () => {
-    class App extends Component {
-      static template = xml`<div class="app"/>`;
-      static style = css`
-        .app {
-          color: tomato;
-        }
-      `;
-    }
-    class BetterApp extends App {}
-    class EvenBetterApp extends BetterApp {
-      static style = css`
-        .app {
-          background-color: papayawhip;
-        }
-      `;
-    }
-    expect(document.head.innerHTML).toBe("");
-    await mount(EvenBetterApp, fixture);
-    expect(document.head.innerHTML).toBe(`<style data-component=\"App\">.app {
-  color: tomato;
-}</style><style data-component=\"EvenBetterApp\">.app {
-  background-color: papayawhip;
-}</style>`);
-  });
-
-  test("get a meaningful error message if css helper is missing", async () => {
-    class App extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = `.app {color: red;}`;
-    }
-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(
-      "Invalid css stylesheet for component 'App'. Did you forget to use the 'css' tag helper?"
-    );
-  });
-
-  test("inline stylesheets are processed", async () => {
-    class App extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = css`
-        .app {
-          color: red;
-          .some-class {
-            font-weight: bold;
-            width: 40px;
-          }
-          display: block;
-        }
-      `;
-    }
-    await mount(App, fixture);
-    expect(document.head.querySelector("style")!.innerHTML).toBe(`.app {
-  color: red;
-}
-.app .some-class {
-  font-weight: bold;
-  width: 40px;
-}
-.app {
-  display: block;
-}`);
-  });
-
-  test("properly handle rules with commas", async () => {
-    class App extends Component {
-      static template = xml`<div/>`;
-      static style = css`
-        .parent-a,
-        .parent-b {
-          .child-a,
-          .child-b {
-            color: red;
-          }
-        }
-      `;
-    }
-    await mount(App, fixture);
-    expect(document.head.querySelector("style")!.innerHTML)
-      .toBe(`.parent-a .child-a, .parent-a .child-b, .parent-b .child-a, .parent-b .child-b {
-  color: red;
-}`);
-  });
-
-  test("handle & selector", async () => {
-    class App extends Component {
-      static template = xml`<div/>`;
-      static style = css`
-        .btn {
-          &.danger {
-            color: red;
-          }
-        }
-        .some-class {
-          &.btn {
-            .other-class ~ & {
-              color: red;
-            }
-          }
-        }
-      `;
-    }
-    await mount(App, fixture);
-    expect(document.head.querySelector("style")!.innerHTML).toBe(`.btn.danger {
-  color: red;
-}
-.other-class ~ .some-class.btn {
-  color: red;
-}`);
-  });
-});

tests/components/t_component.test.ts

@@ -1,5 +1,4 @@
-import { Component, mount, useState } from "../../src";
+import { Component, mount, useState, xml } from "../../src";
-import { xml } from "../../src/tags";
 import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;

tests/misc/memo.test.ts

@@ -1,6 +1,5 @@
-import { Component, mount, useState } from "../../src";
+import { Component, mount, useState, xml } from "../../src";
 import { Memo } from "../../src/";
-import { xml } from "../../src/tags";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;

tests/misc/portal.test.ts

@@ -9,8 +9,7 @@ import {
   onWillUnmount,
   useState,
 } from "../../src";
-import { Portal } from "../../src/";
+import { Portal, xml } from "../../src/";
-import { xml } from "../../src/tags";
 import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;

tests/reactivity.test.ts

@@ -1,6 +1,13 @@
-import { Component, mount, onWillRender, onWillStart, onWillUpdateProps, useState } from "../src";
+import {
+  Component,
+  mount,
+  onWillRender,
+  onWillStart,
+  onWillUpdateProps,
+  useState,
+  xml,
+} from "../src";
 import { batched, reactive } from "../src/reactivity";
-import { xml } from "../src/tags";
 import {
   makeDeferred,
   makeTestFixture,