Question: how to emit code that is seen by other plugins

[flying-sheep]

Specifically, I want to make rollup-plugin-typescript2 to see something it can understand when it tries to import a .css file. statically, that can be done by creating a .css.d.ts file next to it containing something like

declare namespace style {
    const class1: string
    const class2: string
}
export default style

but that approach has two problems:

• typescript resolves the imports, so by the time rollup gets told to look up the module, typescript is already running without having the needed .d.ts file(s)
• creating ephemeral files in the source directory is dirty

So if i don’t want to create the .d.ts files as a separate step, the problem is that i need two plugins to interact:

1. rollup-plugin-typescript2 sees import style from style.css
2. rollup-plugin-*css* somehow gets to provide the code for that module (which is seen by typescript)
3. rollup-plugin-typescript2’s type checker is happy and rollup-plugin-typescript2 emits JS code
4. rollup bundles it

is this even possible?

cc @ezolenko

[ezolenko]

Unless I'm severely overcomplicating things, this needs a way to inject types into ts language service (even if css plugin manages to deliver them through rollup somehow). There is a feature proposal on typescript side (microsoft/TypeScript#3136), but nothing I can find that already allows for it.

Another option would be to wrap css output in a full ts module (as a different plugin sitting between css and ts), and make sure it gets resolved correctly before ts tries to find the actual file.

If you need to get something working now, you might have to preprocess css files to have d.ts files ready before typescript plugin even initializes.

[flying-sheep]

Unless I'm severely overcomplicating things, this needs a way to inject types into ts language service

yes probably 🙁

Another option would be to wrap css output in a full ts module (as a different plugin sitting between css and ts), and make sure it gets resolved correctly before ts tries to find the actual file.

i don’t understand what you mean here, could you please elaborate?

If you need to get something working now, you might have to preprocess css files to have d.ts files ready before typescript plugin even initializes.

yup, that’s what i did until now. but as said, i’d like to avoid its problems.

[ezolenko]

I mean if you make plugin take css and output valid typescript module instead of whatever it does now (js?). By module I mean something with export and valid typescript code, same thing you do with d.ts, but inline. Then add *.css to typescript plugin input glob and it will be fed to typescript for transpiling.

This will not help with IDE support at all though.

[flying-sheep]

oh yes, for IDE support, we need plugin support in the typescript language server.

didn’t think about that. so there’s three options:

• pre-generate .d.ts files in a separate step from rollup (ugly and pollutes the src directory, but at least we can add *.css.d.ts to .gitignore)
• implement and use plugin support in the typescript language server (not available yet)
• emit typescript code from a CSS plugin for rollup (no IDE support)

thank you!