stencil-community / stencil-postcss

Autoprefixer plugin for Stencil
https://www.npmjs.com/package/@stencil-community/postcss
Other
30 stars 24 forks source link

injectGlobalPaths causes error on rendering #33

Open sidharthramesh opened 3 years ago

sidharthramesh commented 3 years ago

Everything works fine without it, but adding injectGlobalPaths to the PostCSS config causes this error:

index-78323a20.js:2706 ReferenceError: Cannot access 'globalCss' before initialization
    at my-component.entry.js:7 undefined
consoleError @ index-78323a20.js:2706
index-78323a20.js:1949 Uncaught (in promise) Error: Constructor for "my-component#undefined" was not found
    at initializeComponent (index-78323a20.js:1949)

I am trying to use tailwindcss with PostCSS. The error can be reproduced with this branch. Adding the injectGlobalPaths always fails. Seems like some variables aren't defined on the client side.

sidharthramesh commented 3 years ago

I have mentioned only once in my global css src/global.css:

:host {
    background-color: aqua;
}

and in my component css src/components/my-component/my-component.css:

:host {
  display: block;
}

But there is something weird going on in the build/my-component.entry.js. Seems like the css is repeated multiple times. Also globalCss is not initialized?

import { r as registerInstance, h } from './index-78323a20.js';

function format(first, middle, last) {
  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
}

const globalCss = globalCss + globalCss + globalCss + globalCss + globalCss + ":host{background-color:aqua}:host{background-color:aqua}:host{background-color:aqua}:host{background-color:aqua}:host{background-color:aqua}:host{background-color:aqua}";

const myComponentCss = globalCss + ":host{display:block}";

const MyComponent = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  getText() {
    return format(this.first, this.middle, this.last);
  }
  render() {
    return h("div", { class: "text-purple-600" }, "Hello, World! I'm ", this.getText());
  }
};
MyComponent.style = myComponentCss;

export { MyComponent as my_component };
splitinfinities commented 3 years ago

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now. Could you help me out by creating a reproduction repo? I'd love to take a peek at this sooner than later.

timsnadden commented 2 years ago

@sidharthramesh I had a similar issue. I'm afraid I haven't looked into it properly but I was able to resolve it for now by modifying the file extension to .pcss.