[IMP] tags: reintroduce inline css tag

The CSS tag is useful to define a css stylesheet in the javascript file:
```js
class MyComponent extends Component {
  static template = xml`
        <div class="my-component">some template</div>
    `;
  static style = css`
    .my-component {
      color: red;
    }
  `;
}
```

The `css` tag registers internally the css information. Then, whenever the first instance of the component is created, will add a <style> tag to the document <head>.

Original commit in Owl v1: 953778dc5
This commit is contained in:
Bruno Boi
2021-11-03 10:00:15 +01:00
committed by Aaron Bohy
parent d3745e4e5f
commit 348b505e5f
6 changed files with 266 additions and 143 deletions
+4
View File
@@ -12,6 +12,7 @@ import {
} from "./fibers";
import { applyDefaultProps } from "./props_validation";
import { STATUS } from "./status";
import { applyStyles } from "./style";
export function component(
name: string | typeof Component,
@@ -89,6 +90,9 @@ export class ComponentNode<T extends typeof Component = any> implements VNode<Co
applyDefaultProps(props, C);
this.component = new C(props, app.env, this) as any;
this.renderFn = app.getTemplate(C.template).bind(null, this.component, this);
if (C.style) {
applyStyles(C);
}
this.component.setup();
}