Astro support?

[MrFoxPro]

I'm trying to run macaron inside Astro project within Solid component. So I placed it inside Astro's vite config, plugins array. but getting an error:

[vite] Internal server error: ENOENT: no such file or directory, open 'astro:scripts/before-hydration.js'
  Plugin: macaron-css-vite
  File: astro:scripts/before-hydration.js

[Mokshit06]

This is unexpected but probably has something to do with how macaron does file resolution. I'll look into why it is happening, but this should be an easy fix

[Mokshit06]

Hey, I'm not getting this error when trying out Astro with macaron. Can you try this again, and if it's still there it would be great if you could make a reproduction of this. You can't declare macaron styles and components inside the .astro file. That is a limitation of astro as it doesn't run the vite plugins on the js code that exists on the pages, but importing styles from another file should work fine.

[arstnei0]

I also ran into a bunch of problems with Astro. The errors at dev time and build time are different, but they are all emitted by [vite:build-import-analysis].

At dev time, the error is:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
    at Object.getFileScope (/home/zihan/h/ohhwebdev/node_modules/.pnpm/@[email protected]/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:33:11)
    at Proxy.globalStyle (/home/zihan/h/ohhwebdev/node_modules/.pnpm/@[email protected]/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:382:48)
    at /home/zihan/h/ohhwebdev/course/src/styles/global.css.ts:6:0
    at async instantiateModule (file:///home/zihan/h/ohhwebdev/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-ca21228b.js:52420:9)

At build time, the error is

Error: Parse error @:22:77
    at parse$e (file:///home/zihan/h/ohhwebdev/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-ca21228b.js:14787:355)
    at Object.transform (file:///home/zihan/h/ohhwebdev/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-ca21228b.js:43542:27)

The behavior is so weird. Let me try to make a reproduction.

[arstnei0]

https://stackblitz.com/edit/withastro-astro-yxe87y?file=src%2Fpages%2Findex.astro,src%2Fcomponents%2FButton.tsx

[arstnei0]

This time it shows me this:

 error   Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  File:
    /home/projects/withastro-astro-yxe87y/src/components/Button.tsx:5:59
  Code:
    3  |  const button = _$macaron$$button2;
    4  |  export default (props => {
    5  |    return <button class={button}>{props.children}</button>;
       |                                                            ^
    6  |  });

Now the problem should be obvious, that the macaron vite plugin gives vite the wrong file extension after transforming it I guess.

[arstnei0]

Oh Astro's solid integration is not acting as a vite plugin, but it's using astro's renderer api. The order of the transformers may be unpredictable and the error just occured.

[broccolai]

I've been looking into fixing this, but I've been having a hard time debugging it. A macaron integration (astros own implementation of "plugins") could be made

[broccolai]

Posted a bounty for this

[Mokshit06]

Thanks @broccolai for creating the bounty! Glad to see people support development of macaron. Unfortunately haven't been getting time to look into this issue, but will try to see if i can find a fix this week.

[jasons123fortheuse]

The error message you've provided is related to the Vite build system. It appears that it's unable to find a file called 'astro:scripts/before-hydration.js'.

There are a few steps you can take to try and resolve the issue:

Check that the file 'astro:scripts/before-hydration.js' exists in your project and is located at the path specified. If it's not in the expected location, then move it there.

Check that the file is not being deleted during the build process. Check your .vite.config.js or .vite.yaml file to see if there are any build steps that might be removing the file.

Try clearing your cache by running npm cache clean --force or deleting the node_modules directory in your project and reinstalling them with npm install .

Restart your development server and try the build again.