[REM] component: remove support for css tag

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 { xml } from "../../src/tags";
+import { App, Component, mount, status, useState, xml } from "../../src";
 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 { xml } from "../../src/tags";
+import { App, Component, mount, useState, xml } from "../../src";
 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 { xml } from "../../src/tags";
+import { Component, mount, onWillUpdateProps, useState, xml } from "../../src";
 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 { xml } from "../../src/tags";
+import { Component, mount, useState, xml } from "../../src";
 import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;