Problems with loading *.css files

[mxro]

I'm trying to import a CSS file from a TypeScript source as follows:

import styles from './index.css';

My problem is that I receive the following error:

C:\Users\Max\repos\ts-node-files-test\src\index.css:1
.hi {
^

SyntaxError: Unexpected token '.'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)

Here a sample GitHub project I put together: https://github.com/mxro/ts-node-files-test

What I have tried:

• Following the instructions under Missing Types in the ts-node documentation.
• Using the --files directive (package.json#L7)
• Providing a typings.d.ts file that declares a declare module '*.css';
• Explicit listing the typings.d.ts file in the tsconfig "includes" array
• I confirmed from the debug log that ts-node loads the typings.d.ts file (output.txt#L6)

Note that running tsc over the same project runs without issue.

[cspotcode]

It's not clear what you are expecting to happen, since node cannot execute css files, and declare module '*.css'; does not tell it how to execute css files.

[mxro]

Thanks your response and good point!

What I would like to happen is to get a map with the class names from the CSS file (see css-modules), e.g. see some more definite typing here: https://github.com/mxro/ts-node-files-test/blob/master/typings.d.ts#L4 (commented that out, but even using this approach, it doesn't work).

I also tried using typescript-plugin-css-modules with no success (I understand that doesn't apply to compilation in any case).

I guess my key question is also why I can run tsc without any issues but only get the error when using ts-node?

[cspotcode]

You're running tsc but never executing the code? ts-node is executing the code, so comparing tsc to ts-node is not a meaningful comparison.

[mxro]

Oh true! I erroneously assumed the error occurred during compilation and not execution! So I guess I would have to use something like node-loader-postcss?

[cspotcode]

Probably, but I can't help with that. Just know that ts-node, typescript, and node do not handle importing of css files. It's not a typescript standard nor a node standard, so you'll need something else to enable that for you.

[mxro]

Provided some instructions on how to resolve this and a simple library here: node-css-require.

Running the following code before requiring any CSS will prevent the SyntaxError:

import { register } from 'node-css-require';

register();

This will work in vanilla Node.js, TypeScript and ts-node.

Happy to hear of any better approaches or ideas for improvement!