Include CSS files in tsc TypeScript compilation

Question

I am trying to create a React TypeScript NPM package. I have finished my code and created package.json and tsconfig.json. But inside my package I also have a bunch of CSS files that I want to include in my package. This is my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "removeComments": true,
    "declaration": true,
    "jsx": "react",
    "lib": [ "es2015", "dom" ],
    "sourceMap": false
  },
  "files": [
    "src/index.tsx"
  ],
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

My problem is that when I run tsc in my folder, it creates all .js files and all .d.ts files in /dist, but I see no CSS files at all. How do I do to make it include CSS?

Connecticut

Answer 1

So this is exactly the question I was looking for. Unfortunately for us both I found our answer in this post https://vccolombo.github.io/blog/tsc-how-to-copy-non-typescript-files-when-building/

Basically what it said was that tsc does not do anything other than turn TS code into JS code and there are no plans to change this in the future.

Prologue

TL;DR: After the build, copy the files to the build directly using custom commands or the copyfiles package. – Fleabite

Basically just install rimraf and copyfiles. Make sure to add "rootDir": "src" and "outDir": "dist" to your tsconfig. Then add "scripts": { "clean": "rimraf dist/", "copy": "copyfiles -u 1 src/**/*.html src/**/*.css dist/", "build": "npm run clean && tsc && npm run copy", } these to your package.json. Running npm run build will build the typescript into the dist directory and copy html and css files to your dist directory in the same structure as the src directory. It works perfectly fine. Just make sure to add any other extensions to that copy command like src/**/*.ttf in my case. – Stroud

@Stroud Could you please expand on your comment and add it as an answer? – Felicefelicia

@FrankenCode I was just describing the instructions in the link in the answer. Sorry but my implementation is a bit specific. I created a program that watches my project directory for changes and runs different logic depending on the file type/action. I also made a VS Code extension to support a smoother editor experience when it's auto compiling changes. It's sitting in a private repository right now so I can't share it. But the good news is you don't need all that. If you don't mind running npm run build manually each time you want to compile your code, you shouldn't have a problem. – Stroud

Answer 2

Add this to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

More information can be gotten here https://www.npmjs.com/package/typescript-plugin-css-modules.

Abscissa

This is getting downvotes because that package offers IDE support, but not packaging support. This question is about packaging support. – Elliottellipse