SSR Final Build Output is including spaces when using css keyword

[rahulranjan-blitz]

Current behavior:

I have written a custom react ssr build tool on top of create-react-app using webpack 5. Creating examples for this framework and adding typescript with emotion css. Its a pretty standard example template which is working when written in js, but not in ts. After running the typescript build, the server file generated garbles up the css inserted using css keyword and template literal. Attaching code snippets below for reference:

App.tsx file -

tsconfig.json details -
{ "compilerOptions": { "allowJs": true, "allowUnreachableCode": false, "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, "downlevelIteration": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "jsx": "react-jsx", "jsxImportSource": "@emotion/react", "lib": ["es6", "es2015", "es2017", "dom"], "module": "commonjs", "moduleResolution": "Node", "noImplicitAny": false, "noImplicitReturns": true, "noImplicitThis": true, "noUnusedLocals": false, "sourceMap": true, "strictNullChecks": true, "strict": false, "pretty": true, "ignoreDeprecations": "5.0", "target": "esnext" }, "exclude": [ "node_modules", "build", "scripts", "acceptance-tests", "webpack", ], "types": ["typePatches", "node", "webpack-env"] }

package.json file -

{ "name": "my-custom-app", "version": "1.0.0", "license": "MIT", "dependencies": { "@emotion/react": "^11.11.4", "axios": "^1.7.2", "chalk": "^4.1.1", "express": "^4.19.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.23.1" }, "devDependencies": { "@emotion/babel-preset-css-prop": "^11.11.0", "@types/express": "^4.17.21", "@types/node": "^20.12.13", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", "@types/webpack-env": "^1.18.5", "@typescript-eslint/eslint-plugin": "^7.11.0", "@typescript-eslint/parser": "^7.11.0", "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^9.1.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.2", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.8.0", "postcss": "^8.4.38", "typescript": "^5.4.5", "webpack": "^5.0.0", "webpack-dev-server": "^5.0.4" } }
I suspect this is due to typescript and specifically the two compilerOptions - jsx: "react-jsx", jsxImportSource: "@emotion/react" because if the same code is run in javascript without tsconfig, the build is generated correctly. Find attached below the code snippets in the build that is causing the issue:

Image 1: Build Code With Typescript

Image 2: Build Code with JS [this one works; and notice there is no const or .css as part of build code]

Expected behavior:

Build code should get generated correctly and should account for spaces and brackets in template literals

Environment information:

• react version:
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.23.1"
• @emotion/react version:
  "@emotion/react": "^11.11.4",

[rahulranjan-blitz]

On further debugging, rewriting the same style following way is somehow able to 'fool' the compiler into generating a correct build

Build code after generation

I am now starting to suspect Terser Webpack Plugin and CSS Minify plugins might be missing some settings, though if that was the case, it should not have been compiled correctly in JS version also. My issue is specifically happening in TS version of the project

[rahulranjan-blitz]

Even this works!

What sorcery is going on??