SyntaxError: Unexpected token, with TypeScript files. :{

[trusktr]

I was trying to use this with TypeScript, but it fails. Trying to compile with TypeScript first fails with SyntaxErrors too.

Example webpack.config.js:

var webpack = require('webpack');

module.exports = {
  entry: '...',
  devtool: 'source-map',
  output: {
    path: '...',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /(\.tsx)$/,
        use: ['ts-loader', 'cssx-loader'],
        exclude: /node_modules/
      }
    ]
  }
};

One problem, for example, is with a file that has this in it:

export = function() {...}

Seems that CSSX doesn't know what to do with that TypeScript-style export.

[krasimir]

Hm ... that's an interesting problem that I'm not sure how to solve. As far as I understood you have a file that contains typescript and CSSX inside and:

• TypeScript compiler can't compile that file because it doesn't understand CSSX
• CSSX transpiler can't compile TypeScript syntax because it doesn't understand it

Pehaps

• TypeScript compiler starts understanding CSSX (won't happen)
• CSSX transpiler starts understanding typescript (this means that we have to cover all the differences between JavaScript and TypeScript and make sure that we output the same code)
• We implement a eslint-like comment where we wrap the TypeScript special code

The third option is more likely to be done but still requires knowledge of TypeScript and digging deeper in CSSX transpilation.

What you think?

[trusktr]

What about also supporting template strings? So instead of

let style = <style>
  input {
    color: red;
  }
<style>

we can write

let style = cssx`
  input {
    color: red;
  }
`

and CSSX can transpile that (with optional leaving it as is and it would work at runtime too)?

[trusktr]

The template string version would actually be very very nice, because I am using this plugin to syntax highlight template strings in any language (including CSS): https://github.com/Quramy/vim-js-pretty-template

[trusktr]

And TypeScript understands template strings, so no problem; I can run CSSX transpiler after TypeScript. Well, I would have to make sure that TypeScript doesn't transpile the template strings to normal strings.

[trusktr]

I guess it would be easy to modify TypeScript to ignore template strings at that point.

[krasimir]

Ah nice idea. Template string support is doable. I'll think about it. I didn't touch the transpiler for months so it may take some time. Sorry.

[trusktr]

No worries, just using JS object literals for now.