Storybook: Addon-docs: classNames overwritten in inline MDX stories

Created on 2 Sep 2019  路  5Comments  路  Source: storybookjs/storybook

When using MDX docs, any classNames on markup written within a <Story> is getting converted into a small hashed name.

To Reproduce

<Story name="theme">
    <h1 className="text-lg">Hello Hugh</h1>
</Story>

Expected behavior
The output should be:

<h1 class="text-lg">Hello Hugh</h1>

Actual output

<h1 className="sbdocs-h1 css-zj4ng8">Hello Hugh</h1>

Screenshots
If applicable, add screenshots to help explain your problem.
unknown

System:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.11.2 - ~/.nvm/versions/node/v12.6.0/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 68.0.2
Safari: 12.1.2
npmPackages:
@storybook/addon-a11y: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addon-actions: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addon-docs: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addon-knobs: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addon-storyshots: 5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addon-storyshots-puppeteer: 5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addon-storysource: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/addons: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/react: ^5.2.0-rc.2 => 5.2.0-rc.2
@storybook/source-loader: ^5.2.0-rc.2 => 5.2.0-rc.2

docs bug high priority

Most helpful comment

Hey, just circling back on this one. Is the prerequisite here that in order to avoid JSX classNames being hashed, we'll need to wrap components etc. within a <Story> when writing MDX?

I'd like to write certain pages in "Docs mode" and just render the MDX, as opposed to a series of stories. Although I'm not sure I can add any markup with className in there without them being obfuscated?

All 5 comments

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-rc.4 containing PR #7974 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

According to @palnes this fix didn't work for static builds. Reopening.

False alarm

Hey, just circling back on this one. Is the prerequisite here that in order to avoid JSX classNames being hashed, we'll need to wrap components etc. within a <Story> when writing MDX?

I'd like to write certain pages in "Docs mode" and just render the MDX, as opposed to a series of stories. Although I'm not sure I can add any markup with className in there without them being obfuscated?

@adamduncan Can you create a separate issue for this? It sounds like a another bug.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tomitrescak picture tomitrescak  路  3Comments

wahengchang picture wahengchang  路  3Comments

rpersaud picture rpersaud  路  3Comments

xogeny picture xogeny  路  3Comments

shilman picture shilman  路  3Comments