migration css to linaria

2 files changed, 27 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/.storybook/.babelrc b/packages/taler-wallet-webextension/.storybook/.babelrc
index 39829d509..4476798e2 100644
--- a/packages/taler-wallet-webextension/.storybook/.babelrc
+++ b/packages/taler-wallet-webextension/.storybook/.babelrc
@@ -21,6 +21,6 @@
 {
     //FIXME: check if we can remove this preset and just use default storybook presets
     "presets": [
-        "preact-cli/babel"
+      "preact-cli/babel",
     ]
 }
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/.storybook/main.js b/packages/taler-wallet-webextension/.storybook/main.js
index 38ca14b64..cd58d4d1d 100644
--- a/packages/taler-wallet-webextension/.storybook/main.js
+++ b/packages/taler-wallet-webextension/.storybook/main.js
@@ -40,8 +40,9 @@ module.exports = {
         '@babel/preset-react', {
           runtime: 'automatic',
         },
-        'preset-react-jsx-transform' 
+        'preset-react-jsx-transform'
       ],
+      "@linaria",
     ],
   }),
   webpackFinal: (config) => {
@@ -51,6 +52,30 @@ module.exports = {
       react: "preact/compat",
       "react-dom": "preact/compat",
     };
+
+    // we need to add @linaria loader AFTER the babel-loader
+    // https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack  
+    config.module.rules[0] = {
+      ...(config.module.rules[0]),
+      loader: undefined, // Disable the predefined babel-loader on the rule
+      use: [
+        {
+          ...(config.module.rules[0].use[0]),
+          loader: 'babel-loader',          
+        },
+        {
+          loader: '@linaria/webpack-loader',
+          options: {
+            sourceMap: true, //always true since this is dev
+            babelOptions: {
+              presets: config.module.rules[0].use[0].options.presets,
+            }
+             // Pass the current babel options to linaria's babel instance
+          }
+        }
+      ]
+    };
+
     return config;
   },
 }