ReferenceError: stylis is not defined

eolculnamo2 commented 5 years ago

It seems its unable to find stylis.

import { Component, h, State } from "@stencil/core";
import styled from "stencil-styled-components";

const MainHeader = styled.h1`
  color: red;
`;

@Component({
  tag: "app-home",
  styleUrl: "app-home.css"
})
export class AppHome {
  @State() home: string = "HOME";

  updateHome() {
    if (this.home === "HOME") {
      this.home = "home";
      return;
    }
    this.home = "HOME";
  }

  render() {
    return [
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Home</ion-title>
        </ion-toolbar>
      </ion-header>,

      <ion-content class="ion-padding">
        <MainHeader>{this.home}</MainHeader>
        <p>
          Welcome to the PWA Toolkit. You can use this starter to build entire
          apps with web components using Stencil and ionic/core! Check out the
          README for everything that comes in this starter out of the box and
          check out our docs on{" "}
          <a href="https://stenciljs.com">stenciljs.com</a> to get started.
          <button onClick={() => this.updateHome.call(this)}>
            {this.home}
          </button>
        </p>

        <ion-button href="/profile/ionic" expand="block">
          Profile page
        </ion-button>
      </ion-content>
    ];
  }
}

sedusa commented 4 years ago

Getting the same error. Have you been able to resolve this issue?

trsedusa commented 4 years ago

Ended up using https://github.com/fifthbeat/styled-stencils. Seems to work fine. Will dig through the code later on and figure out what's going on.

NEO97online / stencil-styled-components

ReferenceError: stylis is not defined #11