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

@fluxStyles not rendering tag properly #932

Open
3 tasks done
sevenpixels opened this issue Dec 27, 2024 · 0 comments · May be fixed by #933
Open
3 tasks done

@fluxStyles not rendering tag properly #932

sevenpixels opened this issue Dec 27, 2024 · 0 comments · May be fixed by #933

Comments

@sevenpixels
Copy link

Flux version

v1.1.2

Livewire version

v3.5.18

What is the problem?

When viewing the source, the tag generated by @fluxStyles does not render properly. You can see $versionHash and $nonce variables that should be rendered but are not.

<link rel="stylesheet" href="/flux/flux.css?id='. $versionHash . '"' . $nonce . '>

I also looked at @fluxScripts and it does render the tag properly.

<script src="/flux/flux.js?id=eec83d63" data-navigate-once></script>

From the code snippet I provided, here is what is rendered from <!-- Scripts --> down to @turnstileScripts().

        <!-- Scripts -->
        <link rel="preload" as="style" href="https://earth.test/build/assets/app-sN1CxWN4.css" /><link rel="modulepreload" href="https://earth.test/build/assets/app-Xaw6OIO1.js" /><link rel="stylesheet" href="https://earth.test/build/assets/app-sN1CxWN4.css" data-navigate-track="reload" /><script type="module" src="https://earth.test/build/assets/app-Xaw6OIO1.js" data-navigate-track="reload"></script>        <link rel="stylesheet" href="/flux/flux.css?id='. $versionHash . '"' . $nonce . '>
<script>
    let appearance = window.localStorage.getItem('flux.appearance') || 'system'

    if (appearance === 'system') {
        appearance = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    appearance === 'dark' ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')
</script>
        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Code snippets

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net" rel="preconnect">
        <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @fluxStyles
        @turnstileScripts()
    </head>

    <body class="bg-white dark:bg-zinc-800">

        <div class="flex min-h-screen flex-col">
            <main class="flex-grow">
                <div>
                    <a class="mt-20 flex justify-center" href="" wire:navigate>
                        Earth
                    </a>

                    <div class="mx-auto w-full max-w-md px-4 py-10 sm:px-0">
                        {{ $slot }}
                    </div>
                </div>
            </main>
        </div>
        <flux:toast />
        @fluxScripts
    </body>

</html>

How do you expect it to work?

I expect the styles tag that is generated to be rendered properly and not display PHP variables.

<link rel="stylesheet" href="/flux/flux.css?id=123456ab">

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.
@sevenpixels sevenpixels linked a pull request Dec 27, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix @fluxStyles rendering sevenpixels/flux
1 participant
@sevenpixels