search

leebenson / reactql

Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
https://reactql.org
MIT License
1.82k stars 173 forks source link

Emotion: Adding support for css prop without the need for jsx pragma … #172

Open ngomezc opened 5 years ago

ngomezc commented 5 years ago

Current Issue Currently, you have to use the code block below in any React component that uses to wish the CSS Prop for Emotion (rather than via styled method).

Currently:

/** @jsx jsx */
import { jsx } from '@emotion/core'

See https://emotion.sh/docs/css-prop for more details.

Emotion prescribes using the "@emotion/babel-preset-css-prop" babel preset in order to avoid this. However, this does not currently work with Typescript as discussed on the following issue (or as seen by simpling trying to implement it).

https://github.com/emotion-js/emotion/issues/1046

Proposed Changes The proposed changes use the solution described here in order to support the use of the css prop without the need for the pragma statement. This only affects the packages used and the webpack presets/plugins used slightly. All functionality is intact.

Motivation I think it's important to support both Emotion methodologies (CSS Prop and Styled Components) and doing so without the boiletplate currently needed in order to use the former.

tzarger commented 4 years ago

@nickgofly This seems to break Antd (Ant Design) ... have you used Antd with this repo and your update?