fix resolution of imported css files

[KonnorRogers]

Not sure why, but when trying to use this package with Shoelace / Web Awesome, it was not actually finding the CSS files and transforming them. The filter was never able to find them when I imported a ".css" file inside of a ".ts" file.

I released my own fork https://www.npmjs.com/package/@konnorr/esbuild-plugin-lit-css that is using the code in the PR. I figured I'd be a good user and PR the changes should you want to upstream them :)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9830e05

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[bennypowers]

Can you add a test? Were you able to reproduce?

[KonnorRogers]

I'll take a look at making a reproduction and file a separate issue. Seems this fails your tests here so maybe it doesn't work if the css file is an entry point?

[KonnorRogers]

🙃 well. Turns out the problem was a plugin.

TLDR is I had this:

import { replace } from "esbuild-plugin-replace"
import litCssPlugin from "esbuild-plugin-lit-css" 

const config = {
  plugins: [
    replace(),
    litCssPlugin()
  ]
}

Won't work, but if you remove the replace() function, everything works as expected.

-import { replace } from "esbuild-plugin-replace"
import litCssPlugin from "esbuild-plugin-lit-css" 

const config = {
  plugins: [
-   replace(),
    litCssPlugin()
  ]
}

Turns out...the order of these matters. The first plugin to return {contents: ""} will be used by the loader and no other onLoad hooks will run. I'm going to close this PR as it's not an issue with the plugin. And now im even more confused why my plugin worked (perhaps because its making a namespace and dodging the replacer plugin) 🙃

evanw/esbuild#2607

angular/angular-cli#26326

Reproduction: https://github.com/KonnorRogers/esbuild-plugin-lit-css-reproduction

[bennypowers]

Interesting! Thanks for looking into this. If we added a namespace here, would that solve the problem?

[KonnorRogers]

@bennypowers I don't believe so. What I had seemed to work by accident, and only worked in some versions of esbuild 🙃