css prop not working when used with typescript plugin in rollup

[khanakia]

I am facing an issue

CSS props not working properly they are rendering as <div css="background:papayawhip;">Hello</div>

When i use the typescript plugin as below code then it does not work

typescript({ 
  tsconfig: path.resolve('./tsconfig.json'),
  transformers: [
    () => ({
      before: [styledComponentsTransformer],
    }),
  ],
}),

babel({
  extensions: [".js", ".jsx", ".ts", ".tsx"],
  plugins: ["babel-plugin-styled-components"],
  presets: [
    [ "@babel/preset-react", ],
  ],
}),

But when i use this without typescript it works

babel({
  extensions: [".js", ".jsx", ".ts", ".tsx"],
  plugins: ["babel-plugin-styled-components"],
  presets: [
    ["@babel/preset-typescript",],
    ["@babel/preset-react", ],
  ],
}),

But i need to make this work with Typescript plugin as i want the .d.ts types files to be generated as well babel does not generate the types files.