🐛 BUG: Alpinejs bind shorthands (ex. :width="<expression>") in markdown error dev and build

[Tc-001]

What version of astro are you using?

1.0.0-beta.35

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm, pnpm

What operating system are you using?

Linux

Describe the Bug

(Fork from #3458 )

Having a markdown file with the character : be parsed will result in a error in both dev and build.

1. Create test.md with <div :width="1+1" />
2. import {Content} from "./test.md"
3. <Content /> (may be optional, just having it imported could be enough)

Produces an error:

[1:12: Unexpected character `=` (U+003D) in local name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag] {
  reason: 'Unexpected character `=` (U+003D) in local name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag',
  line: 1,
  column: 12,
  source: 'micromark-extension-mdx-jsx',
  ruleId: 'unexpected-character',
  position: {
    start: { line: 1, column: 12, offset: 11, _index: 0, _bufferIndex: 11 },
    end: { line: null, column: null }
  }
}

In my site I also got:

[39:31: Unexpected character `:` (U+003A) before attribute name, expected a character that can start an attribute name, such as a letter, `$`, or `_`; whitespace before attributes; or the end of the tag] {
  reason: 'Unexpected character `:` (U+003A) before attribute name, expected a character that can start an attribute name, such as a letter, `$`, or `_`; whitespace before attributes; or the end of the tag',
  line: 39,
  column: 31,
  source: 'micromark-extension-mdx-jsx',
  ruleId: 'unexpected-character',
  position: {
    start: {
      line: 39,
      column: 31,
      offset: 1167,
      _index: 561,
      _bufferIndex: 24
    },
    end: { line: null, column: null }
  }
}

Removing the : character fixes the error in both cases.

---

Bug got introduced in #3410

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-majhwx?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[hippotastic]

Just a little update here as well: I've fixed this, we just need to wait for @natemoo-re to find a way to add my fix to Astro. :)

It's a bit more complicated than usual because the fix needs to be applied to the tokenizer of an upstream package (micromark-extension-mdx-jsx). As the special shorthand syntax isn't specs-compliant, the upstream author is unlikely to include it in their package, so we will need to fork it or bring the code in in some other way.