coteh / create-react-app-v3 Goto Github PK

https://emotion.sh/docs/introduction

https://www.npmjs.com/package/@emotion/core

Add it as a library to the react-scripts here, so I don't need to include it for every project I make that uses this forked version of react-scripts.

Benefits of CSS-in-JS

• Ability to do :hover, @media and other conditional CSS inline
• Easy prototyping of styles using familiar CSS syntax

Downsides

• Will not report errors at build-time (at least not with current configuration)
• Adds more bloat to component files? (may have to use this library more to know for sure)

If I create an app using this custom react-scripts, e.g.:

npx create-react-app my-app --scripts-version coteh-react-scripts

It will generate a react-app-env.d.ts that references react-scripts instead of coteh-react-scripts. This will break the React logo SVG in the sample app since SVG type is defined within react-scripts itself but it's deleted upon creation. For now, would have to manually switch it to coteh-react-scripts which also has SVG typing (since it's a fork of `react-scripts)