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

experimental.directRenderScript does not include css files in build #10998

Closed
1 task
LeanderG opened this issue May 10, 2024 · 0 comments · Fixed by #11026
Closed
1 task

experimental.directRenderScript does not include css files in build #10998

LeanderG opened this issue May 10, 2024 · 0 comments · Fixed by #11026
Assignees
@bluwy
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@LeanderG
Copy link
Contributor

Astro Info

❯ astro info
Astro                    v4.8.2
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If I included a CSS file in a script:

---

---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
		<script>
			import "../styles.css";
		</script>
	</head>
	<body>
		<h1>Astro</h1>
	</body>
</html>

the CSS is included in the output html when I run npm run build, just as expected:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content="Astro v4.8.2" />
    <title>Astro</title>
    <style>
      h1 {
        background-color: tomato;
      }
    </style>
    <script type="module"></script>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

However, if I enable experimental.directRenderScript and run npm run build again, the CSS is not included:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content="Astro v4.8.2" />
    <title>Astro</title>
    <script
      type="module"
      src="/_astro/index.astro_astro_type_script_index_0_lang.Do_j2sSD.js"
    ></script>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

Also the script /_astro/index.astro_astro_type_script_index_0_lang.Do_j2sSD.js doesn't exist in the dist folder.
npm run dev works as expected.

What's the expected result?

If experimental.directRenderScript is enabled, the CSS should still be included in the html output.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-yv1zse?file=src%2Fenv.d.ts,src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label May 10, 2024
@bluwy bluwy added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs triage Issue needs to be triaged labels May 13, 2024
@bluwy bluwy self-assigned this May 13, 2024
@bluwy bluwy mentioned this issue May 13, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bluwy bluwy

Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix CSS handling for experimental.directRenderScript withastro/astro
2 participants
@LeanderG @bluwy