--next and v1.10.x doesn't import css

[peterpeterparker]

Stencil version:

v1.9.x with --next or >= v1.10.x

I'm submitting a:
[X] bug report

Current behavior:
With the new compiler, CSS aren't imported anymore. In our code highlighter component is use both sass() and postcss plugins. In the sass file I specify the following import:

@import "~prismjs/themes/prism.css";

which until v.1.9.x with --legacy compiler had for effect to include (import) the related css into the bundle.

with the new compiler, the CSS code isn't imported anymore. I found many occurrences of @import "~prismjs/themes/prism.css"; in my dist folder where actually I should find none but rather the effective CSS code.

Steps to reproduce:

Use https://github.com/deckgo/deckdeckgo/tree/master/webcomponents/highlight-code

Play with the @stencil/core version.

Config:

plugins: [
    sass(),
    postcss({
      plugins: [autoprefixer()]
    })
  ]

stencil/postcss": "^1.0.1",
stencil/sass": "^1.1.1"

[silentHoo]

I've found a similar behavior starting with the new compiler in 1.10.0. All previous versions of @stencil/core downwards work like I expected it. I tested this with 1.9.0, 1.9.1 and 1.9.2.

When I use the cli's --legacy flag (v1.9.2...v1.10.0#diff-ac537aa3dd47632b383f958efe8515e7R17-R20) it runs like it should.

So I did a deep dive into this issue and found, that the styles are included, BUT the generated JavaScript output is a little different for the entry files (e.g. dist/my-elements/p-<any hash here>.entry.js):

@stencil/core v1.10.0 with --legacy and @stencil/sass v1.1.1 (extracted + beautified + unescaped)

/* 
  this is an excerpt of the return value of the 
  "static get style()" method in the entry file 
*/

:host .mdc-button {
  font-family: "Lato", Helvetica, Verdana, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
  border-radius: 0 24px 24px 24px;
  -webkit-animation: "round-to-edge" 0.3s;
  animation: "round-to-edge" 0.3s
}

@stencil/core v1.10.0 without --legacy and @stencil/sass v1.1.1 (extracted + beautified)

/* 
  this is an excerpt of the return value of the 
  "style" property in the entry file 
*/

:host .mdc-button {
  font-family: "Lato", Helvetica, Verdana, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
  border-radius: 0 24px 24px 24px;
  animation: "round-to-edge"0.3s
}

As you can see there is no space between the animation name and the duration. This causes my element not to show the animation among other unexpected behaviors in other components.

Here's the visual diff (left: v1.10.0 with --legacy, right: v1.10.0 without --legacy):

Current workaround for me:

@stencil/core v1.10.3 with --legacy flag until a fix is available.

[peterpeterparker]

Thank you @adamdbradley 👍

[adamdbradley]

And if you're using sass, please also update to the latest @stencil/sass since it'll be able to provide node_module resolving with the updates.

[peterpeterparker]

Looks good, I was able to publish our webcomponents to npm. Thank you @adamdbradley 🙏