histoire-dev / histoire-dev/histoire

Unable to parse CSS container queries

Open
#466 2 comments 3 reactions 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

After adding CSS container queries to my current project when running the project on dev mode I get an error related for not being able to parse the CSS stylesheet.

### Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-5pmbwd?file=src%2FBaseList.vue

### System Info

```shell
System:
OS: macOS 13.0.1
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 26.80 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 9.5.0 - ~/_code/EKP-Frontend/node_modules/.bin/npm
Browsers:
Brave Browser: 110.1.48.171
Chrome: 110.0.5481.177
Firefox: 110.0
Safari: 16.1
npmPackages:
@histoire/plugin-vue: 0.15.8 => 0.15.8
@vitejs/plugin-vue: 4.0.0 => 4.0.0
histoire: 0.15.8 => 0.15.8
vite: 4.1.1 => 4.1.1
```

### 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 StackBlitz reproduction at src/BaseList.vue and run the project in dev mode to reproduce the stylesheet parsing error. Trace the CSS handling used by Histoire with the Vite-based setup, then verify that the reproduction’s container-query stylesheet parses successfully without breaking existing CSS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript, vite
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.