`@shikijs/rehype` backgroundColor instead of background-color in style attribute

[Stefan E-K]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Hi :)
I'm currently in the process of updating the solid-ui.com docs to the newest solid-start version and I took the opportunity to also update to shiki 1.0.
But I found an issue with the style attributes that are getting set on the pre-element.

For background you usually expect style="background-color:#ff00ff;" but shiki generates style="backgroundColor:#ff00ff;" which doesn't set the color.

I use the rehype plugin in combination with the vinxi mdx plugin:

rehypePlugins: [
  [
    rehypeShiki,
    {
      theme: "github-dark",
      transformers: [transformerMetaHighlight()],
    },
  ],
],

versions used:

"@shikijs/rehype": "^1.2.0",
"@shikijs/transformers": "^1.2.0",
"shiki": "^1.2.0",

Reproduction

https://github.com/sek-consulting/solid-shiki1.0

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[Anthony Fu]

I don't know where to look at with your reproduction - backgroundColor doesn't seems to come from our codebase. Case convention is not the responsibility of Shiki, that you might want to fix that either in your usage or pipeline - unless you can provide a clear reproduction indicates it's a Shiki's issue. Thank you.

[Stefan E-K]

Thanks for having a look at the problem.

I stripped down the example even more to really make sure it's not some weird side effect.
I removed:

• tailwindcss
• the frontmatter plugins
• the highlight transformer

So it's basically just the rehype plugin included in the barebones mdx template from solidstart:

const { default: mdx } = pkg;

export default defineConfig({
  ssr: true,
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        rehypePlugins: [[rehypeShiki, { theme: "github-dark" }]],
      }),
    ],
  },
});

export default function App() {
  return (
    <Router
      root={(props) => (
        <MDXProvider components={{}}>
          <main>
            <Suspense>{props.children}</Suspense>
          </main>
        </MDXProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

  "devDependencies": {
    "@shikijs/rehype": "^1.2.3",
    "shiki": "^1.2.3"
  }

I updated the repo with the code:
https://github.com/sek-consulting/solid-shiki1.0

If I can help in any other way please let me know :)