Histoire Tailwind css should be in a layer
mikaelh94 opened this issue · comments
Describe the bug
I use PrimeVue for my components, with the PrimeVue default style and my custom css on top of it.
PrimeVue's default styles are in a layer:
/* Order */
@layer reset, primevue;
When running Histoire, there is some Histoire/TW styles that are not in a layer and they override PrimeVue default styles:
histoire-app/src/app/style/main.pcss
*,
::before,
::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
...
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body,
pre {
margin: 0;
}
Since a css property defined without any layer will always have more specificity than a layered css property, those global styles should be in the @layer base
no ?
Like found in this tw issue
Look at my StackBlitz, the TW default border (border-color: #e5e7eb;
) override my BaseInput invalid border color.
Reproduction
https://stackblitz.com/edit/histoire-vue3-starter-gvitle?file=src%2FBaseButton.story.vue
System Info
System:
OS: macOS 14.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 78.06 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
Browsers:
Chrome: 125.0.6422.60
Safari: 17.3.1
npmPackages:
@histoire/plugin-vue: ^0.17.17 => 0.17.17
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
histoire: ^0.17.17 => 0.17.17
vite: ^5.2.11 => 5.2.11
Used Package Manager
yarn
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.
Start a new pull request in StackBlitz Codeflow.
I have the same problem. the css leaks into ours components. In my case borders not work