I am struggling to get my twin.macro setup working in my React app. I cannot provide an entire history of what I've tried, since I have tried dozens of different things, but I will outline my current setup and outline what is not working.
I am using react-app-rewired because it seems I need a custom Babel configuration which apparently create-react-app does not support. For completeness, here is my package.json:
{
"name": "my app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/date-fns": "^2.16.0",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.5",
"@mui/x-data-grid": "^5.17.8",
"@mui/x-date-pickers": "^5.0.5",
"@reduxjs/toolkit": "^1.8.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^27.5.2",
"@types/node": "^17.0.45",
"@types/react": "^18.0.20",
"@types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"d3": "^7.6.1",
"date-fns": "^2.29.3",
"html-react-parser": "^3.0.4",
"http-proxy-middleware": "^2.0.6",
"material-ui-popup-state": "^4.1.0",
"radash": "^7.1.0",
"react": "^18.2.0",
"react-csv": "^2.2.2",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.4.0",
"react-window": "^1.8.7",
"recharts": "^2.1.14",
"resize-observer-polyfill": "^1.5.1",
"twin.macro": "^3.1.0",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@emotion/babel-preset-css-prop": "^11.10.0",
"@types/d3": "^7.4.0",
"@types/react-csv": "^1.1.3",
"@types/react-window": "^1.8.5",
"@types/styled-components": "^5.1.26",
"autoprefixer": "^10.4.13",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-twin": "^1.1.0",
"customize-cra": "^1.0.0",
"postcss": "^8.4.20",
"react-app-rewired": "^2.2.1",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.2.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
My .babelrc looks like this:
{
"plugins": [
"babel-plugin-twin",
"babel-plugin-macros"
],
"presets": ["@emotion/babel-preset-css-prop"]
}
My babel-plugin-macros.config.js like this:
module.exports = {
twin: {
preset: "emotion"
}
}
My config-overrides.js looks like this:
const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());
Thinks that's the entire pertinent config.
So I have this component:
/** @jsxRuntime classic /
/** @jsx jsx */
import { jsx } from '@emotion/react'
const StatsHeader = ({ status, title }: Props) => (
<div tw="bg-red-100">
<span tw="text-red-500">Hello</span>
</div>
);
...which currently yields the following markup:
<span css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)." data-tw="text-red-500">Hello</span>
Removing the /** @jsxRuntime classic / from the top of the file gives rise to a complaint about runtime being automatic, which makes me think the react-app-rewired is not really working? Perhaps? Since it is supposed to create a custom environment?
In any case, the reason I installed the react-app-rewired was in response to the css prop giving an [Object object] in the markup, so if I could fix that and revert, that would probably be a better solution.
Suggestions?
