histoire-dev / histoire-dev/histoire

Tailwind token preview colors don't render when using `<alpha-value>` syntax

Open
#347 6 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

Thanks for a great project! Really enjoying it so far. Wasn't sure if I should file this as a bug or feature request – apologies if it doesn't qualify as a bug.

I noticed that my Tailwind colors aren't rendering properly when I configure them using the `myColor: 'rgb(var(--my-color) / )'` syntax. The technique allows colors to be configured as CSS variables, while still supporting opacity modifiers. It is fairly new, but described in more detail here:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

### Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-f7q4xn?file=tailwind.config.js

Here I've added a single color to my TW config. Notice that:

1. Under `Tailwind -> Background color` for example, the color is blank
2. This is because the inline style just includes `background: 'rgb(var(--my-color) / )'` as-is.
3. I also added `Test.story.vue` to show that the TW classes otherwise work as expected.

I don't know enough about the different corner cases when Histoire ingests the TW config to suggest what the best fix is. But as far as I've seen so far, I think the alpha is always 1 in these config summaries? So it could be as simple as just replacing `''` with `'1'` in the rendered styles. I'd be happy to try to whip up a PR if that sounds like the right approach.

### System Info

```shell
System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 9.82 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node
npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm
Browsers:
Chrome: 106.0.5249.119
Safari: 16.0
```

### Used Package Manager

npm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and its tailwind.config.js, then trace how Histoire ingests the Tailwind config and renders the Background color preview. Done means colors using the syntax render in the token preview while the existing Tailwind classes continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.