Histoire Tailwind css should be in a layer

mikaelh94 commented 5 months ago

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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue 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.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 5 months ago

Start a new pull request in StackBlitz Codeflow.

histoire-vue3-starter-gvitle (Open reproduction)

andreLuis1506 commented 5 months ago

I have the same problem. the css leaks into ours components. In my case borders not work

leje512 commented 2 months ago

i think that's the same problem as in #339

nikosgpet commented 1 month ago

It is hacky, but a way to put the css of histoire in a separate layer, is to include the following code into histoire.setup.ts :

  document.head
    .querySelectorAll('style[type=\'text/css\'][data-vite-dev-id*=\'histoire\']')
    .forEach((style) => {
      style.setAttribute('data-layer', 'histoire')
      const content = style.textContent
      if (!content?.includes('@layer')) {
        style.textContent = `@layer histoire {${content}}`
      }
    })

This will create a histoire layer and add existing styles inside.

This was inspired by the solution of @qexk https://github.com/histoire-dev/histoire/issues/339#issuecomment-1522329599.

histoire-dev / histoire