Unexpected Characters when Importing CSS

[foxmicha]

Hello, I'm having some issues importing CSS files and attempting to bundle them using tsify.

The error I'm getting explicitly is:

SyntaxError: Unexpected character '#'

That error appears after attempting the following (test) command:
browserify .\react_class_demo.tsx -p [tsify] > bundle.js

The files in question are quite simple, the CSS file only contains the following:

#ReactClassDemo {
  color: red;
  text-align: "center"; }

the TSX file then tries to import this file as such:

...
import "../../../../css/sass/build/react_demo/react_demo_styles.css";
...

From my reading of various examples on the web, there shouldn't be anything else required to get this to transpile. My tsconfig file is as follows:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false,
        "jsx": "react",
        "forceConsistentCasingInFileNames": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "allowSyntheticDefaultImports": true
    }
}

Any insight is greatly appreciated. Thanks!

[cartant]

tsify is just a Browserify plugin that uses the TypeScript compiler API to create in-memory copies of the output .js files. The bundling is still up to Browserify. That means you will have to use some sort of Browserify plugin or transform to handle the CSS files. By default, Browserify won't know what they are; it's expecting to find files containing JS.

I would suggest looking at something like stringify.

[foxmicha]

I think I'm tracking, and maybe its because of my babelify package that is attempting to reduce the JS down to ES5 compatibility.

I appreciate your suggestion, although it appears to turn the CSS file into a module and export it that way. Unfortunately, that prevents the CSS from being added to the screen and applied.

I'll close out this issue since it does not appear to be a tsify issue. Thanks again!