styled-jsx, TypeScript and external css files

[paulbrie]

Hi, do you have any working example of next/styled-jsx /TypeScript with external CSS files?

Thanks, Paul

[giuseppeg]

Nope, there is an open issue about typescript. You may want to ask there.

[djskinner]

I'm interested in this also as I've not been able to get this working.

Inline styles as follows now work fine:

        <style jsx>{`
        div {
            background: crimson;
        }
        `}</style>

Note that it's important to use "jsx": "react-native" in your tsconfig.json.

I've tried to externalise the CSS as follows:

// styles.ts
import css from "styled-jsx/css";

export default css`
div {
    background: crimson;
}
`;

Using it in my component as follows:

import styles from "./styles";

<style jsx>{styles}</style>

However this gives the following error:

Syntax Error: <style jsx>{`some css`}</style>), but got MemberExpression

[djskinner]

Here's a basic test case. I took the official TypeScript example and externalised the CSS.

vercel/next.js@canary...djskinner:ts-external-css

This gives the same error as above.

[giuseppeg]

closing this since it Relates to #90