Storybook: 단일 스토리가 다른 모든 스토리의 스타일 시트를 끌어 들이고 있습니까?

또한 webpack은 모든 이야기를 내 보냅니다. 그래서 webpack을 어떻게 구성했는지 궁금합니다.

나는 데코레이터도 사용하려고했는데, 적어도 추가 스타일 시트를 스토리에 분리 할 수 ​​있었기 때문에이 부분이 절반으로 깨졌습니다.

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

트윗 담아 가기

흥미 롭군요!, 이것을 보여주는 저장소가 있습니까?

@ndelangen 이 곧 만들 것입니다.

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

아직도 이걸 확인할 시간을 찾는 중 ..

고마워요; D 이상 해요. 나는 그것을 보았지만 어디서부터 시작해야할지 모르겠습니다.

그래서 내가 생각하는 것은 모든 CSS 파일이 webpack 스타일 로더에 의해 선택되어 헤드에 주입된다는 것입니다. 사용 여부에 관계없이

그러나 고치는 방법?

CSS를 위해 제가 한 일은 CSS 모듈을 사용하는 것입니다. 생성 된 클래스 이름을 내 JS로 가져옵니다. 모든 CSS가 헤드에 함께 삽입 되더라도 고유 한 클래스 / 선택자가 보장되므로 중요하지 않습니다.

그것은 당신이 가지고있는 정확한 문제를 실제로 해결하지 못합니다. 그러나 이것이 스타일 로더의 의도 된 동작이라고 생각합니다.

이것은 사실입니다. i (그리고 우리 회사)는 CSS로 범위를 지정하고 있지만 엄청난 코드 재개발을 수행하고 있으므로 스타일을 공유하므로 styleName 및 className 있습니다. 결국 스토리 북에 영향을 미치는 것은 "외부"CSS 파일입니다.

맥주를 마시고이 문제를 해결하는 방법, 구현 현명한 방법을 알아 낸 후 오늘 밤 다시 스토리 북 코드를 살펴 보겠습니다.

@moimikey 문제에 대해 스타일 로더를 건너 뛰고 데코레이터를 사용하여 수동으로 CSS 파일을로드해야한다고 생각합니다. 아마도 다음과 같습니다.

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

와우 .... 내 마음을 넘어선 적이 없는데 ... 시도해 볼게요.

ick하지만 다시 sass ... x_x를 사용합니다. 나는 심지어 인라인 요구를 시도했다. 하지만 운이별로 없었습니다. 그래도 곧바로 CSS에 대한 훌륭한 솔루션이 될 것입니다 :)

그래서 @mnmtanish. 당신의지도에 감사드립니다. 나는 당신의 영감으로 내 문제를 해결했습니다.

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

mmm 이제 유일한 문제는 스토리에서 스토리로 이동할 때 스타일이 쌓이는 것입니다.

스타일 로더는 제거 할 수 있도록 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은 자바 스크립트를 파싱하고, CSS를 파싱하고, postmessage-channel에 연결하고, 웹 소켓에 다시 연결하는 등 더 많은 것들을해야합니다.

스토리 스위치에서 <style> 요소를 제거하면이 문제를 해결할 수 있습니까?

물론 글로벌 스타일이없고 모든 것이 적절하게 네임 스페이스가 지정되어 있습니다. 이것은 명백한 문제가 아닙니다. 내가 생각하기에 희망찬 생각. 😃

누군가가 위의 진술이 거짓임을 증명할 수 있거나 부정적인 결과가 없음을 입증 할 수 있다면, 모두 귀입니다!

오늘 몇 가지 테스트를했습니다. 데코레이터 패턴이 잘 작동하여 스토리로 전환 한 후에 만 ​​스타일이 삽입됩니다. 그러나 스토리를 전환 할 때 스타일이 제거되지 않는 동일한 문제가 발생했습니다.

나는 데코레이터에서 스타일을 제거하면서 놀았지만 필요한 스타일이 한 번만 적용된 것 같습니다. require ()를 다시 트리거 할 수 있습니까? singleton : false를 사용해 보았지만 문제가 해결되지 않았습니다.

나는 이것을 제안하는 것을 거의 주저하지만 웹팩 캐시를 파열 해 볼 수 있습니다.
https://webpack.github.io/docs/api-in-modules.html#advanced

이것은 웹팩 1 문서이지만 여전히 작동 할 수 있습니다.

아이디어 : 스토리를 전환 할 때 모든 <style>...</style> 를 제거하는 데코레이터를 작성할 수 있습니다. 현재 스토리와 관련이없는 스타일을 정리합니다.

거의 다 왔어요. webpack 구성에서 나는
'style-loader/useable' instead of 'style-loader',

작업 할 API가 추가됩니다. .use ()는 스타일을 추가하고 unuse ()는 스타일을 제거합니다. 내 이야기 ​​파일에서 다음과 같은 데코레이터를 사용합니다.

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

다음 React Component를 사용하여 스타일을 추가하고 제거하십시오.

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 에 대한 아이디어는 나에게 낯선 것이었지만 올바른 방향으로 가고있는 것 같습니다.

이것은 샌드 박싱 스토리 북 https://github.com/Wildhoney/ReactShadow의 또 다른 흥미로운 점입니다.

안녕하세요 여러분! 최근이 문제에서 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 토론을 계속하십시오. 안타깝게도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 요청을 보내주십시오. 비활성 문제는 60 일 후에 마감됩니다. 감사!

@ConneXNL 이이 문제를 마무리하기 위해이 점에서 문서를 개선하는 데 도움을 줄 수 있다고 생각하십니까?

좋은 장소를 찾을 수 없다면 마크 다운 형식으로 어딘가에 꽂아 두세요. 내가 넣어 줄게.

🙇

안녕하세요 여러분! 최근이 문제에서 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 토론을 계속하십시오. 안타깝게도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 요청을 보내주십시오. 비활성 문제는 60 일 후에 마감됩니다. 감사!

안녕, 또 나야! 이 문제를 마무리하여 관리자가 대신 현재 개발 로드맵에 집중할 수 있도록하겠습니다. 언급 된 문제가 여전히 우려되는 경우 새 티켓을 열고이 이전 티켓을 언급하십시오. 스토리 북을 사용해 주셔서 감사합니다!

여기서도 같은 문제인 스토리 북은 각 스토리를 분리하지 않으므로 시각적 테스트 / 승인 테스트에 사용할 수 없습니다.

스토리 주위에 그림자 뿌리를 두면 @ndelangen 의 성능 문제

@bennypowers 흥미 롭습니다! 그것을 달성하는 방법에 대한 코드 샘플이 있습니까? 🙇

@shilman 에게도

안녕하세요. 이 문제도 발생합니다.
이 문제가 해결되었거나 해결 방법이 있습니까?

뿡뿡

여기서 가장 빠른 만족도는 ReactShadow 를 사용 하라는 @moimikey 의 제안 일 것입니다.

취할 전략은 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">

뿡뿡
지적 해주셔서 감사합니다. 저는 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/cssresources WDYT에서 그 접근 방식이 잘 작동 할 것이라고 생각합니다.

뿡뿡
아, 맞아!

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

한 가지 문제는 사용자가 매우 큰 스타일 시트를 가져 오면 "CSS 리소스"탭이 지저분해질 것입니다.

@pocka 맞습니다. cssresources 애드온이 해당 부서에서 크게 향상 될 수 있다고 생각합니다. 그걸 받아들이고 싶니?

뿡뿡
예 : 스마일 :

그런데 사용자가 raw-webpack-query를 작성하도록 허용하는 것에 대해 어떻게 생각하십니까? ( !to-string-loader!... 처럼) 우리가 이것을 없애고 싶다면 애드온 코드에 많은 흑 마법이 필요하다고 생각합니다 ...

기본적으로 babel-macros를 지원하므로 사용자가 macro-preval 을 사용하여 번들에 파일 콘텐츠를 삽입 할 수 있습니까?

몰랐습니다. 곧 살펴 볼게요!

안녕하세요, 동일한 문제가 발생했습니다.

문제가있는 사람은 이 해결 방법을 시도해보십시오. (하지만 약간의 깊은 웹팩 지식이 필요합니다).

@ndelangen 매크로를 살펴 to-string-loader (또는 file-loader )로 CSS 파일을 가져 오는 규칙을 추가하는 CSSResource 애드온입니다.

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

전 처리기의 경우 test 및 use 를 사용자 지정하는 옵션도 필요합니다. 스타일 파일에 대한 규칙을 선택한 다음 oneOf 로 수정할 수 있지만 너무 복잡합니다 ...

어떻게 생각해?

@pocka 예, 흥미로운 개념처럼 들립니다!

안녕하세요, 아직 작업 중인지 궁금하십니까? 또한 문제가 발생했습니다. 해결 방법을 알고 있지만 조만간 수정 사항을 사용할 수 있는지 알고 싶습니다.

안녕하세요, Vue Story를 사용하여 해결 방법의 예를 제공 할 수 있습니까?

내가 말할 수있는 한, 해결 방법 은 적어도 문서 부가 기능을 사용하는 경우 초기보기 후에 스타일 시트가 쌓이는 결과를 가져옵니다. 😕

무례한 의도가 없었기 때문에 @pocka 의 애드온 접근 방식은 더 일반적인 패턴이라고 생각하는 스토리 파일과 달리 구성 요소 파일에서 가져온 스타일을 분리하지 않기 때문에 다소 부족하다는 것을 알았습니다. 내 개인적인 소망 (이 스레드의 다른 사람들이 이것을 공유 할 수 있다고 생각합니다.)은 Button.jsx 스토리 파일에서만 사용되는 Button.jsx 내부에 import './Button.css' 를 가질 수있는 것입니다 Button.jsx 를 가져 왔습니다. @pocka 가 제공 한 방식의 스토리 별 스타일링은 Button (직간접 적으로)를 가져 오지 않는 구성 요소가 영향을받지 않도록하는 것만 큼 중요하지 않습니다. Button.css 모든 CSS 규칙. (여기에서 우려되는 점은 OtherWidget.css 에 실수로 Button.css 로 끝나는 일부 규칙이 없는지 확인하려는 것입니다. OtherWidget의 스토리는 전체 앱의 정적으로 가져온 CSS를 모두 가져 오므로 OtherWidget은 Storybook에서 여전히 잘 보입니다.)

대신 제가 생각하는 것은 모든 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 는 모든 관련 스타일이 인라인 <style> 태그로 연결된 스토리의 HTML을 연결 한 것입니다. Story는 평소처럼 :host 선택기로 호스트 요소의 스타일을 지정할 수 있습니다.

이는 아마도 일부 라이브러리 코드로 나중에 빌드 할 수있는 최소한의 시작점이지만, 적어도 새로 제안 된 모든 API가 필요없이 강력한 스타일 캡슐화의 목표를 달성 할 것입니다.

그래도 webpack과 어떻게 작동합니까? Webpack은 모든 것을 DOM 문자열이 아닌 JavaScript 번들로 패키징합니다. 웹팩이 현재 구성되는 방식은 모든 스토리를 단일 번들로 패키징합니다. JavaScript가 (핫 리)로드되는 경우 문서의 머리에 스타일을 직접 삽입 할 때 섀도우 루트가 도움이되지 않는다고 생각합니다. 이를 변경하려면 털이 많은 웹팩 구성을 수행해야합니다.

Shadow DOM을 사용하여 각 스토리를 완전히 분리하는 것은 많은 스토리에서 공유하는 스타일 태그를 각 스토리로 복제하는 것을 의미하기도합니다. 웹팩에 번들로 제공되는 공유 스타일을 사용하는 것이 더 효율적입니다. 큰 차이를 만들기에는 충분하지 않을 수도 있지만, lazyStyleTag 대신 Shadow DOM을 사용하는 이점이 있다면이를 상쇄하기에 충분할 수 있습니다. 당신을 구하십시오).

조만간이 문제가 해결되는 것을보고 싶습니다.

안전하고 성능에도 좋지 않습니다.

새로운 iframe은 자바 스크립트를 파싱하고, CSS를 파싱하고, postmessage-channel에 연결하고, 웹 소켓에 다시 연결하는 등 더 많은 것들을해야합니다.

@ndelangen 2017에서 인용 해 죄송하지만 iframe을 다시로드하는 것이 너무 비싸다는 것이 여전히 귀하의 관점입니까? 브라우저는 이러한 유형의 작업을 지속적으로 수행합니다. 아마 매우 최적화되어있을 것입니다. 이 경우 관련된 네트워크 요청이 없기 때문에 일반 페이지로드보다 훨씬 빠릅니다.

나에게 이익은 비용보다 큽니다. 각 스토리에 대해 새로운 iframe을 매우 선호하기 때문입니다. 나는 그러한 사치품을 위해 600ms의 지연을 허용 할 것입니다.

(내 사용 사례는 스토리 북에서 일부 레거시 angularjs 구성 요소를 렌더링하려고하는 것입니다. 구성 요소가 매우 순수하지 않다고 가정 해 보겠습니다. 매우 상태 저장입니다. 부작용이 있으며 다음과 같은 angularjs 서비스를 사용합니다. 상황이 예상치 못한 방식으로 중단됩니다.)

API 표면에 대한 한 가지 아이디어는 .storybook/manager.js 에서 스토리 북을 구성하는 것입니다.

addons.setConfig({
  refreshBetweenStories: true,
})

머리를 올바른 방향으로 기울이면 UI 설정으로 간주 될 수 있습니다.

이 플래그를 활성화하지 않는 사람에게는 런타임 비용이 들지 않으며 활성화하는 사람에게는 _ 정말로 _ 필요하므로 이러한 지연은 허용됩니다.

이 문제를 해결하려면 문제 설명에 👍을 추가하여 찬성하세요. 우선 순위를 정하는 데이 정보를 사용합니다!

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

안녕하세요!!!!
이거 어디에 둘 수 있나요? !!!