Can't resolve style imports in .d.ts files

[ccrowley96]

I have this plugin operating on the generated .d.ts files in my dist/ folder.

When add a rollup config with the plugin, it breaks on import './something.scss' syntax in the .d.ts file, because there is no scss file copied over into dist. Is there any way around this?

Thanks : )

[ccrowley96]

This is my use case:

The library I'm working on can directly import components using: import comp from 'library/comp' syntax I've run into a problem with typescript .d.ts declaration files however. Typescript seems to generate the type files into the distribution folder in the same folder structure as the source code, while the bundles are all generated at the root with entry point names. I'm not sure applications that consume the library can reference the correct type declaration files. Here's an example:

--> Source files
src/
  components/
    linechart/
      linechart.ts
  scatterplot/
      scatterplot.ts

--> Dist files
library.js (umd all up bundle)
linechart.js
scatterplot.js
components/
  linechart/
    linechart.d.ts
  scatterplot/
    scatterplot.d.ts

When using import LineChart from 'library/linechart Typings aren't working!

I'm using this library to generate a .d.ts bundle for each rollup direct import entry point. However it seems to be breaking on styling imports in the .d.ts files.

[ccrowley96]

Is there a way to just ignore style imports in .d.ts files. Or what am I doing wrong here?

[myWsq]

Create a new input option and provide an external regexp.

const config = [
 {...},
  {
    input: "src/index.ts",
    output: [
      {
        format: "es",
        file: `dist/index.d.ts`,
      },
    ],
    external: [/\.scss$/],   // ignore .scss file
    plugins: [dts()],
  },
];

[Swatinem]

Sorry for the delay.

So yes, you can either treat them as external like @myWsq suggested.

But I am wondering why rollup is trying to pull them in in the first place. Or rather, why typescript leaves the imports in place when doing its internal .ts -> .d.ts transformation.

So when marking them as external does not properly work (because the imports remain in the final rollup), you might have to define your own rollup plugin which loads them and returns a similar "fake AST" as my plugin does.

Is your code open source, or do you want to create a minimal repro for this?

[myWsq]

Here is a minimal example.

[patrickkuhlmann]

Hey 2 years later I stumbled over this. Did you end up fixing it @ccrowley96 ?

[sonterix]

Hey! The same for me? Do we have any new solution?

[ccrowley96]

@patrickkuhlmann & @sonterix -- this is the rollup file that I was working with: https://github.com/microsoft/tsiclient/blob/master/rollup.config.js

I believe what I ended up doing was pulling out the plugins to an object & applying those to the dts() pass. It have also been that I configured postCSS to extract the styles to a single file. This was a while ago & I'm no longer working on this library, but I hope this config can help in some way!

[ronny1020]

@patrickkuhlmann & @sonterix -- this is the rollup file that I was working with: https://github.com/microsoft/tsiclient/blob/master/rollup.config.js

I believe what I ended up doing was pulling out the plugins to an object & applying those to the dts() pass. It have also been that I configured postCSS to extract the styles to a single file. This was a while ago & I'm no longer working on this library, but I hope this config can help in some way!

I think if adding the postcss() to the plugins, although the source would be able to compile, there would be some style-related code in the compiled files. At least it happened in the project I'm working on.