8000 Malformed output when using `before:content-['\201C']` · Issue #13718 · withastro/astro · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Malformed output when using before:content-['\201C'] #13718

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
Open
1 task
Garanas opened this issue Apr 29, 2025 · 0 comments
Open
1 task

Malformed output when using before:content-['\201C'] #13718

Garanas opened this issue Apr 29, 2025 · 0 comments
Labels
needs triage Issue needs to be triaged

Comments

@Garanas
Copy link
Garanas commented Apr 29, 2025 •
edited
Loading

Astro Info

Astro                    v5.7.5
Node                     v20.13.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

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

No response

Describe the Bug

I use Tailwind with Astro. Installed everything according to the documentation last week while following a tutorial and trying to apply that to Astro.

There's a proof of concept of the bug here.

It appears that the moment I introduce before:content-['\201C'] as a class to the paragraph of the quote component that the HTML output is malformed. I would expect to see in the browser:

<figure class="my-12">
    <blockquote class="bg-teal-600 dark:bg-black pl-14 pr-8 py-12 rounded-3xl relative">
        <p class="text-2xl sm:text-3xl text-left mt-2 text-white dark:text-slate-400 before:content-['\201C']">
            Acme
            has always been there
            for me. Their Explorer rocket arrived in a wooden crate as expected.
            Life-long customer! A++ shopping experience.
        </p>
    </blockquote>
    <figcaption class="italic text-xl sm:text-2xl text-right mt-2 text-slate-500 dark:text-slate-400">
        - Wile E. Coyote, Genius
    </figcaption>
</figure>

But what I see instead is:

Acme
has always been there
for me. Their Explorer rocket arrived in a wooden crate as expected.
Life-long customer! A++ shopping experience.
<p></p>
<figcaption class="italic text-xl sm:text-2xl text-right mt-2 text-slate-500 dark:text-slate-400">
    - Wile E. Coyote, Genius
</figcaption>

If I remove before:content-['\201C'] as a class then I get the expected result in the browser.

<figure class="my-12">
    <blockquote class="bg-teal-600 dark:bg-black pl-14 pr-8 py-12 rounded-3xl relative">
        <p class="text-2xl sm:text-3xl text-left mt-2 text-white dark:text-slate-400">
            Acme
            has always been there
            for me. Their Explorer rocket arrived in a wooden crate as expected.
            Life-long customer! A++ shopping experience.
        </p>
    </blockquote>
    <figcaption class="italic text-xl sm:text-2xl text-right mt-2 text-slate-500 dark:text-slate-400">
        - Wile E. Coyote, Genius
    </figcaption>
</figure>

The issue appears to be in the use of \. See also the Stackblitz.

What's the expected result?

To not have malformed HTML.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-5qxgfgje

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 Apr 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage Issue needs to be triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Garanas
0