Isolate global styles #339

xaddict · 2022-10-24T13:40:52Z

Describe the bug

When using a histoire.setup.js or style block inside a Vue 3 SFC to import global styles, these styles bleed out into the Histoire styling, overriding color, inputs and theming.

I don't think my application styling should inform Histoire's styling, right?

I suggest to either:

support the [scoped] attribute on style blocks inside SFCs
to make the whole Histoire render area an iframe no matter the settings for grid/single
to support a key styles in histoire.config.js

Reproduction

Create an Histoire Vue 3 project
Create a style sheet with *{color: black}
Import the style sheet in histoire.setup.js
Turn on dark mode
See how the style sheet overrides Histoire's dark theme.

https://stackblitz.com/edit/histoire-vue3-starter-cbmzxo?file=src%2Findex.css

System Info

System:
    OS: macOS 14.3.1
    CPU: Apple M2
    Memory: 24.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v21.6.2/bin/npm
  Browsers:
    Brave Browser: 102.1.39.111
    Chrome: 106.0.5249.119
    Edge: 106.0.1370.52
    Firefox: 106.0.1
    Firefox Developer Edition: 125.0
    Firefox Nightly: 107.0a1
    Safari: 16.0
    Safari Technology Preview: 16.4
  npmPackages:
    @histoire/plugin-vue: ^0.17.15 => 0.17.15 
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4
    histoire: ^0.17.15 => 0.17.15 
    vite: ^5.2.8 => 5.2.8

Used Package Manager

npm
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.

The text was updated successfully, but these errors were encountered:

stackblitz · 2022-10-24T13:40:55Z

Start a new pull request in StackBlitz Codeflow.

histoire-vue3-starter-cbmzxo (Open reproduction)

tillsanders · 2022-10-26T07:46:50Z

I have the same issue: #66 (comment)

I would love to see this be addressed in some way. I'm open to sponsoring a little to help make this happen :)

troyere · 2023-02-10T16:25:17Z

Not strictly related, but there's no iframe at all in grid mode.

Akryum · 2023-02-10T19:31:25Z

support the [scoped] attribute on style blocks inside SFCs

This is already supported :)

xaddict · 2023-02-10T19:47:16Z

Yes that’s not the problem. Global styles leaking into histoire’s UI are the problem Met vriendelijke groet, Luuk Lamers

…

On 10 Feb 2023 at 20:31 +0100, Guillaume Chau ***@***.***>, wrote: > support the [scoped] attribute on style blocks inside SFCs This is already supported :) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

Akryum · 2023-02-10T20:47:14Z

Yeah it's a tough issue with no obvious solution (iframe comes with a lot of tradeoffs)

tillsanders · 2023-02-10T21:28:58Z

Would it be possible to run the stories inside a shadow DOM? That would isolate the styles completely.

xaddict · 2023-02-14T10:40:57Z

I don't think so, as I have a global stylesheet that gets imported through the main javascript file. I can't import the stylesheet in every story.

PhotonBursted · 2023-02-23T10:12:47Z

After playing around a bit I noticed some things that may help this along. Perhaps sharing them sparks some new inspiration to get this resolved.

The styles imported in histoire.setup.js are included in the main Histoire app, as well as in the sandbox. It looks like they are "lazily loaded"; the styles from the sandbox only start "bleeding" once the first story is opened. The sandbox itself is an iframe which contains a rendering of the app with the styles included separately.

This can be confirmed by opening the Stackblitz in the original post, opening the app in a new tab, and playing around with it there. It starts out with three <style> tags in the app's <head>, which turns into four once a story is opened. After manually deleting the last one the Histoire app is perfectly displayed, while the styles in the sandbox are retained.

I guess this means the feature is somehow halfway there already? It definitely seems to be possible, at least.

qexk · 2023-04-25T19:47:49Z

This is an issue that prevents histoire from being used in a ton of projects, unfortunately. I hope this’ll be solved soon.

Thanks to @PhotonBursted’s comment, I wrote this in my histoire.setup.ts file and it seems stable enough:

const isIframe = window.self !== window.top;
document.head
    .querySelectorAll("style[type='text/css']:not([data-vite-dev-id*='histoire'])")
    .forEach((style) => isIframe || style.remove());

It’s dirty but it works with v0.15.9

reslear · 2023-05-23T14:05:22Z

@Aksamyt but work only in dev mode

for using const isIframe = window.self !== window.top; good idea:

// src/histoire.setup.ts
import { defineSetupVue3 } from '@histoire/plugin-vue'
import { IonicVue } from '@ionic/vue'

export const setupVue3 = defineSetupVue3(async ({ app, story, variant }) => {
  // https://github.com/histoire-dev/histoire/issues/339#issuecomment-1522329599
  const isIframe = window.self !== window.top

  if (isIframe) {
    await import('@/theme/styles')
    app.use(IonicVue)
  }
})

// src/theme/styles.ts
import '@ionic/vue/css/core.css'
import '@ionic/vue/css/normalize.css'
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'
import '@ionic/vue/css/padding.css'
import '@ionic/vue/css/float-elements.css'
import '@ionic/vue/css/text-alignment.css'
import '@ionic/vue/css/text-transformation.css'
import '@ionic/vue/css/flex-utils.css'
import '@ionic/vue/css/display.css'

import './variables.css'

And additional styles bundled in @ionic/vue package.

BUT

Dynamic CSS load in one bundle:

Not separated is used:

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        ionic: ['@ionic/vue', '@ionic/vue-router'],
      },
    },
  },
},

proof:

histoire/packages/histoire/src/node/build.ts

Lines 142 to 143 in 9209381

    
           // Force chunk strategy 
        
           config.build.rollupOptions.output = {

cssCodeSplit: false proof:

histoire/packages/histoire/src/node/build.ts

Line 165 in 9209381

cssCodeSplit: false,

is patching package:

pnpm patch histoire@0.16.1

and remove code in 1 step, and set true in 2 step.

--- a/dist/node/build.js
+++ b/dist/node/build.js
@@ -114,29 +114,19 @@ export async function build(ctx) {
         config(config) {
             // Don't externalize
             config.build.rollupOptions.external = [];
-            // Force chunk strategy
-            config.build.rollupOptions.output = {
-                manualChunks(id) {
-                    if (!id.includes('@histoire/app') && id.includes('node_modules')) {
-                        for (const test of ctx.config.build?.excludeFromVendorsChunk ?? []) {
-                            if ((typeof test === 'string' && id.includes(test)) || (test instanceof RegExp && test.test(id))) {
-                                // Excluded from vendor chunk
-                                return;
-                            }
-                        }
-                        return 'vendor';
-                    }
-                },
-            };
+
             // Force vite build options
             Object.assign(config.build, {
                 outDir: ctx.config.outDir,
                 emptyOutDir: true,
-                cssCodeSplit: false,
+                cssCodeSplit: true,
                 minify: false,
                 // Don't build in SSR mode
                 ssr: false,
             });

We are getting the expected effect. But then the HTML generation breaks down, and this is the basic logic

need @Akryum help, because now using ionic is not fully production ready.

noclat · 2023-08-26T10:14:28Z

Hi, any updates about isolating Histoire UI and global story styles? That issue defeats Histoire's purpose (sandboxing).

skstuder · 2024-01-25T17:41:47Z

Was so excited at how fast we got this working, but now I am embarrassed to show anyone how bad it looks, because the global styles leak and make Histoire look terrible.

SteinRobert · 2024-02-27T14:43:49Z

const isIframe = window.self !== window.top;
document.head
    .querySelectorAll("style[type='text/css']:not([data-vite-dev-id*='histoire'])")
    .forEach((style) => isIframe || style.remove());

Also hacky - however works for now - took this and added it to setupCode:

export default defineConfig({
  plugins: [
    HstVue(),
    HstNuxt(),
  ],
  setupCode: [`const isIframe = window.self !== window.top;
        const sandbox = window.location.pathname === '/__sandbox.html';
  document.head
      .querySelectorAll("style[type='text/css']:not([data-vite-dev-id*='histoire'])")
      .forEach((style) => (!isIframe && !sandbox) && style.remove());`]
})

This does not work with variants, since these don't use an iFrame.

kuttyhub · 2024-10-24T05:24:43Z

Hi, any updates about this issue?

xaddict added the to triage This issue needs to be triaged label Oct 24, 2022

noclat mentioned this issue Aug 26, 2023

Nuxt: Histoire's Tailwind reset overwrites global styles #586

Open

6 tasks

Akryum self-assigned this Sep 24, 2023

Akryum added bug Something isn't working and removed to triage This issue needs to be triaged labels Sep 24, 2023

Akryum added a commit that referenced this issue Apr 15, 2024

refactor: render stories/grid in iframe only, related to #339

efb719b

Akryum mentioned this issue Apr 15, 2024

refactor: render stories/grid in iframe only, related to #339 #711

Draft

2 tasks

leje512 mentioned this issue Aug 20, 2024

Histoire Tailwind css should be in a layer #721

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Isolate global styles #339

Isolate global styles #339

xaddict commented Oct 24, 2022 •

edited

Loading

stackblitz bot commented Oct 24, 2022 •

edited

Loading

tillsanders commented Oct 26, 2022

troyere commented Feb 10, 2023

Akryum commented Feb 10, 2023

xaddict commented Feb 10, 2023 via email

Akryum commented Feb 10, 2023

tillsanders commented Feb 10, 2023

xaddict commented Feb 14, 2023

PhotonBursted commented Feb 23, 2023

qexk commented Apr 25, 2023

reslear commented May 23, 2023 •

edited

Loading

noclat commented Aug 26, 2023

skstuder commented Jan 25, 2024

SteinRobert commented Feb 27, 2024 •

edited

Loading

kuttyhub commented Oct 24, 2024

Isolate global styles #339

Isolate global styles #339

Comments

xaddict commented Oct 24, 2022 • edited Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

stackblitz bot commented Oct 24, 2022 • edited Loading

tillsanders commented Oct 26, 2022

troyere commented Feb 10, 2023

Akryum commented Feb 10, 2023

xaddict commented Feb 10, 2023 via email

Akryum commented Feb 10, 2023

tillsanders commented Feb 10, 2023

xaddict commented Feb 14, 2023

PhotonBursted commented Feb 23, 2023

qexk commented Apr 25, 2023

reslear commented May 23, 2023 • edited Loading

noclat commented Aug 26, 2023

skstuder commented Jan 25, 2024

SteinRobert commented Feb 27, 2024 • edited Loading

kuttyhub commented Oct 24, 2024

xaddict commented Oct 24, 2022 •

edited

Loading

stackblitz bot commented Oct 24, 2022 •

edited

Loading

reslear commented May 23, 2023 •

edited

Loading

SteinRobert commented Feb 27, 2024 •

edited

Loading