Stencil + Vanilla-extract example

[Zegoverno]

Anyone working with stencil?

[R-Bower]

I am and I'm curious about how well the two will work together. I'm building a component library in stencil. It seems like the apps that consume my library will still need to handle css compilation, particularly when using the sprinkles api.

[mattcompiles]

I've never used stencil but it looks like it's rollup based. Try adding the @vanilla-extract/rollup-plugin to the rollupPlugins option. Ideally, you'll end up with straight .js and .css imports after compilation. Sprinkles/Recipes should be handled by this as well.

[arthur-fontaine]

I managed to use vanilla-extract using @vanilla-extract/rollup-plugin as @mattcompiles mentioned. But I also had to do 2 more steps:

• remove the dist-custom-elements output target from my stencil.config.ts*
• remove Shadow DOM of all my components that use vanilla-extract

*dist-custom-elements and dist-custom-elements-bundle output targets seem not to run the Rollup plugins and I don't know why.

---

stencil.config.ts

import { Config } from "@stencil/core";
import { vanillaExtractPlugin } from "@vanilla-extract/rollup-plugin";
import { reactOutputTarget } from "@stencil/react-output-target";
import { solidOutputTarget } from "stencil-solid-output-target";

export const config: Config = {
  namespace: "example",
  outputTargets: [
    reactOutputTarget({
      componentCorePackage: "./../../..",
      proxiesFile: "./dist/react/src/index.ts",
      includeDefineCustomElements: true,
    }),
    solidOutputTarget({
      componentCorePackage: "./../../..",
      proxiesFile: "./dist/solid/src/index.ts",
      includeDefineCustomElements: true,
    }),
    {
      type: "dist",
      esmLoaderPath: "./loader",
    },
    {
      type: "docs-readme",
    },
  ],
  rollupPlugins: {
    before: [vanillaExtractPlugin()],
  },
};

my-component.tsx

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

import { myComponentStyle } from "./my-component.css";

@Component({
  tag: "my-component",
  // shadow: false (already false by default)
})
export class MyComponent {
  render() {
    return (
      <Host>
        <div class={myComponentStyle}>Bonjour</div>
      </Host>
    );
  }
}

my-component.css.ts

import { style } from "@vanilla-extract/css";

export const myComponentStyle = style({
  backgroundColor: "pink",
});

[arthur-fontaine]

I just published a plugin that allows you to use vanilla-extract without the limitations I mentioned in my previous message (#403).

https://github.com/arthur-fontaine/stencil-vanilla-extract-plugin
https://www.npmjs.com/package/stencil-vanilla-extract-plugin

import { Component, h } from '@stencil/core';
import { button } from './button.css.ts';

@Component({
  tag: 'demo-button',
  styleUrls: ['button.css'],
})
export class Button {
  render() {
    return <button class={button}>Click me</button>;
  }
}

It works like the Sass plugin. It will generate a stylesheet and link it to the component.

[R-Bower]

@arthur-fontaine Cool plugin, been using it locally for development. I think there are some issues in dev/watch mode though.

Frequently, when I edit the render() function of a class that uses vanilla-extract styles, I see an error message + failed compilation:

[ ERROR ]  Rollup: Unresolved Import
           Could not resolve './q-product-icon-legacy.css?tag=q-product-icon-legacy'
           from ./src/components/product-icon/legacy/q-product-icon-legacy.tsx

[03:48.0]  rebuild failed, watching for changes... in 2.77
           s

The command I'm running is:
stencil build --watch

Any ideas?

[arthur-fontaine]

@arthur-fontaine Cool plugin, been using it locally for development. I think there are some issues in dev/watch mode though.

Frequently, when I edit the render() function of a class that uses vanilla-extract styles, I see an error message + failed compilation:

[ ERROR ]  Rollup: Unresolved Import
           Could not resolve './q-product-icon-legacy.css?tag=q-product-icon-legacy'
           from ./src/components/product-icon/legacy/q-product-icon-legacy.tsx

[03:48.0]  rebuild failed, watching for changes... in 2.77
           s

The command I'm running is:
stencil build --watch

Any ideas?

@R-Bower Thank you for the report. Can you please open an issue on the repository? And, ideally, include a reproducible example?

[R-Bower]

Sure thing. I'll host a reproduction within a few days. Should also note that it always work on a fresh stencil build --watch, and only errors when the watcher updates in response to a change.

[R-Bower]

hosted: arthur-fontaine/stencil-vanilla-extract-plugin#1

[alexis-regnaud]

I got those errors :

• With @vanilla-extract/rollup-plugin
  
  and the config

  rollupPlugins: {
    before: [
      vanillaExtractPlugin()
    ]
  },

• With stencil-vanilla-extract-plugin
  
  and the config

  plugins: [
    vanillaExtractStencilPlugin()
  ],
  rollupPlugins: {
    before: [
      vanillaExtractRollupPlugin()
    ]
  },

[arthur-fontaine]

Could you open an issue in the stencil-vanilla-extract-plugin repository with a reproducible example? It will be more appropriate to help you there.

[artursopelnik]

+1 it still not works

[arthur-fontaine]

+1 it still not works

And you are still free to open an issue and contribute :))))