Typescript typings

[timsuchanek]

First of all, awesome tool!
We're using it together with TypeScript and it works like a charm.
However, jsx and global are no standard html attributes, so the React Typings don't include them and the TypeScript compiler throws errors.
That can easiliy be fixed with these 2 additions:
DefinitelyTyped/DefinitelyTyped@master...timsuchanek:patch-1
What are your ideas on it? Is there another way to make it work with TypeScript?
Thanks

[rauchg]

Aren't people usually including something like @types/styled-jsx? Otherwise we have to support TS, Flow, etc whatever comes next

[giuseppeg]

Aren't people usually including something like @types/styled-jsx?

Yep flow, closure compiler and I suppose TS support external declarations

[timsuchanek]

Yes, @types/styled-jsx would be the way to go, however in my understanding the current version of TypeScript doesn't support "merging of Interfaces in namespaces", which needs to be done, because the according interface of the <style> element in @types/react is in a namespace.
So I see as a current approach only adding it to the @types/react types until that merging issue is resolved.
I have created a pull request for the react types, lets see how that works out.
DefinitelyTyped/DefinitelyTyped#14198

[Hotell]

sry for off topic, but how are u using it with typescript @timsuchanek ? you are double transpiling? TS -> Babel ( because according to docs, you need babel styled-jsx plugin )

[timsuchanek]

@Hotell Indeed, so first I'm transpiling with "jsx": "preserve" set in the .tsconfig and then running babel over it.
Using webpack that's just babel-loader!awesome-typescript-loader

[niksurff]

That brings up the question if styled-jsx shouldn't be used like:

import Style from 'styled-jsx/component'

const IAmRed = () => (
  <div>
    <p>I'm red</p>
    <Style>{`p { color: red; }`}</Style>
    <Style global>{`body { background: white; }`}</Style>
  </div>
)

This might be more according to React standards and doesn't interfere with native elements.

[rauchg]

@nikvm the issue is that that makes me think the component is standalone, but in reality it requires transpilation. It's actually less intuitive.

Good discussion to have though

[ghost]

I took advice from @timsuchanek and simply put this in my code, in typings/styled-jsx.d.ts

import 'react'
// Augmentation of React
declare module "react" {
  interface HTMLProps<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

It works like a charm!

[jvoros]

Thanks for the explanation @timsuchanek. Couldn't figure out why it wasn't working, reconfigured webpack to let babel do the jsx transpiling, not awesome-typescript-loader, like you described, working great now.

[smeijer]

Regarding to typescript and styled-jsx, any idea how to fix this one?

<style jsx>
</style>

Error:(38, 16) TS2339:Property 'jsx' does not exist on type 
  'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.

[smeijer]

I was able to fix it with:

// custom.d.ts
import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

[tomitrescak]

@nikvm can it actually be used like that? I’m searching for a solution that does not require Babel and can go pure Typescript

[naffiq]

@smeijer

Hi, thanx for the fix, but I can't make it work.

My tsconfig.json is:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2015",
        "jsx": "react",
        "allowJs": true,
        "typeRoots": [ 
            "node_modules/@types",
            "./typings"
        ]
    },
    "exclude": [
        "next.config.js"
    ]
}

I'm very fresh with typescript, sorry for bothering

[littlepoolshark]

Now,I have resolve the error "Property 'jsx' does not exist on type ".But I still can not make styled-jsx work with the awesome-typescript-loader.My webpack.config.js is showed below:
{ test:/\.tsx?$/, use:[ "babel-loader", "awesome-typescript-loader" ] }

[lesnitsky]

check out DefinitelyTyped/DefinitelyTyped#22181

[lesnitsky]

added more typings in this PR. Would appreciate @giuseppeg's review

extension of react style Element supporting jsx and global attributes is already available in @types/styled-jsx package

[lesnitsky]

@giuseppeg This issue could be closed as DefinitelyTyped/DefinitelyTyped#22516 was merged and typings already available under @types/styled-jsx

[1kohei1]

Hi, I installed @types/styled-jsx and errors is gone. However, the style is not reflected in the next app. Can someone help me figure this out, please🙏 If I add global, style is reflected, but I would like to avoid.

My tsconfig.json is:

{
  "compilerOptions": {
    "jsx": "react-native",
    "module": "commonjs",
    "strict": true,
    "target": "es2017",
    "sourceMap": true
  }
}

The component which style is not applied is this file: https://github.com/1kohei1/sd-scheduler/blob/master/front/components/MyLayout.tsx

[a-ignatov-parc]

@1kohei1 you are trying to pass className to components and not DOM elements. styled-jsx doesn't transform such things. But you can use this workaround to pass them explicitly.

[1kohei1]

@a-ignatov-parc Ok! Thank you! I decided to apply style by style tag!

[Matityahul]

Has anyone managed to use styled-jsx with typescript and CSS in separate file?

Here it looks like they did that, but it doesn't work for me, I'm not sure this test really passed.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/1fef13d8905124003d7511a03e89d1c5e60ba4d6/types/styled-jsx/styled-jsx-tests.tsx

I get the same error like mentioned in the referenced issue #381

[ahoyahoy]

How write this for Inferno?

import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

[giuseppeg]

@R1ZZU can you help these folks?

[bensaufley]

Found my way here because I'm having trouble with styled-jsx when it comes to Mocha testing in a TypeScript environment. To start: I have no problem using 2.2.6 to produce browser-ready pages. It's only in the Mocha pipeline that I encounter issues, because I have to use ts-node/register and babel doesn't fit neatly into that.

One part of the problem is a PR I submitted to DefinitelyTyped here, to properly represent styled-jsx/css in Types; but I think I the error was on the wrong side—I think the stubbed function that throws an error should be exports.default = function rather than module.exports = function EDIT: see follow-up comment below. So that's the first problem.

The second problem is that, while I have no problem in Next 5 or 6 building pages that render in the browser with styled-jsx and TypeScript, I cannot get @babel/register to hook into the Mocha pipeline and transpile properly in Next 6 (which uses Babel 7, which uses pirates, which allows for ts-node/register alongside @babel/register—where 6 would only allow either ts-node or babel-register, and thus apparently can't be used with Mocha in this workflow).

It looks like the upcoming release rethinks css significantly; I don't know if it'll have an effect on this problem. Is there a timeframe for its release?

You can reproduce all the issues I'm talking about at this repo, across its various branches: https://github.com/bensaufley/styled-jsx-example-issues/

• master has no typescript and works as expected
• typescript_at_next5.1 does not use babel-register (it can't) and thus, predictably, can't transpile
• typescript_at_next6 uses @babel/register but still can't transpile.

[bensaufley]

Following up on the first issue, exports.default vs export = css at DefinitelyTyped, I'm realizing that I had conflated the output of my styles.ts and the output of styled-jsx/css, which … doesn't actually exist as anything more than a hook that says "transpile this". So I think my original PR, to satisfy TypeScript's type checking, is correct.

[leebenson]

@timsuchanek - Just want to say a belated thanks for your "jsx": "preserve" tip. I'm using Typescript + Webpack + Babel locally, and couldn't figure out why my other plugins were firing, but not styled-jsx.

Of course, it was because Typescript was already transforming JSX -> React.createElement, so this plugin didn't have the original JSX to parse.

IMO, this could do with being featured under a 'Using with Typescript' section in the readme.

[eric-burel]

Hi, I am hitting this issue with wrong scoping: https://spectrum.chat/styled-jsx/general/storybook-next-js-styled-jsx-styles-not-scoped-to-component~8a63d2a1-6b05-4a27-b839-c4a903eb6f43

style jsx is just converted to a local style tag, so style will be unscoped :/

Edit: ok got it it's actually similar to "Warning: unknown jsx prop on <style> tag" issue. When TS is configured right, it does not complain about "jsx" tag. But it won't build correctly either. An additional step of running Babel for .ts file, with Webpack Babel-loader, is probably mandatory (setting .babelrc is not enough).

As far as I understand you actually need TS code to be transpiled with babel-loader, however it's way less powerful (no custom ts copnfig for example)

[cmnstmntmn]

hei, i'm using CRA typescript template.

i've tried "jsx": "preserve", and this

// custom.d.ts
import "react";

declare module "react" {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

however i'm getting

Warning: Received `true` for a non-boolean attribute `jsx`.

If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
...

any other workarounds?
ty

[el-ethan]

@cmnstmntmn I struggled with the same issue. I am using create-react-library, so my solution might work for you as well. For me, the combination that seemed to work was the two fixes that you use above, plus adding a .babelrc to the root of my project with the following contents:

{
  "plugins": ["styled-jsx/babel"]
}

Hope this works for you as well. I spent many hours banging my head against this one before coming up with something that appears to work...

[fdlmhmd29]

Thank you @smeijer

I was able to fix it with:

// custom.d.ts
import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}