New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript typings #90

Closed
timsuchanek opened this Issue Jan 23, 2017 · 26 comments

Comments

@timsuchanek

timsuchanek commented Jan 23, 2017

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

This comment has been minimized.

Contributor

rauchg commented Jan 23, 2017

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

@giuseppeg

This comment has been minimized.

Collaborator

giuseppeg commented Jan 23, 2017

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

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

@timsuchanek

This comment has been minimized.

timsuchanek commented Jan 23, 2017

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

This comment has been minimized.

Hotell commented Jan 23, 2017

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

This comment has been minimized.

timsuchanek commented Jan 23, 2017

@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

This comment has been minimized.

niksurff commented Feb 16, 2017

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

This comment has been minimized.

Contributor

rauchg commented Feb 17, 2017

@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

This comment has been minimized.

ghost commented Mar 2, 2017

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

This comment has been minimized.

jvoros commented May 18, 2017

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

This comment has been minimized.

smeijer commented Jul 26, 2017

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

This comment has been minimized.

smeijer commented Jul 26, 2017

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

This comment has been minimized.

tomitrescak commented Oct 16, 2017

@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

This comment has been minimized.

naffiq commented Nov 6, 2017

@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

This comment has been minimized.

littlepoolshark commented Dec 7, 2017

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

This comment has been minimized.

lesnitsky commented Dec 14, 2017

@lesnitsky

This comment has been minimized.

lesnitsky commented Dec 26, 2017

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

This comment has been minimized.

lesnitsky commented Jan 3, 2018

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

@1kohei1

This comment has been minimized.

1kohei1 commented Jan 12, 2018

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

This comment has been minimized.

Contributor

a-ignatov-parc commented Jan 12, 2018

@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

This comment has been minimized.

1kohei1 commented Jan 14, 2018

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

@Matityahul

This comment has been minimized.

Matityahul commented Jan 31, 2018

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

This comment has been minimized.

ahoyahoy commented Feb 7, 2018

How write this for Inferno?

import 'react';

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

This comment has been minimized.

Collaborator

giuseppeg commented Mar 9, 2018

@R1ZZU can you help these folks?

@bensaufley

This comment has been minimized.

bensaufley commented Apr 6, 2018

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/

@bensaufley

This comment has been minimized.

bensaufley commented Apr 6, 2018

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

This comment has been minimized.

leebenson commented May 6, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment