From 680d0a0cffb664819fb2f687cd4efad728a2e3ea Mon Sep 17 00:00:00 2001
From: Dino Scheidt <github@dino-scheidt.de>
Date: Mon, 7 Mar 2022 21:38:10 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=F0=9F=90=9B=20Make=20sure=20xstyled?=
 =?UTF-8?q?=20fonts=20are=20transformed=20and=20applied=20in=20storybook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://github.com/storybookjs/storybook/issues/7540#issuecomment-1061112737
---
 .storybook/main.js | 10 ++++++++++
 package.json       |  1 +
 yarn.lock          | 32 +++++++++++++++++++++++++++++---
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 2671efa..f684173 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -14,4 +14,14 @@ module.exports = {
   features: {
     emotionAlias: false,
   },
+  webpackFinal: async (config, { configType }) => {
+    const oneOfRule = config.module.rules.find((rule) => rule.oneOf);
+    const babelRule = oneOfRule.oneOf.find((rule) =>
+      rule.loader?.includes("babel-loader"),
+    );
+
+    babelRule.options.presets.push("@emotion/babel-preset-css-prop");
+
+    return config;
+  },
 };
diff --git a/package.json b/package.json
index 59252c7..8f7c99c 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     ]
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-docs": "^6.4.19",
diff --git a/yarn.lock b/yarn.lock
index f1cefa3..135f2c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -911,7 +911,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.16.7":
+"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.16.7, @babel/plugin-syntax-jsx@npm:^7.2.0":
   version: 7.16.7
   resolution: "@babel/plugin-syntax-jsx@npm:7.16.7"
   dependencies:
@@ -1354,7 +1354,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.12.12":
+"@babel/plugin-transform-react-jsx@npm:^7.12.1, @babel/plugin-transform-react-jsx@npm:^7.12.12":
   version: 7.17.3
   resolution: "@babel/plugin-transform-react-jsx@npm:7.17.3"
   dependencies:
@@ -1881,7 +1881,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.7.1":
+"@emotion/babel-plugin-jsx-pragmatic@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "@emotion/babel-plugin-jsx-pragmatic@npm:0.1.5"
+  dependencies:
+    "@babel/plugin-syntax-jsx": ^7.2.0
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: b92aafafd35eca0cf9690a4b21899827ef24e0ce7bfe97381ef3258113deaa21eb047b492f4eadfac5ba57b301c0bdcab934d776774d91e867f1a8bdb7ab9870
+  languageName: node
+  linkType: hard
+
+"@emotion/babel-plugin@npm:^11.2.0, @emotion/babel-plugin@npm:^11.7.1":
   version: 11.7.2
   resolution: "@emotion/babel-plugin@npm:11.7.2"
   dependencies:
@@ -1903,6 +1914,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-preset-css-prop@npm:^11.2.0":
+  version: 11.2.0
+  resolution: "@emotion/babel-preset-css-prop@npm:11.2.0"
+  dependencies:
+    "@babel/plugin-transform-react-jsx": ^7.12.1
+    "@babel/runtime": ^7.7.2
+    "@emotion/babel-plugin": ^11.2.0
+    "@emotion/babel-plugin-jsx-pragmatic": ^0.1.5
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 211fb98cb5fb958ddaaeeb326595c4681f0d6a8ac626dec4499cbd1771909f9c6d9af174e6288ef444ad256c0cd96238ab1575a460aeb9be93277b521f891eb3
+  languageName: node
+  linkType: hard
+
 "@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
@@ -8320,6 +8345,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "curriculumvitae@workspace:."
   dependencies:
+    "@emotion/babel-preset-css-prop": ^11.2.0
     "@emotion/react": ^11.8.1
     "@emotion/styled": ^11.8.1
     "@mdx-js/react": ^1.6.22