Double quotes (content: "") transpilation results in invalid CSS rule

[HynekS]

Have a little trouble here. Context: Astro.build MDX file. No plugins.

export const css=`
  .some-class::before {
    content: "";
   /* …other rules */
  }
`
later in MDX file, custom styles are needed:
<div>
  <style>{css}</style>
  Lorem ipsum…
</div>

99 % of it works fine, but the produced CSS is invalid nontheless, because the content: "" line is being transpiled to content: quot;quot;; . I've already tried to use the tailwind content: '""' trick, but the result is content: '""''; 😥. I've tried to use String.raw, replacing quotes with unicode \\0022 symbols, but to no avail. Any hints? Should I open an issue? Thanks!

[wooorm]

You’re likely on MDX 1. Use MDX 2. It solved so, so, so many bugs!

[ChristianMurphy]

Adding on, both try to leverage mdx 2 if possible.
And also try to isolate the issue, does it happen in plain mdx 2, or only in astro?

Astro has had some issues with adding escapes which mdx doesn't usually include in the past.

[HynekS]

Thanks for quick replys.

It might have been an issue caused by Astro. I am in a proccess of migration from Next.js, and in the previous version I used <style dangerouslySetInnerHTML={{__html: '.some-class::before: content: ""; /* etc */ }'}}>` and it worked (however being incredibly hacky – I somehow missed the option to interpolate JS variable directly in the style tags). I'll try to isolate that issue (if it's Astro problem, I am barking at a wrong tree).