Rollup can't find CSS sibling files for components when running in Bazel sandbox in Stencil >= 1.15.0

Open
#2,840 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
rollup, typescript
Domain
build-system, tooling

Research direction

Start with the Bazel reproduction repository and compare the build behavior between Stencil 1.14.0 and 1.15.0 or newer. Then inspect src/utils/normalize-path.ts around line 143 and the Rollup path resolution involved in component styleUrls; done means the Bazel sandbox resolves each component's sibling CSS file while preserving the expected build outputs.

Written by the indexing model from the issue text.

Description

Request For Comments Resolution: Needs Investigation

Stencil version:

 @stencil/core >=1.15.0 (tested on newest releases as well 2.5.2)

I'm submitting a:

Current behavior:

This change only happens when upgrading from version 1.14.0 to version 1.15.0 and is affected at every version >= 1.15.0.
When running in a Bazel sandbox, rollup is unable to resolve imports for the corresponding CSS file for a stencil component.

Say I have a component as the one pasted below, the build will work fine running directly via stencil, but then when executing through Bazel, Rollup says it can't resolve the import:

[ ERROR ]  Rollup: Unresolved Import
           Could not resolve './my-comp?tag=my-comp' from
           ./src/components/my-comp/my-comp.tsx at error

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

@Component({
  tag: "my-comp",
  styleUrl: "my-comp.css",
})
export class MyComp {
  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }
}

Expected behavior:
Rollup should find the files if they are located in the correct place.

Steps to reproduce:

I have taken the time to make an example repo exemplifying the issue and have left run instructions there. The repo illustrates that everything works with 1.14.0 but not with 1.15.0 and above

https://github.com/loudmouth/bazel-stencil

Note that simply omitting component CSS all together, but continuing to include globalStyle, the build succeeds with all expected outputs, leading me to believe this is specific only to the way CSS files set via styleUrls are resolved

Related code:

Other information:

I was reviewing the changes from 1.14.0 to 1.15.0 and was curious if possibly this issue could be due to a change in the way CSS file paths are normalized.

(If that hyperlink doesn't work, it's in the diff from 1.14.0 to 1.15.0 at src/utils/normalize-path.ts, line 143)

Dominant language
TypeScript
Stars
13.1k
Forks
855
Avg merge
4h 7m
Merged PRs (30d)
44

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.