histoire-dev / histoire-dev/histoire

TailwindCSS Logs spam the console

Open
#501 4 comments 7 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

When you edit a file or launch the project it displays all the Tailwind CSS style. However, when you import another CSS than Tailwind it does not

![image](https://user-images.githubusercontent.com/51505384/227998990-73511148-7645-4a05-9bf0-dececcb5640b.png)

Tested with NPM and PNPM.
**I'm on Svelte**: https://github.com/Virtual-Royaume/Royaume-Frontend/blob/main/histoire.setup.ts

### Reproduction

When you import via a `history-setup.ts` in `histoire.config.ts`

```TS
import "$lib/styles/tailwind.css";
```

```TS
import { defineConfig } from "histoire";
import { HstSvelte } from "@histoire/plugin-svelte";

export default defineConfig({
plugins: [
HstSvelte()
],
setupFile: "./histoire.setup.ts",
viteNodeInlineDeps: [
/clsx/
]
});
```

### System Info

```shell
System:
OS: Windows 10 10.0.19045
CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Memory: 7.12 GB / 15.95 GB
Binaries:
Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.54)
npmPackages:
vite: ^4.2.1 => 4.2.1
```

### Used Package Manager

pnpm

### 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

Reproduce the console output with the import in histoire.setup.ts and the configuration in histoire.config.ts, using the Svelte setup described in the issue. Trace how the Tailwind CSS import is handled during file edits or project launch. Done means Tailwind styles no longer spam the console while importing another CSS file retains its current behavior.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.