Storybook: Lazy load LTR/RTL styles

WordPress · Oct 19, 2021 · 502cc4c · 502cc4c
1 parent ecd87ca
commit 502cc4c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 ),
 		}
 	);