I'm trying to import a CSS file from a subdirectory using ESbuild but I am unable to

[loud scarab]

this is my declarations file

declare module '*.css'

and this is the code I'm trying to run

import css from "./data/style.css"
const style = document.createElement("style");
style.innerHTML = css;
document.head.append(style);

this is my tsconfig

{
  "compilerOptions": {
    "target": "ESNext",                              
    "module": "ESNext",               
    "moduleResolution": "Bundler",
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
  },
  "include": [
    "./src/**/*",
    "./**/*.css",
  ],

} 

this is my build command

"esbuild --bundle ./src/index.ts --outfile=index.js --format=esm  --watch --loader:.css=text"

for some reason I get

 src/index.ts:1:16:
    1 │ import css from "./data/style.css"
      ╵                 ~~~~~~~~~~~~~~~~~~

[spring fog]

can you share the full error? i just tried to replicate your setup and don't see any problems as far as TS is concerned. but maybe this is some esbuild-specific issue?

[loud scarab]

X [ERROR] Could not resolve "./data/style.css"

    src/index.ts:1:16:
      1 │ import css from "./data/style.css"
        ╵                 ~~~~~~~~~~~~~~~~~`

Not sure why this is the case

thats all

I'm not sure how to configure esbuild but I think it should be right

[spring fog]

i pushed my working replication up to github, maybe it'll be useful to help diagnose your issue: https://github.com/mkantor/typescript-css-import-example

when i pull that code and open https://github.com/mkantor/typescript-css-import-example/blob/main/src/index.ts#L1 i don't see any errors

[grave sigil]

import * as style from './data/style.css' // no error

[loud scarab]

hmm...

yea okay, I solved it by doing "../data/style.css" not "./data/style.css"

[spring fog]

yeah i was just gonna say i guess i should have written ../data/style.css in that example, but this just goes to show how forgiving this configuration is 😅

[loud scarab]

seems to work now

I'll see if I can import the other files I want

[spring fog]

i think when you write declare module '*.css' then you're able to import from literallyanything.css without TS complaining, but if other tools actually need to open an existing file then the path needs to point somewhere legit

i wonder if there's a way to configure things so that only imports to actually-existing in-tree files will be allowed by TS. it'd be nice if you got an error before esbuild with what you tried

[loud scarab]

hmm I

[spring fog]

i don't know offhand though, i very rarely write declaration files

[loud scarab]

What's best practice?

[leaden turret]

I don't think so - I've thought that would be nice, but there isn't a TS primitive for 'string, but only paths to valid files'. (And sometimes those file paths don't exist at the same place pre-building)

If getting these sort of imports wrong is common, I'm pretty sure there's a rule in https://github.com/import-js/eslint-plugin-import that can verify them.

Looks like it'd be https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md

[loud scarab]

everything seems to be working now

Thanks