From 502cc4ccb6b7dc2314d4a962606babc0ab4bc175 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 19 Oct 2021 23:55:24 +0900
Subject: [PATCH] Storybook: Lazy load LTR/RTL styles

---
 storybook/decorators/with-rtl.js | 21 ++++++++++++++++-
 storybook/style-ltr.lazy.scss    |  7 ++++++
 storybook/style-rtl.lazy.scss    |  7 ++++++
 storybook/style.scss             | 20 ----------------
 storybook/webpack.config.js      | 39 ++++++++++++++++++++------------
 5 files changed, 59 insertions(+), 35 deletions(-)
 create mode 100644 storybook/style-ltr.lazy.scss
 create mode 100644 storybook/style-rtl.lazy.scss

diff --git a/storybook/decorators/with-rtl.js b/storybook/decorators/with-rtl.js
index 3de885963e8c7..cb51138f8e0dd 100644
--- a/storybook/decorators/with-rtl.js
+++ b/storybook/decorators/with-rtl.js
@@ -7,7 +7,13 @@ import { forceReRender } from '@storybook/react';
  * WordPress dependencies
  */
 import { addFilter, removeFilter } from '@wordpress/hooks';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ltrStyles from '../style-ltr.lazy.scss';
+import rtlStyles from '../style-rtl.lazy.scss';
 
 export const WithRTL = ( Story, context ) => {
 	const ref = useRef();
@@ -35,6 +41,19 @@ export const WithRTL = ( Story, context ) => {
 		return () => removeFilter( 'i18n.gettext_with_context', 'storybook' );
 	}, [ context.globals.direction ] );
 
+	useLayoutEffect( () => {
+		if ( context.globals.direction === 'rtl' ) {
+			rtlStyles.use();
+		} else {
+			ltrStyles.use();
+		}
+
+		return () => {
+			ltrStyles.unuse();
+			rtlStyles.unuse();
+		};
+	}, [ context.globals.direction ] );
+
 	return (
 		<div ref={ ref }>
 			<Story { ...context } />
diff --git a/storybook/style-ltr.lazy.scss b/storybook/style-ltr.lazy.scss
new file mode 100644
index 0000000000000..a799679206e50
--- /dev/null
+++ b/storybook/style-ltr.lazy.scss
@@ -0,0 +1,7 @@
+// @wordpress package styles (ltr)
+@import "../packages/components/build-style/style";
+@import "../packages/block-editor/build-style/style";
+@import "../packages/block-library/build-style/style";
+@import "../packages/block-library/build-style/theme";
+@import "../packages/block-library/build-style/editor";
+@import "../packages/format-library/build-style/style";
diff --git a/storybook/style-rtl.lazy.scss b/storybook/style-rtl.lazy.scss
new file mode 100644
index 0000000000000..0aae79416b079
--- /dev/null
+++ b/storybook/style-rtl.lazy.scss
@@ -0,0 +1,7 @@
+// @wordpress package styles (rtl)
+@import "../packages/components/build-style/style-rtl";
+@import "../packages/block-editor/build-style/style-rtl";
+@import "../packages/block-library/build-style/style-rtl";
+@import "../packages/block-library/build-style/theme-rtl";
+@import "../packages/block-library/build-style/editor-rtl";
+@import "../packages/format-library/build-style/style-rtl";
diff --git a/storybook/style.scss b/storybook/style.scss
index 796fa2e4baada..172fc48710b80 100644
--- a/storybook/style.scss
+++ b/storybook/style.scss
@@ -9,23 +9,3 @@
 @import "~@wordpress/base-styles/default-custom-properties";
 @import "~@wordpress/base-styles/variables";
 @import "~@wordpress/base-styles/z-index";
-
-html[dir="ltr"] {
-	// @wordpress package styles (ltr)
-	@import "../packages/components/src/style.scss";
-	@import "../packages/block-editor/src/style.scss";
-	@import "../packages/block-library/src/style.scss";
-	@import "../packages/block-library/src/theme.scss";
-	@import "../packages/block-library/src/editor.scss";
-	@import "../packages/format-library/src/style.scss";
-}
-
-html[dir="rtl"] {
-	// @wordpress package styles (rtl)
-	@import "../packages/components/build-style/style-rtl";
-	@import "../packages/block-editor/build-style/style-rtl";
-	@import "../packages/block-library/build-style/style-rtl";
-	@import "../packages/block-library/build-style/theme-rtl";
-	@import "../packages/block-library/build-style/editor-rtl";
-	@import "../packages/format-library/build-style/style-rtl";
-}
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
index d13327df6cbe8..74f5128e9b1cd 100644
--- a/storybook/webpack.config.js
+++ b/storybook/webpack.config.js
@@ -8,6 +8,24 @@ const path = require( 'path' );
  */
 const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
 
+const scssLoaders = ( { isLazy } ) => [
+	{
+		loader: 'style-loader',
+		options: { injectType: isLazy ? 'lazyStyleTag' : 'styleTag' },
+	},
+	'css-loader',
+	{
+		loader: 'postcss-loader',
+		options: {
+			postcssOptions: {
+				ident: 'postcss',
+				plugins: postcssPlugins,
+			},
+		},
+	},
+	'sass-loader',
+];
+
 module.exports = ( { config } ) => {
 	config.module.rules.push(
 		{
@@ -17,20 +35,13 @@ module.exports = ( { config } ) => {
 		},
 		{
 			test: /\.scss$/,
-			use: [
-				'style-loader',
-				'css-loader',
-				{
-					loader: 'postcss-loader',
-					options: {
-						postcssOptions: {
-							ident: 'postcss',
-							plugins: postcssPlugins,
-						},
-					},
-				},
-				'sass-loader',
-			],
+			exclude: /\.lazy\.scss$/,
+			use: scssLoaders( { isLazy: false } ),
+			include: path.resolve( __dirname ),
+		},
+		{
+			test: /\.lazy\.scss$/,
+			use: scssLoaders( { isLazy: true } ),
 			include: path.resolve( __dirname ),
 		}
 	);