Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compatibility issues with React scripts 4.0.3. Parsing error in calc #104

Closed
Taha-Kib opened this issue Sep 28, 2023 · 1 comment
Closed

Compatibility issues with React scripts 4.0.3. Parsing error in calc #104

Taha-Kib opened this issue Sep 28, 2023 · 1 comment
Labels
ecosystem Incompatibility with something else

Comments

@Taha-Kib
Copy link

Taha-Kib commented Sep 28, 2023 •
edited
Loading

I'm using CRA with react scripts 4.0.3 and there is a nested dependency in the react scripts which causes it to use postcss 7 (Can't change it). In postcss 7, there is an issue (It was solved in postcss 8+) that when using calc function, if there are 3 or more variables used, it causes parsing issues.

postcss/postcss-calc#77

The style.css of @radix-ui/themes -> themes -> style.css uses mulitple calculations like this

margin-bottom: calc(
var(--leading-trim-start, var(--default-leading-trim-start)) -
var(--line-height, calc(1em * var(--default-line-height))) / 2
)

When you try to build the project (npm run build), it causes parsing error:
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

Now I just want to know how are we supposed to use themes with react scripts 4.0.3? I can't really update to newer version of react scripts.
@vladmoroz
Copy link
Contributor

We don't plan to support older versions of PostCSS

@vladmoroz vladmoroz closed this as not planned Won't fix, can't repro, duplicate, stale Oct 3, 2023
@nemanjam nemanjam mentioned this issue Nov 20, 2023
Closed
SyntaxColoring added a commit to SyntaxColoring/log-viewer that referenced this issue Nov 22, 2023
@SyntaxColoring
Port the project from Create React App to Vite.
4aa5487 
The thing prompting this now is that our deployments are broken because CRA is giving us obscure build errors for some of our newer dependencies, like @radix-ui/themes. This is apparently caused by outdated dependencies within CRA's toolchain. (radix-ui/themes#104, facebook/create-react-app#11767, and similar.) It's unclear if or when CRA is going to update those dependencies. From reactjs/react.dev#5487 (comment) and the lack of CRA releases since then, it seems like people generally aren't holding their breath.

I can't discern whether Vite is just JS framework hype, but for now at least, it seems easier to port to it than to keep limping along with CRA.

So, to do the port:

* Replace CRA's config files with the defaults from `npm create vite@latest`.
* Delete all the Progressive Web App stuff from CRA. We're not worrying about that for now.
* Update package.json...
  * Add `"type": "module"` per https://vitejs.dev/guide/troubleshooting.html#cjs.
  * Update scripts and dependencies per `npm create vite@latest`. Drop various testing-library dependencies added by CRA, since we weren't using them.
  * Separate dependencies from devDependencies while we're here, just for human organization.
* Replace CRA's default readme with Vite's default readme.
* Port unit tests from Jest to Vitest. This just involves using explicit imports for the globals like `it` and `expect`.
@vladmoroz vladmoroz added the ecosystem Incompatibility with something else label Jan 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
ecosystem Incompatibility with something else
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vladmoroz @Taha-Kib