[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;