StencilJS Component Styles

Question

What is the proper way to use the styles option/property of the ComponentDecorator? Using the styles property with the default my-name component from the repository stencil-component-starter doesn't seem to affect the styles of the respective component nor generate something like a <style> tag in the <head>. How is styles intended to work? Or has it not been implemented yet? If the goal is to avoid having a separate CSS asset that needs to be loaded, but provide styles for the component, would styles be the right choice or is there another property such as host would need to be used?

Below is a sample component generated from the stencil-component-starter]1 with stylesUrl @Component property replaced with a styles property and setting font-size property. No errors are generated during dev or build tasks.

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-name',
  styles: `my-name { font-size: 24px; }`
})
export class MyName {

  @Prop() first: string;

  render() {
    return (
      <div>
        Hello, my name is {this.first}
      </div>
    );
  }
}

ComponentDecorator is defined as:

export interface ComponentOptions {
    tag: string;
    styleUrl?: string;
    styleUrls?: string[] | ModeStyles;
    styles?: string;
    shadow?: boolean;
    host?: HostMeta;
    assetsDir?: string;
    assetsDirs?: string[];
}

Thank you for any help you can provide!

David Lacourt David Lacourt · Accepted Answer · 2017-10-12T20:18:01

I just tried with latest version 0.0.6-22, and it seems to work completely now.

While compiling, it will tell you if your styles contents is valid or not (mainly looking for valid selectors).

Here is a working example (with a simple string):

import { Component, Prop } from "@stencil/core";

@Component({
  tag: "inline-css-example",
  styles: 'inline-css-example { font-size: 24px; }'
})
export class InlineCSSExampleComponent {
  @Prop() first: string;

  render() {
    return <div>Hello, my name is {this.first}</div>;
  }
}

This one works too, with ES6 Template Strings (just showing multiline):

import { Component, Prop } from "@stencil/core";

@Component({
  tag: "inline-templatestring-css-example",
  styles: `
    inline-templatestring-css-example {
      font-size: 24px;
    }
  `
})
export class InlineCSSExampleComponent {
  @Prop() first: string;

  render() {
    return <div>Hello, my name is {this.first}</div>;
  }
}

(EDITed to show evolution since 0.0.6-13)

StencilJS Component Styles

1 Answers