Storybook: 単一のストーリーが他のすべてのストーリーのスタイルシートを引き込んでいますか？

また、webpackはこれらすべてのストーリーを出力しているので、webpackをどのように構成したのか疑問に思います。

デコレータも使用しようとしましたが、少なくとも追加のスタイルシートをストーリーに分離できたため、これは半分壊れていましたが、他のスタイルシートをトラバースすると、ハードリフレッシュを行わないと、これらのスタイルが壊れてしまいました。

.addDecorator((getStory) => {
  require('./story.sass');
  return getStory();
})

@arunoda @mnmtanish

興味深いです！、これを示すレポはありますか？

@ndelangenはまもなく作成します

@ndelangen https://github.com/moimikey/729-single-stories-pulling-all-stylesheets

まだこれをチェックする時間を見つけようとしています。

ありがとう; Dそれは奇妙なものです。 見てみましたが、どこから始めたらいいのかわかりません。

つまり、起こっていると思うのは、すべてのCSSファイルがwebpackスタイルローダーによって取得され、ヘッドに挿入されているということです。 それらが使用されているかどうか。

しかし、どのように修正するのですか？

私がCSSに対して行ったことは、CSSモジュールを使用することです。 生成されたクラス名をJSにインポートします。 すべてのCSSが一緒にヘッドに挿入されたとしても、一意のクラス/セレクターであることが保証されているため、問題ではありません。

それはあなたが抱えている正確な問題を実際には解決しません。 しかし、これはスタイルローダーの意図された動作だと思います。

これは本当です。 私（および私の会社）はcssでスコープを設定していますが、コードの再開発を行っているため、スタイルを共有しているため、 styleNameとclassName組み合わせになっています。 したがって、ストーリーブックに影響を与えるのは、これらの「外部」のcssファイルです。

ビールを飲んだ後、今夜もう一度ストーリーブックのコードを調べて、実装の観点からこれを解決する方法を見つけます。

@moimikey問題の場合スタイルローダーをスキップして、デコレータを使用してcssファイルを手動でロードする必要があると思います。 おそらくこのようなもの：

.addDecorator(getStory => (
  <div>
    <link ... />
    {getStory()}
  </div>
))

うわー....それは私の心を決して越えませんでした...私はそれを試してみます。

病気ですが、もう一度、sassを使用しています... x_x。 私もインラインrequireを試しました。 でも運が悪かったです。 それはまっすぐなcssのための優れた解決策ですが:)

だから@mnmtanish。 ご指導ありがとうございます。 私はあなたのインスピレーションで私の問題を解決しました：

.addDecorator((getStory) => {
  require('./story.sass');
  return getStory();
})

うーん、それで今の唯一の問題は、ストーリーからストーリーへとナビゲートするときに、スタイルがスタックしているということです:(

たぶん、スタイルローダーは、HEAD以外の場所に挿入して削除できるように構成できます。 私はこれを行っていないので、それが可能かどうかさえわかりません。 これらをチェックしてください。

コンポーネントを完全に分離してロードし、現在選択されているストーリーに関連するJavaScript / CSSのみを実行するのはreactストーリーブックの責任ではありませんか？

これはhttps://github.com/storybooks/react-storybook/issues/686に関連してい

@ConneXNLはい。 いい視点ね。 これは本当です...; X

@mnmtanishもちろん、次の応答は別の問題につながります。 insertAtは役立つかもしれませんが、最新バージョンのstyle-loaderでのみ使用できます。これは、ストーリーブックでは使用できないため、使用できません。 [email protected] 。 ストーリーブックはまだ0.xます。 使用できる最新のバージョンは[email protected] ：（..。

ねえ@moimikey多分あなたはアルファリリースで最後に述べたアプローチを試すことができますか？

ストーリーを切り替えるときに新しいiframe要素を作成する方が良い/安全ではありませんか？

それは安全であり、パフォーマンスにも悪影響を及ぼします。

新しいiframeは、javascriptを解析し、CSSを解析し、postmessage-channelに接続し、websocketに再接続する必要があります。

ストーリースイッチの<style>要素を削除するだけで、この問題を解決できるのではないでしょうか。

もちろん、グローバルスタイルはなく、すべてが適切に名前空間化されています。これは完全に問題になることはありません。 希望的観測だと思います。 😃

誰かが上記のステートメントが間違っていることを証明できるか、否定的な結果がないことを示すことができれば、私はすべての耳です！

今日はいくつかのテストをしました。 デコレータパターンはうまく機能したため、ストーリーに切り替えたときにのみスタイルが挿入されます。 ただし、ストーリーを切り替えるときにスタイルが削除されないという同じ問題がありました。

デコレータでスタイルを削除してみましたが、必要なスタイルは1回しか適用されないようです。 require（）を再トリガーすることは可能ですか？ singleton：falseを使用してみましたが、問題は解決しませんでした。

私はこれを提案することさえほとんど躊躇していますが、webpackキャッシュを破壊してみることができます：
https://webpack.github.io/docs/api-in-modules.html#advanced

これはwebpack1のドキュメントですが、それでも機能する可能性があります。

アイデア：ストーリーを切り替えるときにすべての<style>...</style>を削除するデコレータを作成できます。 現在のストーリーに関係のないスタイルをクリーンアップするため。

もうすぐです。 私が使用するwebpack設定で
'style-loader/useable' instead of 'style-loader',

これにより、操作するAPIが追加されます。 .use（）を使用してスタイルを追加し、unuse（）を使用してスタイルを削除します。 私のストーリーファイルでは、次のようなデコレータを使用しています。

.addDecorator((c) => <ReactStylesheet stylesheets={[require('./stories.scss')]}>{ c() }</ReactStylesheet> )

次のReactコンポーネントを使用して、スタイルを追加および削除します。

import * as React from'react ';

export class ReactStylesheet extends React.Component{

    componentWillUnmount(){
        let stylesheets = Array.isArray(this.props.stylesheets) ? this.props.stylesheets : [this.props.stylesheets];
        stylesheets.forEach((stylesheet) => {
            console.log("Unmounting....");
            stylesheet.unuse();
        });

    }

    componentDidMount(){
         let stylesheets = Array.isArray(this.props.stylesheets) ? this.props.stylesheets : [this.props.stylesheets];
        stylesheets.forEach((stylesheet) => {
            console.log("Mounting....");
            stylesheet.use();
        });
    }

    render(){
        return this.props.children;
    }
}

スタイルシートを正しく変更すると、スタイルがホットリロードされます。 別のストーリーへの切り替えunuse（）が呼び出され、スタイルシートがクリーンアップされます。 ただし、hrmで更新されていないバージョンのスタイルシートをアドバタイズするため、スタイルを再度追加するとメソッドが機能しなくなります。 その後に変更を行うと、次のエラーもスローされます。

Uncaught (in promise) TypeError: Cannot read property 'refs' of undefined
    at update (webpack:///./~/style-loader/addStyles.js?:63:4)
    at eval (webpack:///./src/Component/stories.scss?:32:4)
    at Object.hotApply [as apply] (http://dev.test:6006/static/preview.bundle.js:499:14)
    at cb (webpack:///(webpack)-hot-middleware/process-update.js?:52:36)
    at eval (webpack:///(webpack)-hot-middleware/process-update.js?:68:13)
    at <anonymous>

最新のHRMバージョンを指すようにrequireステートメントを更新する方法がわかりません。

素晴らしい調査作業！ 以前、このようなものを探しましたが、見つかりませんでした。

@ConneXNLを支援するためにこちら側でできることはありますか？

ソリューションが近づいています。 stylesheet.use()とunuseのアイデアは私には異質

これは、サンドボックスストーリーブックのもう1つの興味深い点ですhttps://github.com/Wildhoney/ReactShadow

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間はありません。 私たちはいつでも寄付を受け付けていますので、お手伝いしたい場合はプルリクエストを送ってください。 非アクティブな問題は60日後にクローズされます。 ありがとう！

@ConneXNLでこの問題を解決します。この点で、ドキュメントの改善にご協力いただけますか？

適した場所が見つからない場合は、マークダウン形式でパンクしてください。 入れてお世話になります。

🙇

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間はありません。 私たちはいつでも寄付を受け付けていますので、お手伝いしたい場合はプルリクエストを送ってください。 非アクティブな問題は60日後にクローズされます。 ありがとう！

ねえ、また私だ！ 代わりに、メンテナが現在の開発ロードマップに集中できるように、この問題を解決します。 上記の問題が引き続き懸念される場合は、新しいチケットを開いて、この古いチケットについて言及してください。 Storybookをご利用いただきありがとうございます。

ここでも同じ問題ですが、ストーリーブックは各ストーリーを分離していないため、視覚的なテスト/受け入れテストには使用できません。

ストーリーの周りにシャドウルートを設定すると、 @ ndelangenのパフォーマンスをます

@bennypowersおもしろい！ それを実現する方法のコードサンプルはありますか？ 🙇

@shilmanにとっても面白いかもしれ

こんにちは。 私もこの問題を経験しています
これは修正されましたか、それとも回避策はありますか？

@ndelangen

ここで満足するための最短の道は、おそらく@moimikeyがReactShadowを使用することを提案したことでしょう。

取るべき戦略は、ルートをReactShadowコンポーネントでラップしてから、 adoptedStyleSheets （またはサポートされていないブラウザーの場合は<style>要素）を使用してスタイルを取り込むことです。

https://github.com/storybookjs/storybook/blob/ba74d889fcfd87849a6ae9369f5e4176e8149d33/lib/core/src/client/preview/start.js#L253

これを再度開いてください。この問題により、ストーリーごとにカスタムスタイルを追加することが非常に困難になります。 私は、例としてカスタムスタイルを実装する完全に別個のMDXストーリーを持っており、すべてのストーリーのすべてのスタイルをグローバルに含めると、このユースケースは受け入れられなくなります。

編集：ありがとう!!!

これが2020年3月21日までに解決されることを願っています。

@moimikeyこれを引き受けることに興味はありますか？ 特定の日付までに完了するようにするための最良の方法...😉

IMOは、スタイルシート専用の特別な機能を追加するのではなく、この機能を処理するためのパラメーターまたはアドオンを追加する必要があります。 スタイルシートとスクリプトの間で一貫性のない動作が発生します。 しかし、「孤立」がどうあるべきかを考える良い機会かもしれません。

アドオンアプローチの簡単なPoCを作成しましたが、それが可能かどうか疑問に思っています。
https://github.com/pocka/storybook-addon-css

@pockaあなたは

yazzzzz。 乾杯@pocka

mdx-js / mdx＃894が原因で、MDXストーリーを使用している場合、 @ pockaのソリューションは機能しないことに注意して

編集：私の悪い、それは間違いなくあります！ スタイルローダー1.x +が必要です。次に、次のようにします。

--- a/components/grid/GridChild.stories.mdx
+++ b/components/grid/GridChild.stories.mdx
@@ -1,7 +1,9 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { GridContainer, GridRow, GridChild } from './';
 import '../../shared/critical-path.scss';
-import 'o-grid/demos/src/scss/_demos.scss';
+import demoStylesModule from '!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!o-grid/demos/src/scss/_demos.scss?story';
+
+export const demoStyles = Promise.resolve(demoStylesModule);

 <Meta title="Core|Grid/GridChild" component={GridChild} />

@@ -37,7 +39,12 @@ You supply it a `colspan` prop in one of the following formats:
     ```

 <Preview>
-  <Story name="Default unresponsive columns">
+  <Story
+    name="Default unresponsive columns"
+    parameters={{
+      styles: [demoStyles],
+    }}
+  >
     <GridContainer>
       <GridRow>
         <GridChild colspan="1">

@aendrew
それを指摘してくれてありがとう、私はMDXを完全に忘れました：no_mouth：
PoCを更新し、 MDXの例を

アドオンアプローチ（ストーリースタイルごと）では、ファイルスコープアプローチ（ファイルスタイルごと）とは対照的に、[ドキュメント]タブはすべてのストーリーのすべてのスタイルシートを取得します。 私の例では、「foo」と「baz」のストーリーがfoo.cssをインポートし、「bar」のストーリーがbar.cssインポートすると、[ドキュメント]タブはfoo.cssとbar.css両方を取得します。 。 これは避けられないと思いますし、受け入れられるかどうかはわかりません。

@pockaこのアプローチはhttps://github.com/storybookjs/storybook/tree/next/addons/cssresourcesWDYTでうまくいくと思いますか？

@ndelangen
ああ、そうです！

foo.story = {
  parameters: {
    cssresources: [
      {
        id: 'foo',
        code: `<style>${require('!to-string-loader!css-loader!./foo.css')}</style>`,
        picked: true
      }
    ]
  }
}

1つの懸念事項：ユーザーが非常に大きなスタイルシートをインポートすると、[CSSリソース]タブが乱雑になります。

@pockaそうですね、cssresourcesアドオンはその部門で大幅に改善できると思います。 あなたはそれを引き受けたいと思いますか？

@ndelangen
はい：スマイリー：

ちなみに、ユーザーにraw-webpack-queryを書かせることについてどう思いますか？ （ !to-string-loader!... ）これを取り除きたいのであれば、アドオンコードにたくさんの黒魔術が必要だと思います...

デフォルトでbabel-macrosをサポートしていると思うので、ユーザーはmacro-prevalを使用してファイルコンテンツをバンドルに挿入することもできますか？

知らなかったので、もうすぐ見ていきます！

こんにちは、私は同じ問題を経験しています。

この問題に直面している人は、この回避策を試し

@ndelangenマクロを調べましたが、マクロで有効になるのは「ファイルシステムからCSSファイルをロードする」ことです。 多くのユーザーがSASS、Less、Stylus、PostCSSを使用したCSSファイルなどをインポートしたいと思っているので、このアプローチではニーズを満たせないと思います。 私の現在のアイデアは、CSSResourceアドオンがto-string-loader （またはfile-loader ）でCSSファイルをインポートするルールを追加して、ユーザーがCSSファイルをインポートしてアドオンに使用できるようにすることです。

// adding a rule like this
{
  test: /\.css$/,
  resourceQuery: /cssresources/,
  use: ['to-string-loader', 'css-loader', 'postcss-loader']
}

プリプロセッサの場合、 testとuseをカスタマイズするオプションも必要です。 スタイルファイルのルールを選択してoneOf変更することは可能ですが、非常に複雑になります...

どう思いますか？

@pockaええ、それは面白いコンセプトのように聞こえます！

こんにちは、これがまだ取り組んでいるかどうか疑問に思いますか？ 私もこの問題を経験しています。回避策は知っていますが、修正がすぐに利用可能になるかどうか知りたいです。

こんにちは、VueStoryの回避策の例を教えてください。

私の知る限り、少なくともDocsアドオンを使用している場合は、回避策によって初期ビューの後にスタイルシートがスタックされます。 😕

@pockaのアドオンアプローチは、ストーリーファイルではなく、コンポーネントファイルにインポートされたスタイルを分離しないため、軽視するつもりはありません。これは、より一般的なパターンだと思います。 私の個人的な欲求（これはこのスレッドの他の人と共有されるかもしれないと思う）は、 Button.jsxストーリーファイルでのみ使用されるButton.jsx内にimport './Button.css'含めることができるようにすることです。 Button.jsxがインポートされます。 @pockaが提供する方法でのストーリーごとのスタイル設定は、それ自体がButton （直接的または間接的に）インポートしないコンポーネントが影響を受けないようにすることほど重要ではありません。 Button.cssからのCSSルール。 （ここでの懸念は、たとえば、 OtherWidget.css 、誤ってButton.cssになってしまったルールが欠けていないことを確認したいことです。おそらく、リファクタリングなどで見落とされて、欠落しています。これは、OtherWidgetのストーリーがアプリ全体の静的にインポートされたCSSをすべて取得するため、StorybookではOtherWidgetが引き続き正常に表示されるためです。）

代わりに、すべてのCSSローダーを変更してlazyStyleTagを挿入し、webpack APIを使用して、CSSモジュールを最終的に必要とするストーリーファイルごとにグループ化し、ストーリーの変更をリッスンする新しいモジュールを生成します。適切なモジュールのオンとオフを切り替えるイベント。
このアプローチはすでに検討されて破棄されていますか、それとも現在見られる問題はありますか？ Storybookアドオンですべてを実行できると思いますが、コア機能としてStorybookに統合すると、よりクリーンになる可能性があります。

強力なスタイルのカプセル化が必要な場合は、ブラウザに付属しています。 ここで私自身の無知を暴露するリスクがありますが、組み込みですぐに使用できる何かを達成するために、このユーザーランドJavaScript（それに関連する複雑さのコスト）がすべて必要な理由はまだわかりません。

各ストーリーのDOMを次のようなシャドウルートにレンダリングしてみませんか

customElements.define('encapsulated-story', class EncapsulatedStory extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  /* not sure why we'd need this getter, but let's say */
  get storyHTML() {
    return this.shadowRoot.innerHTML;
  }

  set storyHTML(string) {
    this.shadowRoot.innerHTML = storyHTML;
  }
});

そして物語が変わるときはいつでも

encapsulatedStory.storyHTML = theStoryDOMStringWithAllStyleTags;

終わった？ ここで、 theStoryDOMStringWithAllStyleTagsは、ストーリーのHTMLと、関連するすべてのスタイルをインライン<style>タグとして連結したものです。 Storyは、通常どおり、 :hostセレクターを使用してホスト要素のスタイルを設定できます。

これは最低限の出発点であり、後でライブラリコードを使用して構築できますが、少なくとも、これらの新しい提案されたAPIをすべて必要とせずに、強力なスタイルのカプセル化という目標を達成できます。

しかし、それはwebpackでどのように機能しますか？ Webpackは、すべてをDOM文字列ではなくJavaScriptバンドルにパッケージ化します。 また、webpackの現在の構成方法では、すべてのストーリーが1つのバンドルにパッケージ化されています。 （ホットリ）ロードされているJavaScriptがスタイルをドキュメントのヘッドに直接挿入する場合、シャドウルートが役立つとは思いません。 それを変更するには、なんらかの方法でヘアリーWebpack構成を行う必要があります。

Shadow DOMを使用して各ストーリーを完全に分離することは、多くのストーリーで共有されているスタイルタグをそれぞれに複製することも意味します。 webpackにバンドルされている共有スタイルを使用すると、より効率的になります。 大きな違いを生むには十分ではないかもしれませんが、 lazyStyleTagを使用する代わりにシャドウDOMを使用することの利点がある場合はそれを相殺するのに十分かもしれません（これはシャドウルートが行う唯一の複雑さだと思います）あなたを助ける）。

また、遅かれ早かれこれが修正されるのを見たいと思っています。

それは安全であり、パフォーマンスにも悪影響を及ぼします。

新しいiframeは、javascriptを解析し、CSSを解析し、postmessage-channelに接続し、websocketに再接続する必要があります。

@ndelangen 2017年から引用して申し訳ありませんが、これはまだあなたの見解ですか、iframeのリロードは高すぎるですか？ ブラウザはこの種のことを常に行います。 彼らはおそらくそれのために非常に最適化されています。 この場合、ネットワークリクエストが含まれないため、通常のページの読み込みよりもさらに高速になります。

私にとっては、ストーリーごとに新鮮なiframeを非常に好むため、メリットはコストを上回ります。 私はそのような贅沢のために600msもの遅延を許容します。

（私のユースケースは、ストーリーブックでいくつかのレガシーangularjsコンポーネントをレンダリングしようとしていることです。コンポーネントはあまり純粋ではありません。非常にステートフルです。副作用があり、angularjsサービスを利用します。また、非常にステートフルです。予期しない方法で物事が壊れます。）

APIサーフェスのアイデアの1つは、ストーリーブックを.storybook/manager.jsです。

addons.setConfig({
  refreshBetweenStories: true,
})

頭を正しい方向に傾けると、これはUI設定と見なすことができます。

このフラグを有効にしない人には実行時のコストはかかりません。また、このフラグを有効にする人には、それが_本当に_必要なので、そのような遅延は許容されます。

これを修正したい場合は、問題の説明に👍を追加して賛成してください。 これを使用して優先順位を付けます。

.addDecorator（（getStory）=> {
require（ './ story.sass'）;
getStory（）;を返します。
}）

こんにちは！！！！
これはどこに置けますか？!!!