From 9b5e480f93c3504ec557e4d425305b16ac3065d6 Mon Sep 17 00:00:00 2001
From: Dmitry Krupenya <dkrupenya@gmail.com>
Date: Mon, 18 May 2020 14:39:20 +0300
Subject: [PATCH] chore: custom loader for rollup-postcss-plugin to handle
 reshadow files

---
 .../builder/configs/reshadow-loader.js        | 48 +++++++++++++++++++
 .../packages/builder/configs/rollup.config.js | 25 +++++-----
 webapp/packages/core/assets/styles/_tabs.scss |  2 +-
 3 files changed, 63 insertions(+), 12 deletions(-)
 create mode 100644 webapp/packages/builder/configs/reshadow-loader.js

diff --git a/webapp/packages/builder/configs/reshadow-loader.js b/webapp/packages/builder/configs/reshadow-loader.js
new file mode 100644
index 0000000000..0b83154938
--- /dev/null
+++ b/webapp/packages/builder/configs/reshadow-loader.js
@@ -0,0 +1,48 @@
+const postcss = require('postcss')
+
+function isModuleFile(file) {
+  return /\.module\.[a-z]{2,6}$/.test(file)
+}
+
+module.exports =  {
+  name: 'reshadow-loader',
+  alwaysProcess: true,
+  // `test` option is dynamically set in ./loaders
+  async process({ code, map }) {
+
+    const postcssOptions = {
+      to: this.id,
+      from: this.id,
+      map: false,
+    };
+
+    console.log(this.id)
+
+    const moduleScope = isModuleFile(this.id) ? 'local' : 'global';
+
+    const plugins = [
+      require('reshadow/postcss')({ scopeBehaviour: moduleScope })
+    ]
+
+    const result = await postcss(plugins).process(code, postcssOptions)
+
+    for (const message of result.messages) {
+      if (message.type === 'dependency') {
+        this.dependencies.add(message.file)
+      }
+    }
+
+    for (const warning of result.warnings()) {
+      if (!warning.message) {
+        warning.message = warning.text
+      }
+
+      this.warn(warning)
+    }
+
+    return {
+      code: result.css,
+      map: map,
+    }
+  }
+}
diff --git a/webapp/packages/builder/configs/rollup.config.js b/webapp/packages/builder/configs/rollup.config.js
index dba0c070e9..f069ff7e96 100644
--- a/webapp/packages/builder/configs/rollup.config.js
+++ b/webapp/packages/builder/configs/rollup.config.js
@@ -6,6 +6,7 @@ const commonjs = require('rollup-plugin-commonjs');
 const peerDepsExternal = require('rollup-plugin-peer-deps-external');
 const includePaths = require('rollup-plugin-includepaths');
 const typescriptPlugin = require('rollup-plugin-typescript2');
+const reshadowLoader = require('./reshadow-loader');
 
 const includePathOptions = {
   include: {},
@@ -56,20 +57,22 @@ function configBuilder(options = defaultBuilderOptions) {
         //   generateScopedName: "[local]___[hash:base64:5]"
         // },
         inject: true,
-        use: {
-          sass: {
-            includePaths: ['node_modules', '../../node_modules'],
-          }
-        },
-        // this option is added in dkrupenya/rollup-plugin-postcss#develop
-        // todo to be converted to custom loader
-        // firstPlugin: require('reshadow/postcss'),
-        // firstPlugin: require('reshadow/postcss')({ scopeBehaviour: 'global' }),
+        use: [
+          [
+            'reshadow-loader',
+            {}
+          ],
+          [
+            'sass',
+            {
+              includePaths: ['node_modules', '../../node_modules'],
+            }
+          ],
+        ],
+        loaders: [ reshadowLoader ],
         plugins: [
           require('postcss-preset-env')({ stage: 0 }),
           require('postcss-discard-comments'),
-          // todo move 'reshadow/postcss' to custom loader to run it before postcss-loader
-          require('reshadow/postcss'),
         ]
       }),
       peerDepsExternal(),
diff --git a/webapp/packages/core/assets/styles/_tabs.scss b/webapp/packages/core/assets/styles/_tabs.scss
index f5cdae2e35..7c211c017e 100644
--- a/webapp/packages/core/assets/styles/_tabs.scss
+++ b/webapp/packages/core/assets/styles/_tabs.scss
@@ -33,7 +33,7 @@
     flex: 1;
   }
 
-  .__Tab {
+  Tab {
     composes: theme-typography--body2 from global;
     position: relative;
     outline: none;