I am working on a project in Typescript where the files are built using rollup.js. Within my project, I have certain declaration files set up and I am curious if it is feasible to include these declaration files in the final built declaration file.
Declaration file:
// src/styled-components.d.ts
import 'styled-components';
declare module 'styled-components' {
export interface DefaultTheme {
colors: {
gray: string;
primary: string;
};
}
}
Current final built declaration file:
// dist/index.d.ts
export { default as DesignSystemProvider, } from './providers/DesignSystemProvider';
export { default as Button } from './components/Button';
export { default as Checkbox } from './components/Checkbox';
Expected final built declaration file:
// dist/index.d.ts
import 'styled-components';
declare module 'styled-components' {
export interface DefaultTheme {
colors: {
gray: string;
primary: string;
};
}
}
export { default as DesignSystemProvider, } from './providers/DesignSystemProvider';
export { default as Button } from './components/Button';
export { default as Checkbox } from './components/Checkbox';
Reason
By incorporating this library into another, I aim to access the typings of styled-components props.
Configuration Files
// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescript from 'rollup-plugin-typescript2';
import url from 'rollup-plugin-url';
import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
file: pkg.module,
format: 'es',
exports: 'named',
},
],
plugins: [
peerDepsExternal({
includeDependencies: true,
}),
url(),
nodeResolve({
// browser: true solves
// indexof (imported by ../../../node_modules/component-classes/index.js, indexof?commonjs-external)
browser: true,
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
}),
typescript({
exclude: ['**/*.stories.tsx', '**/*.spec.tsx'],
rollupCommonJSResolveHack: true,
clean: true,
}),
commonjs({
include: /\**node_modules\**/,
}),
postcss(),
sizeSnapshot(),
],
};
// tsconfig.json
{
"compilerOptions": {
"outDir": "build",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": ["src"],
"exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
}